CSS选择器

梧桐WuTong2024

已于 2025-01-23 09:45:14 修改

阅读量1k

点赞数 27

文章标签： css 前端

于 2025-01-22 19:25:11 首次发布

本文链接：https://blog.youkuaiyun.com/m0_54251959/article/details/145309489

版权

注意点:
1.元素的 class 属性值不带 . ，但 CSS的类选择器要带
2.class 值是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如：
left-menu，且命名要有意义，做到“见名知意”。
3.一个元素不能写多个 class 属性，下面是错误示例:

<!--该写法错误，元素的属性不能重复，后写的会失效-->
<h1 class="speak" class="big">你好啊</h1>

4.一个元素的 class 属性，可以写多个值，要用空格隔开

ID选择器

#myId {
	background-color: red;
}

注意点：
1.id 属性值:尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大小写。
2.一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
3.一个元素可以同时拥有 id 和 class 属性。

交集选择器（复合选择器）

作用：选中同时符合多个条件的元素。

// 会寻找p标签中类名为myClass，ID名为myId的元素
p.myClass#myId {
	background-color: red;
}

<!--该写法错误，元素的属性不能重复，后写的会失效-->
<h1 class="speak" class="big">你好啊</h1>

4.一个元素的 class 属性，可以写多个值，要用空格隔开，例如:
1.有标签名，标签名必须写在前面。
2.id 选择器、理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
3.交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是 span 元素。
4.用的最多的交集选择器是:元素选择器配合类名选择器，例如:p.beauty。

并集选择器（复合选择器）

作用：选中多个选择器对应的元素，又称:分组选择器。

// 会寻找类名为 myClass1 或类名为 myClass2 或类名为 myClass3 的元素
.myClass1,
.myClass2,
.myClass3 {
	background-color: red;
}

注意点：
1.任何形式的选择器，都可以作为并集选择器的一部分。
2.并集选择器，通常用于集体声明，可以缩小样式表体积。

后代选择器

作用：选中指定元素中，符合要求的后代元素。

// 会寻找包含在 ul 元素内的所有 li 元素
ul li {
	background-color: red;
}

注意点：
1.后代选择器，最终选择的是后代，不选中祖先。
2.儿子、孙子、重孙子，都算是后代。
3.结构一定要符合之前讲的 HTML 嵌套要求，例如：
不能p中写 h1 ~ h6 。

子代选择器

作用：(先写父，再写子)选中指定元素中，符合要求的子元素(儿子元素)。

// 会寻找包含在 ul 元素内的所有 li 子元素（只包括子元素）
ul> li {
	background-color: red;
}

注意点：
1.子代选择器，最终选择的是子代，不是父级。
2.子、孙子、重孙子、重重孙子…!统称后代!，子就是指儿子。

兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。

// 会寻找包含在 p 元素后的第一个 div 元素
p+div {
	background-color: red;
}

通用兄弟选择器

作用：选中属性值符合一定要求的元素，

// 会寻找包含在 p 元素后的所有 div 元素
p~div {
	background-color: red;
}

属性选择器

作用：选中属性值符合一定要求的元素。

// 会寻找包含有 title 属性的元素
[title] {
	background-color: red;
}

// 会寻找包含有 title ，且属性值为 test 的元素
[title="test"] {
	background-color: red;
}

// 会寻找包含有 title ，且属性值以 t 开始的元素
[title^="t"] {
	background-color: red;
}

// 会寻找包含有 title ，且属性值以 t 结尾的元素
[title$="t"] {
	background-color: red;
}

// 会寻找包含有 title ，且属性值包含 t 的元素
[title*="t"] {
	background-color: red;
}

伪类选择器

// 会寻找还没有点击过的 a 元素
a:link {
	background-color: red;
}
// 会寻找已经点击过的 a 元素
a:visited {
	background-color: red;
}
// 会寻找鼠标悬浮状态的 a 元素
a:hover {
	background-color: red;
}
// 会寻找激活状态（被点击）的 a 元素
a:active {
	background-color: red;
}
// 会寻找获取焦点状态的 input 元素
input:focus {
	background-color: red;
}

