1.标记选择器，通过HTML标签定义选择器
p{background-color:blue;color:red}
上面p代表段落标签，表示将所有段落背景和前景颜色分别设为蓝色和红色；也可用其他字母表示其他标签
2.类别选择器。网页元素通过class属性定义类别，选择器在类别前加一个点
<p class="cs1">段落正文</p>
.cs1{font-family:华文行楷;font-size:15px}
3.ID选择器，使用id定义选择器。网页元素通过id属性定义id，选择器在类别前加#
<p id="cs1">段落正文</p>
#cs1{font-family:华文行楷;font-size:15px}
4.伪类选择器：为元素的特定状态设置样式。如a:link, a:visited ,a:hover, a:active
a:hover{font-size :30px;color :red;}
表示鼠标滑过链接时，文字大小和颜色发生改变。
5.复合选择器：包括并集、交集、后代选择器等。
-
并集选择器：多个选择器通过逗号连接，表示多个选择器共用一种样式。
h1, h2, h3, h4, h5, p{color:blue;font-size:15px; }
-
交集选择器：由两个选择器直接连接构成，结果是两个选择器定义的元素的交集。通常情况下，第1个选择器是标记选择器,第2个是类别选择器。
p.special{color:red;}
-
后代选择器：外层选择器写在前面，内层选择器写在后面，中间用空格分隔。表示嵌套在外层元素的内层元素使用样式。可以多层嵌套。这里的后代不仅限于直接后代，也会影响到各级后代，如果只想影响直接后代，可以使用子选择器：选择器之间用>分隔。
p span{color:red;}
-
兄弟选择器：用+或~分隔，A+B表示紧邻A的B元素，A~B表示A后所有兄弟B节点。
<!DOCTYPE html><html><head><styletype="text/css">h1 + p {color:red;}</style></head><body><h1>heading.</h1><p>paragraph1.</p><p>paragraph2.</p><p>paragraph3.</p></body></html>
6.* 代表全部均用此属性
* {
color:red;}
7. :first-child / :last-child / :only-child
某个标签中包含的第一个/最后一个/只有一个的子元素
<p> :first-child / :last-child / :only-child
apple、pickle可用plate ：only-child{ } 定义
apple可用plate ：first-child{ }定义
最后一个pickle可用div ：last-child{ }定义
8. 其他
:nth-child(A) 定义标签下的第A个子元素
:nth-last-child(A) 定义标签下的倒数第A个子元素
:first-of-type 定义标签下的第1个子元素
:nth-of-type(A) 定义标签下的第A个子元素 (A可以是odd(奇数个)或even(偶数个)）
:nth-of-type(An+B) 在第n的类公式选择每第n个元素开始，在该元素的特定实例计数
:only-of-type 在另一个元素中选择其类型的唯一元素
:last-of-type 选择另一个元素中该类型的最后一个元素
:empty 选择其中没有任何其他元素的元素
:not(x) 选择与选择器“X”不匹配的所有元素
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
