目录
1. :first-child/:last-child /nth-child(n)
- 元素选择器
- id选择器 (#)
- 类选择器 (.)
- 通用选择器 (*)
- 分组选择器 (逗号)
- 后代选择器 (空格)
- 子选择器 (
>
) - 相邻兄弟选择器 (
+
) - 通用兄弟选择器 (
~
)
CSS选择器
1.元素选择器
页面上的所有 <p> 元素都将居中对齐,并带有红色文本颜色:
p {
text-align: center;
color: red;
}
2. id 选择器
将应用于 id="para1" 的 HTML 元素:
#para1 {
text-align: center;
color: red;
}
3. 类选择器
所有带有 class="center" 的 HTML 元素将为红色且居中对齐:
.center {
text-align: center;
color: red;
}
class="center" 的 <p> 元素会居中对齐:
p.center {
text-align: center;
color: red;
}
4.通用选择器
下面的 CSS 规则会影响页面上的每个 HTML 元素:
* {
text-align: center;
color: blue;
}
5.分组选择器
用逗号来分隔每个选择器,h1、h2 和 p 元素具有相同的样式定义:
h1, h2, p {
text-align: center;
color: red;
}
6.后代选择器
下面的例子选择 <div> 元素内的所有 <p> 元素:
div p {
background-color: yellow;
}
7.子选择器
下面的例子选择属于 <div> 元素下一层级为 <p> 的子元素:
div > p {
background-color: yellow;
}
8.相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的同级 <p> 元素:
div + p {
background-color: yellow;
}
9.通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素:
div ~ p {
background-color: yellow;
}
伪类
常用几个伪类:
1. :first-child/
:last-child /nth-child(n)
伪类与指定的元素匹配:该元素是另一个元素的第一个/最后一个/第n个子元素
//选择器匹配所有 <p> 元素中的第一个 <i> 元素
p i:first-child {
color: blue;
}
//选择器匹配所有 <p> 元素中的最后一个 <i> 元素
p i:last-child {
color: blue;
}
/* 选择每隔一个元素选择一次,从第二个元素开始 */
p :nth-child(2n) {
color: blue;
}
/* 选择每隔一个元素选择一次,从第一个元素开始 */
p :nth-child(2n+1) {
color: blue;
}
2. :hover 鼠标悬停
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
3. :active 已选择
/* 已选择的链接 */
a:active {
color: #0000FF;
}
4. :focus 获得焦点
5. :link 未访问的
/* 未访问的链接 */
a:link {
color: #FF0000;
}
6. :visited 已访问的
/* 已访问的链接 */
a:visited {
color: #00FF00;
}