css基础–选择器（中）
三、伪类选择器
1.动态伪类：共五种
什么时候用？一般和超链接的a标签配合使用。
(1) link{} 链接初始的样式, 指的是a标签。
我是超链接
样式：a:link {
color: red;
}
效果图：
（2）.a:visited{} 链接访问过后的样式, 指的是a标签。
我是超链接
样式：a:visited {
color: pink;
}
效果图：
（3）.a:hover{} 鼠标悬停,可以是任何标签。
我是超链接
样式：a:hover {
color: blue;
}
效果图：
（4）.a:active{} 链接按住不动的时候的样式。
我是超链接
样式：a:active {
color: green;
}
效果图：
（5）.input:focus{} 选择获得焦点的输入字段之后的样式。
html <input type="text" value="请输入文字"/>
样式：input:focus {
width: 300px;
height: 100px;
}
效果图：
注意：前4个如果都是同时给a的话，顺序不要乱
2．UI状态伪类选择器：
什么时候用？主要是表单相关使用
（1）input：disabled{} 禁用的时候
<form>
<input type="text">
<input type="password" disabled="disabled">
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</form> 样式：input:disabled{width: 300px; height: 300px;}
效果图：
（2）input：enabled{} 可用状态下的时候
<form>
<input type="text">
<input type="password" disabled="disabled">
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</form> 样式：input:enabled{width: 300px; height: 300px;}
效果图：
（3）input：checked{} 选中的时候
<form>
<input type="text">
<input type="password" disabled="disabled">
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</form> 样式：input:checked{width: 300px; height: 300px;}
效果图;
3.结构伪类选择器
（1）-child结尾的
含义：某个父元素下面的某个或者某些子元素变
01. ：first-child{}
这个表示的意思是box下面所有的第一个子元素变
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>样式：.box:first-child {
width: 50px;
height: 50px;
margin-bottom: 10px;
background-color: red;
}
效果图：
02 ：last-child{}
.box下面的最后一个子元素是ul的话就变
<div class="box">
<div>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
</div>样式：.box ul:last-child {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
03 ：nth-child(){} 可以带参数，只能是n，n从0开始，如:nth-child(4)
.box下面的第2个子元素是p的变
<div class="box">
<div>11111</div>
<p>22222</p>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
</div>
样式：.box p:nth-child(2) {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
04 ：nth-last-child(){}
在所有的子元素里面倒数第2个且是p的变化
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
<div>
<h3>00000</h3>
<h3>121212</h3>
</div>
<p>66666</p>
<div>77777</div>
</div>样式：.box p:nth-last-child(2) {
border: 3px solid red;
}
效果图：
05 :only-child{}
只有一个子元素是p的时候变，不止一个p的时候没变化
<div class="box">
<div>11111</div>
<p>22222</p>
<div>33333</div>
<p>44444</p>
<ul>
<li>55555</li>
</ul>
</div>样式：.box p:only-child {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
因为不止一个p，所以无变化。
<div class="box">
<div>11111</div>
<p>22222</p>
<div>33333</div>
<div>44444</div>
<div>
<p></p>
</div>
<ul>
<li>55555</li>
</ul>
</div>样式：.box p:only-child {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
因为只有一个p，所以样式发生了变化
（2）.-type结尾的：同类型的某个或者某些变化
01 ：first-of-type{}
box下面的所有的h3里面的第一个
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<h3>44444</h3>
<ul>
<li>55555</li>
</ul>
</div> 样式：.box h3:first-of-type {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
02 ：last-of-type{}
box下面的所有的h3里面的最后一个
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<h3>44444</h3>
<ul>
<li>55555</li>
</ul>
</div> 样式：.box h3:last-of-type {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
03 ：nth-of-type(n){}
选择相同标签的第n个元素变化
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<h3>44444</h3>
<ul>
<li>55555</li>
</ul>
<h3>66666</h3>
</div> 样式：.box h3:nth-of-type(3) {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
04 ：nth-last-of-type(n){}
选择相同标签的倒数第n个元素变化
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<h3>44444</h3>
<ul>
<li>55555</li>
</ul>
<h3>66666</h3>
<h3>77777</h3>
</div> 样式：.box h3:nth-last-of-type(2) {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
05 :only-of-type{}
选择父元素下的相同标签的唯一子元素变化
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
<div>
<h3>00000</h3>
<h3>121212</h3>
</div>
<div>66666</div>
<div>77777</div>
</div> 样式：.box h3:only-of-type {
width: 100px;
height: 50px;
background-color: red;
}
效果图：
（3） :empty 当元素为空的时候变化
例题：
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
<div>
<h3>00000</h3>
<h3>121212</h3>
</div>
<p></p>
<div>77777</div>
</div>
样式：
.box p:empty {
border: 3px solid red;
}
效果图：
（4） :root 根元素变化
例题：
<div class="box">
<div>11111</div>
<h3>22222</h3>
<div>33333</div>
<div>44444</div>
<ul>
<li>55555</li>
</ul>
<div>
<h3>00000</h3>
<h3>121212</h3>
</div>
<p></p>
<div>77777</div>
</div>样式：
:root{
border: 3px solid red;
}
效果图：
4.否定伪类：:not(否定的条件) {}
除某个东西以外如p标签的其它标签改变
例题：
<ul>
<li>11111</li>
<p>22222</p>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<p>77777</p>
<li>66666</li>
</ul> 样式：ul :not§ {
border: 3px solid red;
}
效果图：
拓展：将否定伪类与其他伪类结合使用：
除了偶数的li，其它的li变化
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
</ul> 样式：ul li:not(:nth-of-type(2n)) {
border: 3px solid red;
}
效果图：
注意：否定伪类除了:nth-of-type()可以和其它的结构伪类相互结合从而实现更灵活的样式。
扫一扫
7282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
