韩旭 超详细的CSS选择器整理
AI 概述
一、常用的选择器1.元素选择器2.类选择器(class 选择器)3.id 选择器4.通配符选择器二、群组选择器三、关系选择器1. 后代选择器2. 子代选择器3.相邻兄弟选择器4. 通用兄弟选择器5.案例四、属性选择器五、伪类选择器1.常用的伪类选择器2.否定伪类3.元素的伪类六、伪元素选择器结语
前端 CSS 选择器虽然不...
目录
文章目录隐藏
前端 CSS 选择器虽然不难，但是随着时间的推移，能够完整的说出来，我想没有几个，所以今天细细的总结一下，可以说是超详细的一版，不仅是自己的一个学习总结，也为需要的人提供参考。
一、常用的选择器
1.元素选择器
语法 : 标签名{}
作用 : 选中对应标签中的内容。
例:p{} , div{} , span{} , ol{} , ul{} ……
2.类选择器(class 选择器)
语法 : .class 属性值{}
作用 : 选中对应 class 属性值的元素。
例子 : <p class=”A”>段落 1</p>
<p class=”B”>段落 1</p>
<p class=”C”>段落 1</p>
.A{} , .B{} , .C{} ……
注意：class 里面的属性值不能以数字开头，如果以符号开头，只能是’_’或者’-‘这两个符号，其他的符号不可以，一个 class 里面可以有多个属性值。
3.id 选择器
语法 : #id 属性值{}
作用 : 选中对应 id 属性值的元素。
例子 :
<p id="A">段落 1</p>
<p id="B">段落 1</p>
<p id="C">段落 1</p>
#A{} , #B{} , #C{} ......
注意：id 的属性值只能给 1 个,可以重复利用,不能以数字开头。
4.通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距。
例子 :
*{
margin: 0; //外间距
padding: 0; //内间距
}
二、群组选择器
语法 : 选择器 1,选择器 2,选择器 3...{}
作用 : 同时选中对应选择器的元素。
例子 :
<style>
/* 用群组的目的是为了简化代码量 */
div,p,h3,.li2{
font-size: 30px;
}
div,.li2,.text3{
color: red;
}
p{
color: blue;
}
h3{
color: pink;
}
</style>
<div>盒子 1</div>
<p>段落 1</p>
<p>段落 2</p>
<h3>文本标题 3</h3>
<h3 class="text3">文本标题 3</h3>
<ol>
<li>有序列表</li>
<li class="li2">有序列表</li>
<li>有序列表</li>
</ol>
效果如下：
三、关系选择器
1. 后代选择器
后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素。
例子：
<style>
/* 后代选择器(包含选择器),选择到的是 box 下面的所有后代 p */
.box p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
效果如下：
<style>
/* 选择到的是 box 的后代 div 的后代 p */
.box div p {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
效果如下：
2. 子代选择器
父元素直接包含子元素，子元素直接被父元素包含。
<style>
/*子选择器选中的是.box 下所有的儿子 p
.box>p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
效果如下：
<style>
/*子选择器选中的是.box 下所有儿子 div 中的儿子 p
.box>div>p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
效果如下：
3.相邻兄弟选择器
<p>000</p>
<div class="box">盒子 1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>44444</p>
</div>
<p>5555</p>
以上面的代码为例，除了内容为’44444’的 p 标签外，其余的所有元素均为兄弟元素，而相邻兄弟元素就是紧挨着的两个标签。
给上述代码加上内部修饰样式：
<style>
/* 相邻兄弟,会选择到 box 后面紧挨着的 p,那么就是内容为 111 的 p 标签 */
.box+p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
效果如下：
4. 通用兄弟选择器
<p>000</p>
<div class="box">盒子 1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>44444</p>
</div>
<p>5555</p>
同样以上面的代码为例，添加一段内部修饰样式：
<style>
/*通用兄弟选择器,会选择到.box 后面所有的兄弟 p,那么就是除了内容为'44444'以外的所有 p*/
.box~p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
效果如下：
5.案例
以上面的代码为例，现在有一个需求，想要内容为’5555’的标签自己变换样式，其余的都不变,我们先来分析一下，这个标签很明显，单独选择相邻兄弟元素或者通用兄弟元素都是无法实现只改变 p5 这个标签，先看看 p5 标签在 .box 后面,而 .box 后面只有一个 div 标签,刚好 p5 就是这个 div 的兄弟元素，代码如下：
<style>
.box~div+p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
效果如下：
四、属性选择器
属性选择器一共有 7 种写法
- 某某[属性]
- 某某[属性=属性值]
- 某某[属性^=属性值]
- 某某[属性$=属性值]
- 某某[属性*=属性值]
- 某某[属性~=属性值]
- 某某[属性|=属性值]
举个小案例:
<style>
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
margin: 20px auto;
}
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
</style>
<div class="demo">
<a rel="nofollow" href="https://mybj123.com/links?url=aHR0cDovL3d3dy5teWJqMTIzLmNvbQ==" target="_blank" class=" links item first" id="first" title="link">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
<a href="mailto:aa@hotmail" class="links item" title="website link" lang="zh">6</a>
<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
<a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
<a href="abcdef.doc" class="links item" title="http://www.mybj123.com">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</div>
以上代码的默认样式是这样的:
现在在 style 标签内写入 1~7 个方法的修饰样式：
<style>
/* 属性选择器的权重是 0010 */
/* 写法 1 某某[属性] 选择到 a 标签且有 title 属性的变*/
/* a[title]{
background: yellow;
} */
/* a[lang][target]{
background: yellow;
} */
/*重点: 写法 2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
/* a[lang="zh"]{
background: yellow;
} */
/* a[title="this is a link"]{
background: yellow;
} */
/* class 名字是 item 的,且有属性 lang 且属性值必须一模一样是 zh-cn 的 */
/* .item[lang="zh-cn"]{
background: yellow;
} */
/* id 是 last 且有 title 属性且有 class 属性,属性值只能是 links 的变 */
/* #last[title][class="links"]{
background: yellow;
} */
/* 写法 3: 某某[属性^=属性值] */
/* a 标签有 class 属性且属性值是 li 开头的 */
/* a[class^=" li"]{
background-color: yellow;
} */
/* a[title^="this"][lang]{
background-color: yellow;
} */
/* 写法 4 某某[属性$=属性值] */
/* a 标签有 class 属性且属性值结尾是 t 的变 */
/* a[class$="t"]{
background-color: yellow;
} */
/* a[href$=".pdf"]{
background-color: yellow;
}
a[href$=".doc"]{
background-color: red;
}
a[href$=".png"]{
background-color: green;
} */
/* 写法 5 某某[属性*=属性值] */
/* 选择到 a 标签且有 href 属性且只要有字母 b 就可以 */
/* a[href*="b"]{
background-color: green;
} */
/* 写法 6 某某[属性~=属性值] */
/* 选择到的是 a 标签且有 class 属性,且属性值有完整的 itme 词的变 */
/* a[class~="item"]{
background-color: green;
} */
/* 写法 7 某某[属性|=属性值] */
/* 这个是选择到有 a 标签,且有属性 title,且属性值只有 1 个是 link 的或者属性值有多个但是得是 link-开头的变 */
a[title|="link"]{
background-color: green;
}
</style>
现在默认展示的是第七个方法(需要看其他 6 种方法的同学自行打开其余 6 种方法的注释)，现在选择到的是有 a 标签，且有属性 title，且属性值只有 1 个是 link 的或者属性值有多个，但是得是link-开头的变，那么就是第一，第三和第五个，打开页面看看，效果如下：
五、伪类选择器
1.常用的伪类选择器
:first-child第一个子元素:last-child最后一个子元素:nth-child()选中第 n 个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)：
- n 第 n 个 n 的范围 0 到正无穷（全选）
- even 或 2n 选中偶数位的元素
- odd 或 2n+1 选中奇数位得到元素
以 child 结尾的是在所有元素中选择。
:first-of-type第一个子元素:last-of-type最后一个子元素:nth-of-type()选中第 n 个元素
以 type 结尾的是在相同元素中选择。
<style>
/* box 下面的第 1 个子元素变,也就是 p1 变 */
.box :first-child{
border: 2px solid blue;
}
/* box 下面的第 1 个子元素是 li 的时候变*/
.box li:first-child{
border: 2px solid blue;
}
.box p:first-child{
border: 2px solid blue;
}
/* box 下面的最后 1 个子元素变,也就是 p6 变 */
.box :last-child{
border: 2px solid blue;
}
.box p:last-child{
border: 2px solid blue;
}
/* box 下面的第 3 个子元素变 */
.box :nth-child(3){
border: 2px solid blue;
}
.box li:nth-child(3){
border: 2px solid blue;
}
/* box 下面的第 7 个子元素是 p 的变 */
.box p:nth-child(7){
border: 2px solid blue;
}
.box p:nth-child(9){
border: 2px solid blue;
}
/* n 是从 0 开始的数列 把 n=0 开始往 n+3 里面计算就可 */
/* n=0 n+3=3 */
/* n=1 n+3=4 */
/* n=2 n+3=5... 结果就是第 3,4,5,6,7,8,9...变*/
.box :nth-child(n+3){
border: 2px solid blue;
}
/* box 下面的第 3,4,5,6,7,8,9...是 li 的时候变 */
.box li:nth-child(n+3){
border: 2px solid blue;
}
/* 表示的意思是 box 里面的第 3,2,1 个变 */
.box :nth-child(-n+3){
border: 2px solid blue;
}
/* 表示的意思是 box 里面的第 3,2,1 个是 p 变 */
.box p:nth-child(-n+3){
border: 2px solid blue;
}
/* 表示的意思是 box 里面的第 2,4,6,8,10,12.... 偶数的 */
.box :nth-child(2n){
border: 2px solid blue;
}
.box :first-child{
border: 2px solid red;
}
/* 表示的意思是 box 里面的第 2,4,6,8,10,12....是 li 的变 偶数的 */
.box li:nth-child(2n){
border: 2px solid blue;
}
/* 2n 和 even 都是偶数的意思 */
.box li:nth-child(even){
border: 2px solid blue;
}
/* 表示的意思是 box 里面的第 1,3,5,7,9...个变也就是奇数变 */
.box :nth-child(2n+1){
border: 2px solid blue;
}
.box :nth-child(odd){
border: 2px solid blue;
}
/* 5 7 9 .... */
.box :nth-child(2n+5){
border: 2px solid blue;
}
.box :nth-last-child(2n){
border: 2px solid blue;
}
.box :only-child{
border: 2px solid blue;
}
</style>
<ul class="box">
<p>1111</p>
<p>222</p>
<li>无序列表的 li1</li>
<p>33333</p>
<li>无序列表的 li2</li>
<li>无序列表的 li3</li>
<p>44444</p>
<li>无序列表的 li4</li>
<p>555</p>
<li>无序列表的 li5</li>
<p>666</p>
</ul>
效果如下：
<style>
/* box 下面的第 1 个子元素变,从结构看第 1 个是 p,所以 p1 变了 */
.box :first-child{
border: 2px solid blue;
}
/* box 下面的同类型的第 1 个变,从目前的结构上看 ul 下面有 2 个类型,1 个是 li 和 1 个是 p 所以 li 类型和 p 类型的第 1 个都变了 */
.box :first-of-type{
border: 2px solid blue;
}
/* -child 和-type 的区别 child 只看某个父元素下面的子元素 -type 看的某父元素下面的同类型的子元素 child 就是问班级有多少人 type 就是问班级有多少女生和多少男生 */
.box :last-of-type{
border: 2px solid blue;
}
.box p:last-of-type{
border: 2px solid blue;
}
/* box 里面的 p 的第 2 个 */
.box p:nth-of-type(6){
border: 2px solid blue;
}
/* 选择 box 中 li 里面的第偶数个 */
.box li:nth-of-type(2n){
border: 2px solid blue;
}
.box li:nth-of-type(2n+1){
border: 2px solid blue;
}
.box li:nth-last-of-type(2){
border: 2px solid blue;
}
/* box 里面的只有 1 个子元素是 li 的时候变 */
.box li:only-child{
border: 2px solid blue;
}
/* box 里面的 li 只有 1 个的时候变 */
.box li:only-of-type{
border: 2px solid blue;
}
.box :nth-last-child(2){
border: 3px solid blue;
}
.box :nth-last-of-type(2){
border: 3px solid blue;
}
</style>
<ul class="box">
<p>1111</p>
<p>222</p>
<li>无序列表的 li1</li>
<p>33333</p>
<li>无序列表的 li2</li>
<li>无序列表的 li3</li>
<p>44444</p>
<li>无序列表的 li4</li>
<p>555</p>
<li>无序列表的 li5</li>
<p>666</p>
</ul>
效果如下：
2.否定伪类
:not() 将符号条件的元素去除
3.元素的伪类
:link表示未访问过的 a 标签:visited表示访问过的 a 标签
以上两个伪类是超链接所独有的。
由于隐私的问题，所以 :visited 这个伪类只能修改链接的颜色。
以下两个伪类是所有标签都可以使用：
:hover鼠标移入后元素的状态:active鼠标点击后，元素的状态
六、伪元素选择器
同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态
常见的几个伪元素：
::first-letter表示第一个字母::first-line表示第一行::selection表示选中的元素::before元素开始的位置前::after元素结束的位置后
befor和after必须配合contend一起使用(before，after所写的内容无法选中且永远在最前和最后)
结语
以上就是关于 css 所有选择器的总结，而 css 选择器中最常用的 css 选择器是标签选择器、.类选择器、ID 选择器、属性选择器、伪类选择器。
以上关于超详细的CSS选择器整理的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 超详细的CSS选择器整理
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 超详细的CSS选择器整理
