CSS 选择器

CSS 选择器

上一篇讲了 CSS 的属性，我们可以通过 CSS 的属性修饰 HTML 标签来达到某些效果，理论上有 CSS 的属性就可以了。但是为了提高 CSS 对标签修饰的效率，我们需要引用 CSS 选择器。比如，当页面上有多个列表，这些列表及列表的元素之间有相似之处，也有不同之处。如果你不使用 CSS 选择器的话，可以对每个列表及元素，使用单独的 CSS 属性来修饰，但是如果这样做，最后会发现有很多重复代码，代码也显得比较乱且臃肿。这个时候，你会想到将列表的相似部分抽象出来，进行统一修饰。这个时候就可以让 CSS 选择器来实现。这样一来，代码就会更清晰、简洁。这就是使用 CSS 选择器的重要原因。

1. CSS 选择器有哪些？

按照使用类型来分，CSS 选择器一共有 10类，分别是：

第 1 类：基本选择器

选择器类型 示例 说明
通用选择器 * 匹配所有元素
标签选择器 p 匹配所有使用 p 标签的元素
ID 选择器 #footer 匹配所有 id 属性为 footer 的元素
类选择器 .info 匹配所有 class 属性为 info 的元素

第 2 类：层次选择器

不管是哪种选择器，选择器之间是可以进行组合使用的，而这些组合关系有四种：

选择器类型 示例 说明
后代选择器 div .left 匹配 div 标签下 class 属性为 left 的所有元素，无论第几层
子选择器 div>.left 匹配 div 标签下第一层子元素中的 class 属性为 left 的元素
相邻兄弟选择器 h4+p 匹配 h4 标签相邻出现所有的 p 标签，且 h4 和 p 都有相同的父元素
通用兄弟选择器 p~ul 匹配 p 标签后面出现的所有 ul 标签，且 p 和 ul 都有相同的父元素
交集选择器 div.left 匹配 div 标签后面属性为 left 的元素，两个元素间没有空格
并集选择器 div, .left, p 匹配 div 标签，属性为 left 的元素以及 p 标签，元素间用逗号分隔

后代选择器与子选择器区的区别是：后代选择器会作用于父元素下所有的子元素，不管该元素是父元素的第几层。而子选择器，只会去父元素的第一层子元素中进行匹配。

后代选择器与通用兄弟选择器的区别是：后代选择器是匹配所有 “子元素”，而通用兄弟选择器是匹配元素后面所有 “同级元素” ，且两个元素有相同的父元素。

相邻兄弟选择器，需要注意的是从 + 号右边的元素才开始匹配。比如：li+li，所以第一个 li 是不匹配的。

通用兄弟选择器与相邻兄弟选择器的区别是：通用兄弟选择器忽略 “相邻” 这个规则。

另外，子选择器两个元素之间不是严格的 “父子关系”，子元素的定义则不会生效。


第 3 类：伪类选择器

