CSS笔记——选择器的分类和书写组合

选择器

在CSS中的选择器用来选择HTML代码中的标签。

简单选择器

1. 元素选择器
2. id选择器
3. 类选择器

（前三种说明省略）

4. 通配符选择器

*{color: red};

应用于HTML中的所有标签，上例的CSS代码使HTML中的所有标签的文字设置为红色。

属性选择器

属性名属性值

a[href]{
	color: red;
}

[href="https://www.sina.com"]{
	color: red;
}

6. 伪类选择器
   选中某些元素的某种状态

/*超链接未被访问*/
a:link{
	color: blue;
}
/*超链接已经访问过*/
a:visited{
	color: #ccc;
}
/*鼠标悬停（hover）时的a元素应用该样式*/
a:hover{
	color: red;
}
/*a元素被按住（激活态）时应用元素*/
a:active{
	color: red;
}

四个都有时，按以上顺序写。
前两种a标签特有。
伪元素选择器

span::before{
	content: "《";
}
span::after{
	content: "》";
}

选择器的组合
7. 并列

/*对类为red的p标签应用样式*/
p.red{
	text-align: center;
}

8. 后代元素：空格

/*HTML中li为div的子元素或子孙元素*/
div li{
	color: #ccc;
}

9. 子元素选择器：>
   只能选子元素。
10. 下一个兄弟元素：+
11. 往后所有兄弟元素：~

选择器的并列

逗号分隔
语法糖