CSS 选择器（二）

CSS 选择器（二）

交集选择器（了解）

给所有选择器选中的标签中相交的那部分标签设置属性
格式：选择器之间没有任何符号！

<!--选择器1选择器2 {
    属性:值;
}-->
<style>
p.p1 {
    color:red;
}
</style>
<p></p>
<p></p>
<p class="p1"></p>  <!--变红-->
<p class="p1"></p>  <!--变红-->
<p></p>

并集选择器（掌握）

给所有选择器中的标签设置属性
格式：选择器之间用逗号隔开！

<!--选择器1,选择器2 {
    属性:值;
}-->
<style>
.p1,.p2 {
    color:red;
}
</style>
<p></p>
<p></p>
<p class="p1"></p>  <!--变红-->
<p class="p2"></p>  <!--变红-->
<p></p>

兄弟选择器

相邻兄弟选择器(css2)

给指定选择器后面紧跟着的那一个选择器中的标签设置属性

<!--选择器1+选择器2 {
    属性:值;
}-->
<style>
h1+p {
    color:red;
}
</style>
<h1>标题</h1>
<p>段落</p> <!--变红-->
<p>段落</p>
<p>段落</p>  
<h1>标题</h1>
<p>段落</p>  <!--变红-->
<p>段落</p>
<p>段落</p>

通用兄弟选择器(css3)

给指定选择器后面所有的选择器中的标签设置属性

<!--选择器1~选择器2 {
    属性:值;
}-->
<style>
h1~p {
    color:red;
}
</style>
<h1>标题</h1>
<p>段落</p> <!--变红-->
<p>段落</p> <!--变红-->
<p>段落</p> <!--变红-->
<h2>标题</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>

序选择器(css3)

可以具体选择到同级别的某一个标签

<!--
1) first-child:只取同级别的第一个标签，不管是什么类型的，如果在段落1之前加上一个<h1>标签，那么段落1就不会被选中
格式：
选择器:first-child {
    属性:值;
}
2) first-of-type:取同级别的同类型的第一个标签，如过载段落1之前加上一个<h1>标签，那么段落1同样会会被选中
格式：
选择器:first-of-type {
    属性:值;
}
3) first(第一个)可以替换为last(最后一个)
4) nth-child(n):取同级别下的第n个标签设置属性,不区分类型,如果在段落1之前加上一个<h1>标签，那么段落6就不会被选中
格式：
选择器:nth-child(n) {
    属性:值;
}
5) nth-of-type(n):取同级别下的同类型第n个标签设置属性,区分类型
格式：
选择器:nth-of-type(n) {
    属性:值;
}
6) nth-last-of-type(n):取同级别下的同类型倒数第n个标签设置属性,区分类型
格式：
选择器:nth-last-of-type(n) {
    属性:值;
}
7) only-child:选中父元素中唯一的元素,不区分类型
格式：
选择器:only-child {
    属性:值;
}
8) only-of-type:选中父元素中类型唯一的元素,区分类型
格式：
选择器:only-of-type {
    属性:值;
}
-->
<style>
p:first-child {
    color:red;
}
p:first-of-type {
    color:blue;
}
p:nth-child(3) {
    color:yellow;
}
p:nth-of-type(2) {
    color:orange;
}
p:only-child {
    color:purple;
}
</style>
<p>段落1</p> <!--1.变红--><!--2.变蓝-->
<p>段落2</p> <!--4.变橙-->
<p>段落6</p> <!--3.变黄-->
<div>
<p>段落3</p>  <!--1.变红--><!--2.变蓝-->
<p>段落4</p>  <!--4.变橙-->
<p>段落5</p> <!--3.变黄-->
</div>
<div>
<p>段落7</p> <!--7.变紫-->
</div>

序选择器补充

<!--
1) nth-child(odd/even):取同级别下的第奇数/偶数个标签设置属性,不区分类型
格式：
选择器:nth-child(odd/even) {
    属性:值;
}
2) nth-of-type(odd/even):取同级别下的同类型的第奇数/偶数个个标签设置属性,不区分类型
格式：
选择器:nth-child(odd/even) {
    属性:值;
}
3) nth-child(xn+y):选择满足计算结果的标签。x,y是用户自定义的，n是一个计数器，从0开始递增。不区分类型
格式：
选择器:nth-child(xn+y) {
    属性:值;
}
-->
<style>
p:nth-child(odd) {
    color:yellow;
}
</style>
<p>段落1</p> <!--1.变黄-->
<p>段落2</p>
<p>段落3</p> <!--1.变黄-->
<p>段落4</p> 
<p>段落5</p> <!--1.变黄-->
<p>段落6</p>
<p>段落7</p> <!--1.变黄-->

通配符选择器

给当前界面上的所有标签设置属性。
注意：由于通配符选择器要遍历页面所有的标签，所以性能比较差，一般在企业开发中不会用到
格式：

<style>
* {
    padding:0;
    margin:0;
}
</style>