前言
css选择器有很多，比如类选择器，id选择器，标签选择器等等。的每种用法都不同。虽然很多都能达到同样的效果，但还是有一些更好的选择。
类别、id、标签选择器
这些我就不细说了。类和标签选择器主要用于设置样式。id选择器建议不要在css样式中使用，而是在js操作dom时选择元素。
比如:
div{ background: #fff;}.list { color: red;}$('#li').html('<span>web秀</span>')
element元素
div p 选择 <div> 元素内部的所有 <p> 元素。
P div选择<>全部
CSS选择器那么多，你知道多少？
element >元素
div>p 选择父元素为 <div> 元素的所有 <p> 元素。
div & gtp选择父元素作为
CSS选择器那么多，你知道多少？
元素+元素
div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
紧随其后的Div+p选择
CSS选择器那么多，你知道多少？
[属性]
[target] 选择带有 target 属性所有元素。
[目标]选择具有目标属性的所有元素。
CSS选择器那么多，你知道多少？
[属性=值]
[target=_blank] 选择 target=”_blank” 的所有元素。
[target=_blank]选择目标= ”_ blank & # 8221的所有元素。
CSS选择器那么多，你知道多少？
[属性~ =值]
[title~=title] 选择 title 属性包含单词 “title” 的所有元素。
[title~=title]选择包含单词“标题”的所有元素。
CSS选择器那么多，你知道多少？
[attribute|=value]/[attribute^=value]
[lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。
[lang|=en]将lang属性的值选择为“恩”开头的所有元素。
CSS选择器那么多，你知道多少？
[属性$ =值]
p[src$=”e”] 选择其 src 属性以 “e” 结尾的所有 <p> 元素。
p[src $ = ”e & # 8221]选择其src属性来“e & # 8221所有<>结束；元素。
CSS选择器那么多，你知道多少？
[属性* =值]
p[title*=”abc”] 选择其 title 属性中包含 “abc” 子串的每个 <p> 元素。
p[title * = ”abc & # 8221]选择要包含的标题属性“abc & # 8221每一
CSS选择器那么多，你知道多少？
元素1 ~元素2
p~div 选择前面有 <p> 元素的每个 <div> 元素。
P~div选择前面是<>
CSS选择器那么多，你知道多少？
一个标签伪类选择器
:链接a:链接所有没有访问过的链接(标签的默认样式)。
:访问过a:访问过所有被访问过的链接。
:active a:active点击后没有释放鼠标链接。
:hover a:悬停鼠标指针所在的悬停链接。
:之前/:之后
在元素内容之前插入内容。
div:before{ content: ''; display: block; background: red; width: 30px; height: 10px;}div:after{ content: ''; display: block; background: green; width: 30px; height: 10px;}
CSS选择器那么多，你知道多少？
:第一个孩子
p:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。(注意和:first-of-type做区分)
P:first-child匹配一个父元素的第一个子元素，可以说是结构上的第一个子元素。(注意，它不同于:第一类型)
CSS选择器那么多，你知道多少？
:第一个类型
p:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。(注意和:first-child做区分)
P:first-of-type匹配类型的第一个。类型是什么意思？意思是在冒号前匹配的东西。例如，p:first-of-type表示所有p个元素中的第一个。这里不再局限于第一个子元素，只要是这个类型的第一个元素。当然，这些元素的范围都属于同一个层次，也就是同一代。(注意区别于:第一胎)
CSS选择器那么多，你知道多少？
:最后一个孩子
p:last-child 表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效(注意和:last-of-type做区分)
P:last-child表示其父元素的最后一个子元素，该元素只有是css指定的元素才能生效(注意与:last-of-type有区别)。
CSS选择器那么多，你知道多少？
:最后一个类型
p:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分)
P:last-of-type表示一组同级元素中指定类型的最后一个元素。(注意它与:last-child不同)
CSS选择器那么多，你知道多少？
:独生子女
p:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素
p:only-child选择器在父元素中只选择一个子元素，并且只选择一个子元素。
CSS选择器那么多，你知道多少？
:仅类型的
p:only-of-type 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的
P:only-of-type表示一个元素有许多子元素，并且只有一种类型的子元素是惟一的。
CSS选择器那么多，你知道多少？
:第n个子代(n)
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
p:n-child(2)选择属于其父元素的第二个子元素。元素。
CSS选择器那么多，你知道多少？
:nth-child(odd)或者:nth-child(2n+1) 奇数行、:nth-child(even)或者:nth-child(2n+2) 偶数行
:第n个子(奇数)或:第n子(2n+1)奇数行，:第n子(偶数)或:第n子(2n+2)偶数行。
CSS选择器那么多，你知道多少？
:n-last-child(n)
p::nth-last-child(n) 同上，从最后一个子元素开始计数。
p::n-last-child(n)同上，从最后一个子元素开始计数。
CSS选择器那么多，你知道多少？
:空
p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
P:empty Select each元素(包括文本节点)。
CSS选择器那么多，你知道多少？
:not(选择器)
:not(p) 选择非p元素的每个元素。
:not(p)选择不是p元素的每个元素。
CSS选择器那么多，你知道多少？
输入状态选择器
:focus获取输入元素的焦点
:启用每个已启用的输入元素
:禁用每个禁用的输入元素
:检查每个选定的输入元素
本文来自尔岚投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/574565.html
微信扫一扫 
