CSS选择器

元素（标签）选择器

组合选择器：div,h1 {color: red;}

类选择器

• 结合标签选择器

div .text {color: red;}

<div>
	<div class="text">内容</div>
</div>

• 多类选择器：元素拥有多个样式

.color {
    color: red;
}
.bgColor {
    background-color: blue;
}

<div class="color bgColor">内容</div>

• 链接多个类选择器：元素必须同时引用才能生效

.color.bgColor {color: red;}

<div class="color bgColor">内容</div>

id选择器

• 一个id选择器的属性值在html文档中只能出现一次，避免js获取id时出现混淆

#text {color: red;}

<div id="text">内容</div>

通配符选择器*

* { margin: 0;}

派生选择器

• 后代选择器

div p {color: red;}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

• 子元素选择器

div > p {color: red;}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

• 相邻选择器（兄弟）

p + p { color: red;}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

特殊的选择器

• 伪类选择器：不改变任何DOM内容，只是插入了一些修饰类的元素

p:first-child {color: red;}			// 第一项
p:last-child {color: red;}			// 最后一项
p:nth-child(2) {color: red;}		// 第n项
p:nth-child(2n + 1) { color: red;}	// 奇数项
p:nth-child(2n) {color: red;}		// 偶数项
p:not(:nth-child(1)) {color: red;}	// 否定伪类：除了第n项

<p>1</p>
<p>2</p>
<p>3</p>

a:link {color: red;}		// 未访问样式
a:visited {color: blue;}	// 已访问样式
a:hover {color: yellow;}	// 鼠标悬浮后的样式
a:active {color: purple;}	// 已选中的样式

<a href="https://www.baidu.com">百度</a>

• 伪元素选择器

div::first-letter {color: red;}		// 第一个
div::first-line {color: blue;}		// 第一行，只能用于块级元素
div::selection {color: yellow;}		// 选中
div::before {content: "前面追加";}	// 在开始位置
div::after {content: "后面追加";}	// 在结束位置

选择器优先级（由低到高）

• 通配符选择器*

• 标签选择器div

• 类选择器.class

• id选择器#id

• 行内样式

• !important（尽量不要在公共代码里使用）