1.结构伪类选择器
E:empty{属性:属性值;}
选中E元素中内容为空的E元素,最终只会选择到E元素,不会选择到其他元素
:root{属性:属性值;}
选择到根元素,在html中根元素就是html元素,所以 :root{属性:属性值;} ==== html{属性:属性值;}
*/
ul li{height: 40px;}
ul div{height: 40px;}
ul li:empty{background: pink;}
:root{font-size: 40px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li></li>
<li>3</li>
<div></div>
<li>4</li>
<li>5</li>
<li></li>
<li>7</li>
</ul>
不限定元素类型---父元素中的所有子元素都会参与计算
D E:nth-child(规律){属性:属性值;}
找到D元素中符合规律的E元素,但是如果D元素中有非E元素的其他元素,也会算在规律中,但是执行的时候只会给符合规律E元素执行样式,符合规律的其他元素是不会执行样式的
D E:nth-last-child(规律){属性:属性值;}
和:nth-child()的计算方式一样,但是计算顺序相反,nth-child是从上往下计算,nth-last-child是从下往上计算
限定元素类型---父元素中的匹配的子元素才会参与计算
D E:nth-of-type(规律){属性:属性值;}
找到D元素中符合规律的E元素,但是如果D元素中有非E元素的其他元素,会排除在外,不参与计算,执行的时候只会给符合规律E元素执行样式
D E:nth-last-of-type(规律){属性:属性值;}
和:nth-of-type()的计算方式一样,但是计算顺序相反,nth-of-type是从上往下计算,nth-last-of-type是从下往上计算
规律: n n是个变量,从0开始,一次向后递增,递增到元素的个数位置
数字 对应数字的元素会执行样式
表达式 列如 2n 2n+1 3n-2
odd 奇数个
even 偶数个
/*#box li:nth-child(n){background: blue;}*/
/*#box li:nth-child(2){background: blue;}*/
/*#box li:nth-child(2n){background: blue;}*/
/*#box li:nth-child(2n-1){background: blue;}*/
/*#box li:nth-child(3n+3){background: blue;}*/
/*#box li:nth-child(odd){background: blue;}*/
/*#box li:nth-child(even){background: blue;}*/
/*#box li:nth-last-child(odd){background: pink;}*/
/*#box li:nth-last-child(even){background: pink;}*/
/*#box li:nth-of-type(n){background: pink;}*/
/*#box li:nth-of-type(6){background: pink;}*/
/*#box li:nth-of-type(2n+1){background: pink;}*/
/*#box li:nth-of-type(odd){background: pink;}*/
/*#box li:nth-of-type(even){background: pink;}*/
/*#box li:nth-last-of-type(even){background: pink;}*/
#box li:nth-last-of-type(3){background: pink;}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<div>div1</div>
<li>2</li>
<li>3</li>
<li>4</li>
<div>div2</div>
<li>5</li>
<li>6</li>
<div>div3</div>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
不限定元素类型---父元素中的所有子元素都会参与计算
D E:nth-child(规律){属性:属性值;}
找到D元素中符合规律的E元素,但是如果D元素中有非E元素的其他元素,也会算在规律中,但是执行的时候只会给符合规律E元素执行样式,符合规律的其他元素是不会执行样式的
D E:nth-last-child(规律){属性:属性值;}
和:nth-child()的计算方式一样,但是计算顺序相反,nth-child是从上往下计算,nth-last-child是从下往上计算
限定元素类型---父元素中的匹配的子元素才会参与计算
D E:nth-of-type(规律){属性:属性值;}
找到D元素中符合规律的E元素,但是如果D元素中有非E元素的其他元素,会排除在外,不参与计算,执行的时候只会给符合规律E元素执行样式
D E:nth-last-of-type(规律){属性:属性值;}
和:nth-of-type()的计算方式一样,但是计算顺序相反,nth-of-type是从上往下计算,nth-last-of-type是从下往上计算
规律: n n是个变量,从0开始,一次向后递增,递增到元素的个数位置
数字 对应数字的元素会执行样式
表达式 列如 2n 2n+1 3n-2
odd 奇数个
even 偶数个
E F:only-child{属性:属性值;}
选择父元素E内只包含一个子元素,且匹配为F元素 限定子元素的数量
E F:only-of-tyle{属性:属性值;}
选择父元素E中只包含一个同类型的子元素,且匹配为F元素 不限定子元素的数量,限定匹配元素的数量
不限定元素类型
E F:first-child{属性:属性值;}
选中父元素E中的第一个子元素F,如果第一个子元素是F,就执行样式,如果不是则不执行
E F:last-child{属性:属性值;}
选中父元素E中的最后一个子元素F,如果最后一个子元素是F,就执行样式,如果不是则不执行
限定元素类型
E F:first-of-type{属性:属性值;}
选中父元素E中具有指定类型的第一个子元素F
E F:last-of-type{属性:属性值;}
选中父元素E中具有指定类型的最后一个子元素F
*/
/*ul li:only-child{background: blue;}*/
/*ul li:only-of-type{background: blue;}*/
/*#box li:first-child{background: green;}
#box li:last-child{background: pink;}*/
#box li:first-of-type{background: orange;}
#box li:last-of-type{background: yellow;}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<div>div</div>
<li>2</li>
<li>3</li>
<h3>h3</h3>
<li>4</li>
<li>5</li>
<p>ppp</p>
</ul>