CSS选择器总结

1. CSS选择器分类：
   1）简单选择器：针对元素特征进行选择，具体包括如下几种：
       a）类型选择器，如 p {...}
       b）全体选择器，如 * {...}
       c）id选择器，如 #idName {...}
       d）class选择器，如 .className {...}
       e）属性选择器，如 [attribute = value]
       其中 ~= 和 |= 要求value必须是单个单独完整的单词，|=也支持使用"-"分隔，
       *= 、^=、$= 可以是拼接的单词，只要包含value值即可

// 选择带有target属性的所有元素
[target] {...}
// 选择 target="_blank" 的所有元素。
[target=_blank] {...}
// 选择 title 属性包含单词 "flower" 的所有元素。
[title~=flower] {...}
// 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
a[src*="abc"] {...}
// 选择 lang 属性值以 "en" 开头的所有元素。
[lang|=en] {...}
// 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[src^="https"] {...}
// 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
a[src$=".pdf"] {...}

以 ~= 和 *= 为例，效果如下：

image.png
image.png

    f）伪类选择器，根据功能的不同介绍如下三种伪类选择器：
        ● 树结构关系伪类选择器：

// 树的根元素
:root
// 没有子节点的元素，包括文本节点。
:empty
// 选择父元素的第n个子元素
:nth-child(n)
// 选择父元素的第n个子元素，从最后一个子元素开始计数
:nth-last-child(n)
// 选择父元素的唯一个子元素
:only-child
// 选择第一个或者最后一个子元素
:first-child
:last-child
// type系列同理，如:first-of-type、:nth-of-type(n)

树结构关系伪类选择器效果如下图所示：

image.png

        ● 链接与行为伪类选择器：

// 选择所有未被访问的链接。
a:link
// 选择所有已被访问的链接。
a:visited
// 选择活动链接。
a:active
// 选择鼠标指针位于其上的链接。
a:hover
// 选择获得焦点的 input 元素。
input:focus
// 选择当前活动的 #news 元素。
#news:target

        ● 逻辑伪类选择器：

// 选择非 <p> 元素的每个元素。
:not(p)

image.png

2）复合选择器：连续写在一起的简单选择器的组合，表示且的关系。

// 选中class名为className的p元素
p.className

3）复杂选择器：使用"空格"、">"、"~"、"+"、"||"符号链接的复合选择器，根据父元素或者前序元素检查单个元素；

// "空格"：选中空格前的元素的后代节点中符合空格后的规则的元素
div #bbb {
  background: red;
}

image.png

//  ">" ：选中子代元素，与"空格"的区别是空格既可以选择子代也可以选择子代的子代，而">"只能是子元素
div > .aaa {
  background: red;
}

image.png
image.png

// "~"：选中所有符合条件的后继节点，后继节点跟当前节点具有相同的父元素
p#first ~ p{
  background: red;
}

image.png

// "+"：直接后继，即当前节点的nextSibling，如果存在，只选中一个元素

image.png

// "||"：列选择器，选中列中符合条件的单元格

4）选择器列表：用逗号分隔的复杂选择器列表，表示或的关系。
5）选择器优先级：
    第一优先级： 无连接符号
    第二优先级： "空格"、"~"、"+"、">"、"||"
    第三优先级：","
优先级三元组(a,b,c)
其中id选择器数据为a，伪类选择器和class选择器数目为b，伪元素选择器和标签选择器为c，"*"不影响优先级。优先级计算公式如下所示，其中base白哦是一个足够大的数字。

specificity = base * base * a + base * b + c

6）伪元素，其中:before和:after表示从无到有创建一个新的元素，他们中的content不能缺少，即使没有内容也要设置成""，这两个伪元素非常方便用来生成装饰性元素。

// 选择每个 <p> 元素的首字母。
p::first-letter
// 选择每个 <p> 元素的首行。
p::first-line
// 在每个 <p> 元素的内容之前插入内容。
p::before
// 在每个 <p> 元素的内容之后插入内容。
p::after

image.png