CSS3选择器（选择符）⽰例详解
⽂章⽬录
前⾔
要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。
HTML页⾯中的元素就是通过CSS选择器进⾏样式控制的。该⽂章可以使您对CSS选择器有整体的，具体的认识，您的点赞，评论，和关注是对作者的莫⼤⿎励。
⼀简单选择符
h1 {color: gray;} // 元素选择符简单的⼀个元素名称，没有其他装饰符就选中了所有h1元素
h1, h2 {color: gray;} // 组选择符(,) ⼀个逗号隔开⼏个选择器使得每个选择器对应的元素同时被选中
.className {color: gray;} // 类选择符类型名前⾯加'.' 就可选中class属性为对应名称的元素
#myID {color: gray;} // id选择符类型前⾯加'#' 就可选中id属性为对应名称的元素
h1.className{color: gray;} // 选择符是可以拼接使⽤的该⾏意为选择类名为className的h1元素
⼆属性选择符
2.1 简单属性选择符
选择具有某个属性的元素，⽽不管属性的值是什么。
h1[class] {color: silver;} // 该⾏意为选择具有class属性的h1元素⽽不论其元素是什么
2.2 根据精准的属性值选择
选择属性为特定值的元素，实现的实质为进⾏字符串匹配，即当含有多个class的情况下，必须选择器中精准选中所有类名，顺序与空格都需完全⼀致。
h1[class="className1 className2"] {...}
<h1 class="className1 className2"></h1> // 选中
<h1 class="className2 className1"></h1> // 不被选中
<h1 class="className1 className2 className3"></h1> // 不被选中
2.2 属性值模糊选中
[foo|="bar"]：选中元素具有foo属性且该属性值以bar-开头或者仅为bar。
例：<h1 foo="foo-fooName"></h1><h1 foo="foo"></h1>
[foo~="bar"]：选中元素具有foo属性且该属性值是包含bar的⼀组值。
例：<h1 foo="bar aaa bbb"></h1>
[foo*="bar"]：其值包含⼦串bar。
例：<h1 foo="abc abarabc"></h1>
[foo^="bar"]：以其开头。
例：<h1 foo="barabc"></h1>
[foo$="bar"]：以其结尾。
例：<h1 foo="abcbar"></h1>
实践举例：可以声明“btn-small-arrow-active”类，然后使⽤前缀`[class|="btn"]`选中。也可使⽤`[class|="btn"][class*="-arrow"]`选中。
属性选择符a在匹配时是区分⼤⼩写的，我们可以通过声明的⽅式使匹配时忽略⼤⼩写。
例：h1[foo$="bar" i]
三根据⽂档结构选择
⾸先我们要理解DOM⽂档⽗⼦关系，HTML⽂档中的元素是⼀种层次结构，⽂档视图是树状的，⽂档中的元素，要么是另⼀个元素的⽗元素，要么是另⼀个元素的⼦元素，⽽且经常两者兼具。
<html>
<head></head>
<body></body>
</html>
如上，是html的基础结构，其中有三个元素，其中，html元素是head和body的⽗元素，head和body互为兄弟元素，也是html的⼦元素。
⽗⼦元素是祖辈元素和后代元素的特例，即两个元素的位置是直接相连的。如果两个元素直接的层级不连续，则是祖辈和后代的关系，⽽不是⽗⼦关系。
<html>
<head></head>
<body>
<h1>该元素和html元素是祖辈关系和body元素是⽗⼦关系</h1>
</body>
</html>
3.1 后代选择符
样式规则：h1 em {...} // 祖辈元素+空格+后代元素
选中h1中的所有后代em元素。
<h1>
<em></em> // 选中
<span>
<em></em> // 选中
</span>
</h1>
<em></em> // 未选中
3.2 ⼦代连结符
样式规则：h1>em {...}。 // ⽗元素+⼤于号+⼦元素
选中h1中的所有⼦代em元素。
<h1>
<em></em> // 选中
<span>
<em></em> // 未选中
</span>
<h1>
<em></em> // 选中
</h1>
</h1>
<em></em> // 未选中
3.3 紧邻同胞连接符
样式规则：li+li {...}。// 兄弟元素+⼤于号+兄弟元素
<ul>
css选择器分为哪几类
<li></li> // 未选中
<li> // 作为前⼀个li元素的兄弟/紧邻同胞元素选中
<li></li> // 未选中
</li>
<li></li> // 作为前⼀个li元素的兄弟/紧邻同胞元素选中
<span></span>
<li></li> // 未选中
</ul>
3.4 ⼀般同胞连接符
样式规则：li ~li {...}。// 兄弟元素+波折号+兄弟元素
在li后的所有li，且与其处⼀个⽗元素下。符号后的元素于符号前的元素具有同⼀个⽗元素，且位置在前⾯的元素之后。
<ul>
<li></li> // 未选中
<li></li> // 选中
<span></span>
<li></li> // 选中
</ul>
四伪类选择符
伪类选择符⼜称为“幽灵类”，利⽤这种选择符可以为⽂档中不⼀定真实存在的结构指定样式，或者为某些元素的特定状态赋予幽灵类。伪类选择符也是可拼接串联使⽤的，如a:link:hover {...}，选中所有未
访问过的，⿏标悬浮其上的a标签。
伪类⼤多数是结构上的，例如选择表格的单⾏或双数⾏，或每隔两个的第三个段落。
伪类的格式都是冒号后⾯加单词的格式，可以出现在选择符的任何位置。
伪类始终指代所依附的元素，这⼀点可以通过下⾯的例⼦理解。
#ericmeyer: first-child // 始终指向ericmeyer 含义是ericmeyer元素同时也是其⽗元素的第⼀个⼦元素
#ericmeyer > : first-child // 始终指向#ericmeyer > 含义是ericmeyer元素的第⼀个⼦元素
4.1 结构伪类
:root
根元素，html中为元素
:empty
空元素，⽆⽂本节点也⽆⼦节点。
谨慎使⽤*:empty，因其中img与input元素会被影响。
:only-child
唯⼀⼦元素。
a[href] img:only-child {border: 2px solid black;}
<a href="abc/"><img src="w3.png" alt=""></a>
上例中，为选中a的后代元素img，该img为其直系⽗元素(可能⾮a元素)的唯⼀⼦后代。
如果上述a标签下还有其他⾮img元素，则可以使⽤下述选择符：
:only-of-type
该元素为其⽗元素的唯⼀本类型元素。
:first-child :last-child
该元素为其⽗元素的第⼀个/最后⼀个⼦元素，两个选择符拼接使⽤的效果相当于only-child。
:
first-of-type :last-of-type
该元素为其⽗元素的第⼀个/最后⼀个本类型元素，两个选择符拼接使⽤的效果相当于only-of-type。
:nth-child(n)
选择该元素的⽗元素的第n个⼦元素，:nth-child(1) === :first-child。
实践举例：
偶数⼦代：`nth-child(2n)` `nth-child(even)`
奇数⼦代：`nth-child(2n+1)` `nth-child(2n-1)` `nth-child(odd)`
更复杂的情况，可使参数为an+b的⽅式，n是从0开始递增1的数列，如3n+1为从第⼀个元素开始，装饰每第三个元素。
:nth-last-child(n)：也可加相同参数，只是从后向前数。
li:nth-child(1):nth-last-child(4) ~ li：当列表中有四个li时，选中所有li。
:nth-of-type():nth-of-last-type()：类上。
4.2 动态伪类
在页⾯渲染之后根据页⾯的变化⽽变化。
4.3 超链接伪类
:link：尚未访问的超链接 如果⼀个a元素不包含href属性则不包含
:visited：已访问的超链接
出于隐私设置，:link装饰的是所有访问状态的超链接，⽽:visited只能设置颜⾊和边框颜⾊属性，当使⽤dom查询时，返回的总是未访问状态的链接样式，即⽆法通过样式收集⽤户访问了哪些链接。
4.4 ⽤户操作伪类
:focus：当前获得输⼊焦点的元素。
:hover：⿏标指针放置其上的元素。
:active：由⽤户输⼊激活的元素。(按钮按下时间)
4.5 UI状态伪类
:enabled :disabled :checked :not(:checked) :default :required :optional :valid :invalid
input[required]===input:requited ，因为在元素中含有required属性时，元素的值是必须的，含义对应了required状态伪类。
input:not([required])===input:optional，因为在元素中未含有required属性时，元素的值是可选的，含义对应了optional状态伪类。
:in-range :out-of-range，值在/不在范围内的元素，范围在input元素中使⽤min max属性给出。
:read-write :read-only，可写元素，只读元素，未禁⽤的⾮只读input元素，以及设定了contenteditable属性(该属性使得元素可写)的元素匹配:read-write，其他所有元素匹配:read-only。
4.6 :target伪类
url中存在⽚段标识符，它所指向的⽂档⽚段称为⽬标，⽬标元素对应该伪类。
其中#aa对应html中⼀个值为aa的id，存在该id的元素为⽬标元素。
4.7 :not()
括号中放置简单选择符，简单选择符指没有祖辈，后代关系的选择符。
.class1:not(li)：选择类为class1的元素，但不是li元素。
li:not(.class1)：与上相反。
*:not(thead)>tr>th：选择不在表头中的表头单元格。(该选择符不⼀定放在末尾)该选择符可串联，意为不是前⾯的也不是后⾯的元素。
五伪元素选择符
在⽂档中插⼊虚构的元素，伪类使⽤⼀个冒号，伪元素使⽤两个冒号 。
伪元素只能出现在选择符的最后。⼀个选择符中只能有⼀个伪元素。
::first-letter：装饰⾮⾏内元素的⾸字母。
::first-line：装饰⾸⾏。
::before ::after ：在元素前或后⽣成内容，使⽤content⽣成，可指定样式。
p::first-letter {} // p元素的⾸字母被选中
p::first-line {} // p元素的段落⾸⾏被选中
p::before {
content: "我是要⽣成的⽂本";
color: red; // 我是其他属性
}
个冒号，伪元素使⽤两个冒号 。
伪元素只能出现在选择符的最后。⼀个选择符中只能有⼀个伪元素。
::first-letter：装饰⾮⾏内元素的⾸字母。
::first-line：装饰⾸⾏。
::before ::after ：在元素前或后⽣成内容，使⽤content⽣成，可指定样式。
p::first-letter {} // p元素的⾸字母被选中
p::first-line {} // p元素的段落⾸⾏被选中
p::before {
content: "我是要⽣成的⽂本";
color: red; // 我是其他属性
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。