以下是 CSS 选择器的用法和优先级介绍:
一、基本选择器
1. 元素选择器:
-
用法:通过 HTML 元素名称来选择元素。例如, p 选择所有
段落元素。
-
示例:
css
复制
p {
color: blue;
}
2. 类选择器: -
用法:以 . 开头,根据元素的 class 属性值选择元素。可应用于多个不同元素。
-
示例:
css
复制
.my-class {
font-size: 16px;
}
plaintext
复制
3. ID 选择器:
- 用法:以 # 开头,根据元素的 id 属性值选择唯一的元素。在一个页面中,id 值应是唯一的。
- 示例:
css
复制
#my-id {
background-color: yellow;
}
二、组合选择器
1. 后代选择器:
-
用法:用空格分隔两个或多个选择器,表示选择作为后代的元素。
-
示例:
css
复制
div p {
text-decoration: underline;
}
2. 子选择器: -
用法:用 > 分隔两个选择器,表示选择直接子元素。
-
示例:
css
复制
ul > li {
list-style-type: none;
}
3. 相邻兄弟选择器: -
用法:用 + 分隔两个选择器,表示选择紧接在另一个元素后的元素。
-
示例:
css
复制
h1 + p {
margin-top: 0;
}
4. 通用兄弟选择器: -
用法:用 ~ 分隔两个选择器,表示选择在另一个元素之后的所有同级元素。
-
示例:
css
复制
h2 ~ p {
font-style: italic;
}
三、属性选择器
1. [attribute] :
-
用法:选择具有指定属性的元素。
-
示例:
css
复制
[href] {
color: green;
}
2. [attribute=value] : -
用法:选择具有指定属性和值的元素。
-
示例:
css
复制
[href=“https://www.example.com”] {
font-weight: bold;
}
3. [attribute^=value] : -
用法:选择属性值以指定值开头的元素。
-
示例:
css
复制
[href^=“https”] {
border: 1px solid black;
}
4. [attribute$=value] : -
用法:选择属性值以指定值结尾的元素。
-
示例:
css
复制
[href$=“.com”] {
padding: 5px;
}
5. [attribute*=value] : -
用法:选择属性值中包含指定值的元素。
-
示例:
css
复制
[href*=“example”] {
background-color: gray;
}
四、伪类选择器
1. 链接伪类:
-
:link :选择未被访问的链接。
-
:visited :选择已被访问的链接。
-
示例:
css
复制
a:link {
color: blue;
}
a:visited {
color: purple;
}
2. 用户行为伪类: -
:hover :鼠标悬停在元素上时选择该元素。
-
:active :元素被激活(如被点击)时选择该元素。
-
:focus :元素获得焦点时选择该元素。
-
示例:
css
复制
button:hover {
background-color: lightblue;
}
button:active {
background-color: darkblue;
}
input:focus {
border: 2px solid orange;
}
3. 结构伪类: -
:first-child :选择父元素的第一个子元素。
-
:last-child :选择父元素的最后一个子元素。
-
:nth-child(n) :选择父元素的第 n 个子元素。
-
:nth-last-child(n) :选择父元素的倒数第 n 个子元素。
-
:first-of-type :选择同类型元素中的第一个。
-
:last-of-type :选择同类型元素中的最后一个。
-
:nth-of-type(n) :选择同类型元素中的第 n 个。
-
:nth-last-of-type(n) :选择同类型元素中的倒数第 n 个。
-
:empty :选择没有子元素的元素。
-
示例:
css
复制
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
text-decoration: underline;
}
ul li:nth-child(2n) {
background-color: lightgray;
}
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
p:nth-of-type(3) {
color: red;
}
div:empty {
display: none;
}
五、伪元素选择器
1. ::first-letter :选择元素的第一个字母。
2. ::first-line :选择元素的第一行。
3. ::before :在元素内容之前插入内容。
4. ::after :在元素内容之后插入内容。
- 示例:
css
复制
p::first-letter {
font-size: 20px;
}
p::first-line {
background-color: lightyellow;
}
h3::before {
content: "Before “;
}
h3::after {
content: " After”;
}
六、优先级
CSS 优先级遵循以下规则:
1. 内联样式(在 HTML 元素的 style 属性中定义)具有最高优先级。
2. ID 选择器优先级高于类选择器、属性选择器和伪类选择器。
3. 类选择器、属性选择器和伪类选择器优先级高于元素选择器。
4. 当多个选择器具有相同的优先级时,后面定义的样式会覆盖前面的样式。
例如:
html
复制
.my-class {
color: green;
}
#my-id {
color: red;
}
This is a paragraph.
在这个例子中,段落元素的文本颜色最终为红色,因为 ID 选择器具有最高优先级。