前端学习的思考-细节打磨12.18`

实际工作中,人脑的想法很多,需要去调用很多知识去解决它。

这里分享实践中遇到的几个细节:

1、先摆图片

我们想要通过点击“鞋品牌”,得到下拉菜单。我们来看代码结构。

很明显,鞋品牌和下拉菜单是兄弟元素,li和下拉菜单是父子元素。

这里我们用两种办法去解决。

一个是同级元素,一个是父级元素。

1、.nav-item2:hover~.meau

.nav-item2:hover代表鼠标移入到鞋品牌后触发。

~.meau代表同级第一个元素的后面的所有同级元素。

注:这里不能用+选择器,.nav-item2:hover~.meau实现不了, 

因为+选择器是同级第一个元素的第一个同级元素。

2、.nav-item2:hover .meau

.nav-item2:hover代表鼠标移入到鞋品牌后触发。

空格:子级选择器,代表.nav-item2的所有子级选择器

.meau代表同级第一个元素的后面的所有同级元素。

相关推荐

  1. 前端学习——关于前端框架思考

    2023-12-21 03:32:03       41 阅读
  2. 前端工作细节提升总结

    2023-12-21 03:32:03       37 阅读
  3. GPT实现细节

    2023-12-21 03:32:03       16 阅读
  4. 关于投标细节

    2023-12-21 03:32:03       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-21 03:32:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-21 03:32:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-21 03:32:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-21 03:32:03       20 阅读

热门阅读

  1. 手动实现 Vue 3的简易双向数据绑定(模仿源码)

    2023-12-21 03:32:03       39 阅读
  2. uniapp-使用返回的base64转换成图片

    2023-12-21 03:32:03       39 阅读
  3. spring 配置模型

    2023-12-21 03:32:03       38 阅读
  4. Python_Tkinter和OpenCV模拟行星凌日传输光度测定

    2023-12-21 03:32:03       47 阅读
  5. 12.1 知识回顾(过滤器、 模型层)

    2023-12-21 03:32:03       28 阅读
  6. 进制转换和图像处理的编程实现

    2023-12-21 03:32:03       35 阅读
  7. vim 基本命令查找和替换

    2023-12-21 03:32:03       40 阅读
  8. 安全面试总结

    2023-12-21 03:32:03       40 阅读
  9. LVS+Keepalived 高可用群集

    2023-12-21 03:32:03       36 阅读
  10. 驱动学习篇

    2023-12-21 03:32:03       40 阅读