摘要：一前言目前在做的练习，初步学习到内容，所以做了总结。这篇博文主要介绍了的选择器相关概念。
一 前言
目前在做IFE的练习，初步学习到CSS内容，所以做了总结。
这篇博文主要介绍了CSS的选择器相关概念。
CSS选择器 可以被分为以下类别:
S1 简单选择器
A1 元素选择器
A2 类选择器
A3 ID选择器
A4 通用选择器
S2 属性选择器
A1 简单属性选择
A2 具体属性值
A3 部分属性值（子串值 属性选择器）
S3 伪类 和 伪元素 选择器
S4 派生选择器
A1 h1,p {xxx}: h1 和 p 同时使用样式规则，他们是并列关系
S5 组合器
A1 .xxx .yyy: 后代选择器，选中 .xxx元素的后代中的 含有.yyy类的元素;
A2 直接子元素选择器 A > B;
A3 相邻兄弟选择器 A + B
A4 普通兄弟选择器 A ~ B
S1 通用类选择器 .xxx: 选取所有 含有xxx类属性 的HTML元素;
S2 元素特定类选择器 p.xxx: 选取含有xxx类属性的 p元素， 而不会选中含有xxx类属性的 span元素
S3 多类选择器
HTML结构上
S4 类选择器和id选择器的区别联系
A1 在HTML中，都区分大小写;
A2 id属性的值是唯一的，而class属性值可以重复
A3 一般实际开发情况下，id给js用，class给css用
A4 应该根据 “他们是什么”来为元素命名，而不是“他们的外观是什么”
S1 简单属性选择
A1 a[class/href]: 选中所有 含有 href/class属性（属性值不限）的 a元素;
A2 ahref: 选中 同时含有 href + title属性（属性值不限）的 a元素;
S2 具体属性值
A1 a[href="xxx"]: 选中 含有 href属性 + 属性值严格等于/完全匹配xxx的 a元素;
A2 ahref="xxx": 选中 同时含有 href(属性值严格等于xxx) + title属性(属性值严格等于yyy)的 a元素;
S3 部分属性值（子串值 属性选择器）
A1 a[href~="xxx"]: 选中 含有 href属性 + 属性值中包含xxx即可的 a元素;
A2 P[lang |="en"]: 选中 含有 lang属性 + 属性值中等于en/ 以en开头的 p元素;
S1 什么时候使用伪类：当希望某些样式，在特定状态下才应用到指定的元素时;
伪类可以对一个元素的不同状态/类型进行区分
S2 结构伪类
A1 :first-child伪类: 见MDN的 :first-child;
类似的还有
:last-child伪类;
:first-of-type伪类 / :last-of-type伪类
A2 :nth-child(num)
P:nth-child(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，不管元素类型是不是P;
thead th:nth-child(-n+2),表示的含义是选中 th其父元素thead下，其2-n(n≥0)数位的元素
:nth-of-type(num)
P:nth-of-type(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，数位1是从 元素类型为P的元素开始计数的
A3 :nth-last-child / :nth-of-type 同上，不过是从反向开始计数而已
S3 其他伪类
A1 :target伪类
A2 :empty伪类
A3 :not伪类 见MDN的 :not;
A4 链接伪类的推荐顺序是 link - visited - focus - hover - active
三 参考文档 1 CSS权威指南;
2 MDN的 简单选择器;
3 MDN的 属性选择器;
4 MDN的 伪类和伪元素选择器;
5 MDN的 组合器和选择器组;
6 CSS 派生选择器;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116819.html
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
阅读 2949·2023-04-26 02:29
阅读 566·2019-08-30 15:54
阅读 1640·2019-08-29 13:13
阅读 536·2019-08-28 17:51
阅读 2699·2019-08-26 13:58
阅读 1515·2019-08-26 13:27
阅读 2805·2019-08-26 11:39
阅读 3423·2019-08-26 10:46