选择器类型 示例 说明
链接伪类选择器 a:link 匹配所有 a 元素，定义匹配元素的超链接未被访问过的属性
链接伪类选择器 a:visited 匹配所有 a 元素，定义匹配元素的超链接已被访问过的属性
用户行为伪类选择器 a:active 匹配所有 a 元素，定义匹配元素被激活时的属性
用户行为伪类选择器 a:hover 匹配所有 a 元素，定义匹配元素当用户鼠标停留在元素 E 上的属性
用户行为伪类选择器 input:focus 匹配所有 input 元素，定义匹配元素当 E 元素获得焦点时的属性
目标伪类选择器 p:target 匹配所有 a 元素，定义匹配元素被相关 URL 指向内容的属性
选中状态伪类选择器 input:checked 匹配所有 input 元素，定义表单元素（通常是单选或复选按钮）被选中时的属性
启用状态伪类选择器 input:enabled 匹配所有 input 元素，定义表单元素启用时的属性
不可用状态伪类选择器 input:disabled 匹配所有 input 元素，定义表单元素禁用时的属性
结构伪类选择器 E:first-child 匹配所有 E 元素，并找到其父元素，设置所有父元素的第一个元素的属性
结构伪类选择器 E:last-child 匹配所有 E 元素，并找到其父元素，设置所有父元素的最后一个元素的属性
结构伪类选择器 E:root 匹配元素 E 的根元素属性。在 HTML 文档中，根元素始终是 <html>，此时该选择器与 <html> 类型选择器匹配的内容相同
结构伪类选择器 E:nth-child(n) 匹配所有 E 元素，并找到其父元素，设置父元素的第 n 个元素的属性
结构伪类选择器 E:nth-last-child(n) 匹配所有 E 元素，并找到其父元素，设置父元素的倒数第 n 个元素的属性
结构伪类选择器 E:nth-of-type(n) 匹配所有 E 元素，并找到其父元素，设置父元素中同类 E 元素中的第 n 个元素的属性
结构伪类选择器 E:nth-last-of-type(n) 匹配所有 E 元素，并找到其父元素，设置父元素中同类 E 元素中倒数第 n 个元素的属性
结构伪类选择器 E:first-of-type 相当于 E:nth-of-type(1)
结构伪类选择器 E:last-of-type 相当于 E:nth-last-of-type(1)
结构伪类选择器 E:only-child 匹配所有 E 元素，并找到其父元素中只有一个子元素的父元素，设置该子 元素（E 元素）的属性
结构伪类选择器 E:only-of-type 匹配所有 E 元素，并找到其父元素中唯一类型的子元素，设置该子元素的属性
结构伪类选择器 E:empty 匹配所有 E 元素，并找到这些元素中没有子元素的 E 元素，设置该 E 元素的属性
否定伪类选择器 :not(E)
E:not(F)		 :not(E) 匹配所有非 E 元素，设置这些元素的属性
E:not(F) 在 E 元素中，找到所有非 F 的元素(含 E 在内），并设置这些元素的属性

第 4 类：伪元素选择器

伪元素特性：

  • 它不存在于文档中，所以 JS 无法操作它
  • 它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如 :first-letter 代表第一个字母；因此当伪元素被点击的时候触发的是主元素的 click 事件
  • 块级元素才能有 :before, :after，譬如 img 就不能设置，亦即某些元素是没有 :before, :after 的，只要知道一般的块级元素都可以用就行了

CSS3 中，为了与伪类区分，伪元素前应该使用两个冒号，即 :hover 伪类，::before 伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

属性 描述
:first-letter 向文本的第一个字母添加特殊样式
:first-line 向文本的首行添加特殊样式
:before 在元素之前添加内容
:after 在元素之后添加内容

第 5 类：属性选择器

属性 描述
[attribute] 匹配含有 attribute 属性的元素
[attribute=value] 匹配含有 attribute 属性，且属性值等于 "value" 的元素
[attribute~=value] 匹配含有 attribute 属性，且属性值中含有 “value" 的元素
[attribute\=value] 匹配含有 attribute 属性，且属性值以 "value" 开头的元素，该值必须是整个单词
[attribute^=value] 匹配含有 attribute 属性，且属性值以 "value" 开头的元素，不需要是整个单词
[attribute$=value] 匹配含有 attribute 属性，且属性值以 "value" 结尾的元素，不需要是整个单词
[attribute*=value] 匹配含有 attribute 属性，且属性值包含 "value" 的元素，不论其所在位置

需要注意的是，value 在元素中的属性值都是 “字符串”，需要用双引号引起来，但在写选择器的时候，却不需要双引用。



2. CSS 选择器的优先级

上面这些不同类型的选择器优先级规则如下：

  1. 内联 (行内) 样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

  2. 如果遇到同一级的选择器，那么：最近的祖先样式比其他祖先样式优先级高。如：

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div>
</div>

另外，"直接（行内）样式"比"祖先样式"优先级高。如：

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
    <div class="son" style="color: blue"></div>
</div>
  1. 属性后插有 !important 的属性拥有最高优先级。
p {
    background: red !important;
}
.father .son {
    background: blue;
}

<div class="father">
    <p class="son"></p>
</div>
  1. 选择器组合时的优先级判断，通常我们用1表示标签选择器的优先级，10 表示类选择器的优先级，100 标示 ID 选择器的优先级。比如：
.polaris #xxx {color: blue};
.polaris span {color: red};

.polaris span {color:red;} 的选择器优先级是 10 + 1 也就是11，而 .polaris #xxx 的优先级是110。如果某元素受到两种选择器的影响，那么最终元素会被优先级高的选择器修饰。



3. 如何提升 CSS 选择器性能？

  1. 避免使用通用选择器

  2. 避免使用标签或类选择器来限制 ID 选择器

// 不好的写法
button#backButton {…}
.menu-left#newMenuIcon {…}

// 好的写法
#backButton {…}
#newMenuIcon {…}

  1. 避免使用标签选择器来限制类选择器

  2. 避免使用多层标签选择器，使用类选择器替换，减少 CSS 查找

  3. 避免使用子选择器

  4. 使用继承

4. 简洁、高效的 CSS

  1. 不要在ID选择器前使用标签名，ID 选择器是唯一的，加上标签名反而增加不必要的匹配

  2. 不要在类选择器前使用标签名，除非你在不同标签下定义了同名的类选择器

  3. 尽量少使用层级关系，如果要使用层级关系尽量使用类选择器表示


以上参考

  1. https://www.w3school.com.cn/cssref/css_selectors.asp
  2. https://www.w3cschool.cn/css3/css3-selector.html
  3. https://www.w3cschool.cn/css/css-selector.html
  4. https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors
  5. http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
  6. https://www.runoob.com/w3cnote/css-style-priority.html
posted @ 2020-10-31 22:42  介甫  阅读(106)  评论(0)  编辑  收藏  举报