注意点：
1.伪类选择器的使用顺序应该如上所示 link 最前，visited ，hover ，active 最后。
2.hover ，active 适用于所有元素（不仅限于a元素）。
3. link ，visited 仅适用于 a 元素。
4. focus 只有表单类元素才能够使用，input，select。

结构伪类选择器

first-child 寻找第一个儿子

// 会寻找div的第一个儿子 且第一个儿子需要是 p 元素
div>p:first-child {
	background-color: red;
}
// 会寻找div的后代元素 且 p 元素的父级是谁无所谓，但 p 元素必须是其父级的第一个儿子
div p:first-child {
	background-color: red;
}
// 会寻找 p 元素 且 p 元素的父级是谁无所谓，但是 p 元素必须是其父级的第一个儿子
p:first-child {
	background-color: red;
}

last-child 寻找最后一个儿子

// 会寻找div的最后一个儿子 且最后一个儿子需要是 p 元素
div>p:last-child {
	background-color: red;
}

nth-child(n)

// 会寻找div的第 3 个儿子 且第 3 个儿子是 p 元素
div>p:nth-child(3) {
	background-color: red;
}
// 会寻找div的所有是 p 元素的儿子
div>p:nth-child(n) {
	background-color: red;
}
// 会寻找div的所有偶数的是 p 元素的儿子
div>p:nth-child(2n) {
	background-color: red;
}
// 会寻找div的前五个 p 元素的儿子
div>p:nth-child(-n+5) {
	background-color: red;
}

注意点：

n的取值从 1 开始。
even = 2n 代表偶数 2n+1 = odd 代表奇数。
必须是 an+b 的格式

nth-last-child(n)

// 会寻找div的倒数第 3 个儿子 且倒数第 3 个儿子是 p 元素
div>p:nth-last-child(3) {
	background-color: red;
}

first-of-type

// 会寻找div的第一个 p 元素儿子
div>p:first-of-type {
	background-color: red;
}

last-of-type

// 会寻找div的最后一个 p 元素儿子
div>p:last-of-type {
	background-color: red;
}

nth-of-child(n)

// 会寻找div的第 5 个 p 元素儿子
div>p:nth-of-child(5) {
	background-color: red;
}

nth-last-of-child(n)

// 会寻找div的倒数第 3 个儿子 且倒数第 3 个儿子是 p 元素
div>p:nth-last-of-child(3) {
	background-color: red;
}

only-child

// 会寻找没有兄弟元素的 div 元素
div:only-child {
	background-color: red;
}

only-of-child

// 会寻找没有同类型兄弟元素的 div 元素
div:only-of-child {
	background-color: red;
}

empty

// 会寻找没有内容的 div 元素
div:empty {
	width: 100px;
	height: 100px;
	background-color: red;
}

否定伪类

// 会寻找 div 的儿子 p 元素，但是排除类名包含 test 的元素  
div>p:not(.test) {
	background-color: red;
}
// 选中的是 div 的儿子 p 元素，但排除第一个儿子 p 元素
div>p:not(:first-child) {
	color: red;
}

UI伪类

// 会寻找 已经勾选的 复选框 或 单选按钮
input:checked {
	background-color: red;
}
// 会寻找已经禁用的 input 元素
input:disabled {
	background-color: red;
}
// 会寻找可用的 input 元素
input:enabled {
	background-color: red;
}

目标伪类

// 会寻找选中锚点指向的元素
div:target {
	background-color: red;
}

语言伪类

// 会寻找指定语言为英文的 div 元素
div:lang(en) {
	background-color: red;
}

<div lang="en">English</div>

伪元素选择器

// 会寻找 div 元素中的第一个文字
div::first-letter {
	background-color: red;
}

// 会寻找 div 元素中的第一行文字
div::first-line {
	background-color: red;
}

// 会寻找 div 元素中被鼠标选择的文字
div::selection {
	background-color: red;
}

// 会寻找 input 元素中的提示文字
input::placeholder{
	color: red;
}

// 会寻找 p 元素最开始的位置，随后创建一个子元素
p::before{
	content: "￥"
}
// 会寻找 p 元素之前
p::after{
	content: ".00"
}