本文详细介绍了CSS中的各种选择器，包括ID选择器、通用选择器、标签选择器等，并讲解了它们的使用方法及注意事项。
CSS常见选择器
一、CSS简介
1.css概念
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
2.css语法
css注释
/*这是注释的写法，随便写，不影响css代码*/
二、CSS选择器介绍
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
1.CSS选择器简介
每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
2.CSS选择器注意事项
由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，
因此我们在对元素的选择中一定要注意书写顺序，如：
a:visited {color: #00FF00; text-decoration: none}
a:hover {color: #FF00FF; text-decoration: underline}
采用这样的书写顺序，无论链接有没有被访问过，只要当鼠标移到链接上，链接都会变成蓝色并有下划线。
但是，如果采用下面的书写顺序：
a:hover {color: #FF00FF; text-decoration: underline}
a:visited {color: #00FF00; text-decoration: none}
如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。
三、CSS常见选择器
1.id选择器
#id名 { CSS样式 }
#box {
width:300px;
height: 50px;
backgroumd-color: #fff;
}
<div id="box"></div>
id是唯一的，不能重复
尽量不要用标签名做id名
2.通用选择器
给网页元素做一些通用的样式，margin:0和padding:0用来清除自带网页的内外间距。
*{
margin:0;
padding:0;
};
3.标签选择器
元素名{ CSS样式 }
div {
color: #fff;
};
4.类选择器
类选择器也叫class选择器
.class名 { CSS样式 };
.box {
width:300px;
height: 50px;
backgroumd-color: #fff;
}
<div class="box"></div>
一个元素可以有多个class值
尽量不要用标签名做class名
5.属性选择器
1.[attr]
选中有attr属性的元素
[title]:{ color:#fff; }
<div title="name">111<div>
2.[attr=val]
选中attr属性值巧合等于val的元素
[title="name"]:{ color:#fff; }
<div title="name">111<div>
3.[attr*=val]
选中attr属性值包含单词val的元素
/* title属性值包含单词one的元素 */
[title*="one"] { color: #ff0000; }
<div title="one">内容1</div>
<p title="aaaone">内容2</p>
<span title="one-two">内容3</span>
4.[attr^=val]
选中attr属性值以val开头的元素
/* title属性值以单词one开头的元素 */
[title^="one"] { color: #ff0000; }
<div title="one">内容1</div>
<span title="one-two">内容2</span>
<p title="one two">内容3/p>
5.[attr~=val]
选中attr属性值包含单词val的元素（单词之间必须用空格隔开）
/* title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开） */
/* 效果类似于类选择器 */
[title~="one"] { color: #ff0000; }
<div title="one">内容1</div>
<p title="one two">内容2</p>
6.[attr$=val]
选中attr属性值以单词val结尾的元素
/* title属性值以单词one结尾的元素 */
[title$="one"] { color: #ff0000; }
<div title="two-one">内容1</div>
<p title="two one">内容2</p>
6.后代选择器
选择指定元素下的子元素，包括直接和间接子元素，使用空格进行隔开。
/* 选择div下所有span元素 */
div span { color: #ff0000; }
<div>
<span>文字内容</span>
<p>
<span>文字内容</span>
</p>
</div>
7.子代选择器
选中指定元素下的直接子元素 使用
选中元素后面的兄弟元素——不要前面的兄弟，也不要子代
/* 选择div元素下的直接span元素 */
div > span { color: #ff0000; }
<div>
<span>文字内容1</span>
</div>
8.兄弟选择器
+ 指的是相邻的兄弟选择器
选中元素后面紧挨着的相邻兄弟元素——不要前面的，也不要有间隔的，也就是最多选中1个
p+span { } 选中p元素后面紧挨着的那一个span兄弟元素
~ 指的是元素后面的兄弟元素，不需要紧挨着
选中元素后面的兄弟元素——不要前面的兄弟，也不要子代
p~span { } 选中p元素后面的span兄弟元素
9.交集选择器
如果选择器中有元素的选择器，元素选择器必须放在前面
选择器1 选择器2...{}
2.并集选择器
选中可以同时被多个选择器选中的元素
注意: 多个选择器之间不能有空格，必须紧挨着写！
/* 选中span元素且class值为danger*/
span.danger{color:red;}
/* 选中class值同时具有btn与succ的元素*/
.btn.succ {color: green;}
10.结构性伪类选择器
代码 作用
:nth-child(1) :first-child 选中第1个子元素
:nth-child(必须明确子元素的总个数) 或 :last-child【推荐】 选中最后1个子元素
:nth-child(Xn) 倍数子元素
:nth-child(2n) 或 :nth-child(even) 偶数子元素
:nth-child(2n+1) 或 :nth-child(2n-1) 或 :nth-child(odd) 奇数子元素
:nth-last-child(n) 倒数第n个子元素
/* 选中ol下到第二个孩子 */
ol li:nth-child(2) {
color: red;
}
/* 选择ul下第1个孩子 */
ul li:nth-child(1) {
color: green;
}
ul li:first-child {
border: 1px solid green;
}
/* 选中ul下最后1个孩子 */
ul li:nth-child(5) {
color: blue;
}
ul li:last-child {
border: 1px solid #00f;
}
/* 选中4到倍数 */
ol li:nth-child(4n) {
color: purple;
}
/* 选中所有的偶数,把背景色改成淡黄色lightyellow */
/* ol li:nth-child(2n) {
background-color: lightyellow;
} */
ol li:only-child(even) {
background-color: lightyellow;
}
/* 选中所有的奇数,把背景色改成淡黄色lightblue */
/* ol li:nth-child(2n+1) {
background-color: lightblue;
} */
/* ol li:nth-child(2n-1) {
background-color: lightblue;
} */
ol li:nth-child(odd) {
background-color: lightblue;
}
ol li:nth-last-child(2) {
color: aqua;
}
11.元素伪类选择器
a标签常用伪类
标签 作用
:hover{ } 鼠标悬停在元素上方时”的状态
:active{ } 选中”元素被激活时”的状态(鼠标按住元素不松开)
:link{ } 选中”超链接未被访问过”的状态
:visited{ } 选中”超链接已经被访问过”的状态
/* :hover选中元素悬停时的状态 鼠标停在上面不动 */
.box:hover {
background-color: red;
}
/* :active选中元素激活时的状态 鼠标点击 */
.box:active {
background-color: blue;
}
/* :link选中超链接未被访问过的状态 */
a:link {
color: gray;
}
/* :visited选中超链接已被访问过的状态 */
a:visited {
color:green;
}
a:hover { /* 超链接的悬停状态 */
color: orange;
}
a:active { /* 超链接的激活状态 */
color: pink;
}
/* 如果想要超链接的4个伪类都生效,必须按照上面的顺序写! */
注意: 超链接的4个伪类有顺序： :link -> :visited -> :hover -> :active
如果没有按照这个顺序，有的伪类会不生效
input常用的伪类
:focus{ } 选中”输入框获得焦点时”的状态
/* 选中输入框获得焦点(光标)时的状态 */
input:focus {
background-color: yellow;
}
12.否定伪类选择器
:not() 将符号条件的元素去除
13.伪元素选择器（常用两种）
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用 常常用于浮动导致父元素高度坍塌
/*利用伪元素在父元素最后生成一个假孩子清除影响*/
.clearfix::after{ /* 在指定元素的最后生成一个假孩子 */
content: ''; /* 内容是空白的,宽高为0 */
display: block; /* 块级元素才可以使用clear属性 */
clear: both; /* 清除前面所有元素浮动造成的不支撑影响 */
}
四、选择器优先级
1.不同选择器不同样式
当多个不同的选择器选中同一个元素，发生冲突时，如果设置了不同的样式会叠加效果同时生效
p {color:red;}
.txt {background-color: yellow;}
<div>
<p class="txt">测试文字</p>
</div>
2.相同选择器相同样式
相同的选择器，会采用顺序读取的原则，后来的会覆盖之前的
但前提：要渲染的样式相同，值不同
.txt {background-color: yellow;}
.txt {background-color: green;}
<div>
<p class="txt">测试文字</p> // green
</div>
3.最近的祖先样式要比其他祖先样式优先级高
在CSS中，有一些属性是具有继承特性的，也就是父元素的CSS属性会传递到子元素上
使用的就是就近原则，哪个近，就应用哪个样式
<div style="color: green;">
<div style="color: blue;">
<div>测试文字</div> // blue
</div>
</div>
4.指定样式大于继承样式
<div style="color: pink;">
<span style="color:gold">测试文字4</span> // gold
</div>
5.选择器不同权值（重点）
原则:权值大的优先渲染
!important>行内样式>ID>(类选择器=伪类选择器)>标签名选择器>通用选择器>继承
权值会累加，但不会越级！
比如11个类选择器，值不是10*11=110,而是99.9不会越级到下一级
记忆诀窍：选择器控制范围越大的，优先级越低
👨💻博主Python老吕说：如果您觉得本文有帮助，辛苦您🙏帮忙点赞、收藏、评论，您的举手之劳将对我提供了无限的写作动力！🤞
print('Hello,World!') # 每日一码，用Python跟世界说Hello,World!
🔥精品付费专栏:《Python全栈工程师》、《跟老吕学MySQL》、《Python游戏开发实战讲解》
🌞精品免费专栏:《Python全栈工程师·附录资料》、《Pillow库·附录资料》、《Pygame·附录资料》、《Tkinter·附录资料》、《Django·附录资料》、《NumPy·附录资料》、《Pandas·附录资料》、《Matplotlib·附录资料》、《Python爬虫·附录资料》
🌐前端免费专栏:《HTML》、《CSS》、《JavaScript》、《Vue》
💻后端免费专栏:《C语言》、《C++语言》、《Java语言》、《R语言》、《Ruby语言》、《PHP语言》、《Go语言》、《C#语言》、《Swift语言》、《跟老吕学Python编程·附录资料》
💾数据库免费专栏:《Oracle》、《MYSQL》、《SQL》、《PostgreSQL》、《MongoDB》
扫一扫
1882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
