目录
一、概念及作用
1、概念
像类,但不是类,是元素的一种特殊状态
2、作用
选中特殊状态的元素
二、分类
1、动态伪类
2、结构伪类
3、否定伪类
4、UI伪类
5、目标伪类
6、语言伪类
三、动态伪类
1、类型
(1):link 超链接未被访问的状态
(2):visited 超链接访问过的状态
(3):hover 鼠标悬停在元素上的状态
(4):active 元素激活的状态
(5):focus 获取焦点的元素
注意:
link、visited、hover、active四个有严格的先后顺序;
表单类元素才能使用 :focus伪类
2、举例
(1)代码
/* 选中的是没有访问过的a元素 */
a:link {
color: aqua;
}
/* 选中的是访问过的a元素 */
a:visited {
color: hsl(323, 100%, 50%);
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: cornflowerblue;
}
/* 选中的是激活状态的a元素 */
a:active {
color: darkgray;
}
input:focus {
color: #7a0ae9;
background-color: cornsilk;
}
select:focus {
color: coral;
background-color: #00a6ff;
}
<a href="https://www.jd.com">京东</a>
<a href="https://www.bilibili.com">哔站</a>
<br>
<input type="text">
<select>
<option value="one">1</option>
<option value="two">2</option>
</select>
(2)运行效果
运行效果视频
四、结构伪类
1、代码
/* 选中的是div的第一个儿子p元素 —— 结构1 */
/* div>p:first-child {
color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构2 */
/* div>p:first-child {
color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构3 */
/* div>p:first-child {
color: #ff9f7f;
} */
/* 选中的是div的后代p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构4 */
/* div p:first-child {
color: #ff9f7f;
} */
/* 选中的是div的后代p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构5 */
/* div p:first-child {
color: #ff9f7f;
} */
/* 选中的是p元素,且p的父级是谁无所谓,但p必须是其父亲的第一个儿子 —— 结构6 */
/* p:first-child {
color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素 —— 结构7 */
/* div>p:last-child {
color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素 —— 结构8 */
/* div>p:nth-child(3){
color: #ff9f7f;
} */
/* 选中的是div的偶数个儿子p元素 —— 结构9 */
/* div>p:nth-child(2n){
color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素(按照所有同类型兄弟计算的) —— 结构10 */
/* div>p:first-of-type{
color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素(按照所有同类型兄弟计算的) —— 结构11 */
/* div>p:last-of-type{
color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素(按照所有同类型兄弟计算的) —— 结构12 */
/* div>p:nth-of-type(3){
color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素(按照所有兄弟计算的) —— 结构13 */
/* div>p:nth-last-child(3){
color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素(按照所有同类型兄弟计算的) —— 结构14 */
/* div>p:nth-last-of-type(3){
color: #ff9f7f;
} */
/* 选中的是没有兄弟的span元素 —— 结构15 */
/* span:only-child {
color: #ff9f7f;
} */
/* 选中的是没有同类型兄弟的span元素 —— 结构16 */
/* span:only-of-type {
color: #ff9f7f;
} */
/* 选中的是html根元素 */
/* :root {
background-color: #99d21e;
} */
/* 选中的是没有内容的div元素 */
div:empty {
width: 100px;
height: 100px;
background-color: #4deded;
}
<!-- 结构1 -->
<!-- <div>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三:93分</span>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构3 -->
<!-- <div>
<marquee>
<p>张三:93分</p>
</marquee>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构4 -->
<!-- <div>
<marquee>
<p>张三:93分</p>
</marquee>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构5 -->
<!-- <p>测试1</p>
<div>
<p>测试2</p>
<marquee>
<p>测试3</p>
<p>张三:93分</p>
</marquee>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构6 -->
<!-- <p>测试1</p>
<div>
<p>测试2</p>
<marquee>
<p>测试3</p>
<p>张三:93分</p>
</marquee>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
</div> -->
<!-- 结构7 -->
<!-- <div>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
</div> -->
<!-- 结构8 -->
<!-- <div>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
</div> -->
<!-- 结构9 -->
<!-- <div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div> -->
<!-- 结构10 -->
<!-- <div>
<span>测试</span>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
</div> -->
<!-- 结构11 -->
<!-- <div>
<span>测试</span>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
<span>测试</span>
</div> -->
<!-- 结构12 -->
<!-- <div>
<span>测试1</span>
<p>张三:93分</p>
<span>测试2</span>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
<span>测试3</span>
</div> -->
<!-- 结构13 -->
<!-- <div>
<span>测试1</span>
<p>张三:93分</p>
<span>测试2</span>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
<span>测试3</span>
</div> -->
<!-- 结构14 -->
<!-- <div>
<span>测试1</span>
<p>张三:93分</p>
<span>测试2</span>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
<span>测试3</span>
</div> -->
<!-- 结构15 -->
<!-- <div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
<span>测试3</span>
</div> -->
<!-- 结构16 -->
<!-- <div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p>赵六:76分</p>
<p>孙七:74分</p>
</div> -->
<!-- 结构17 -->
<div></div>
关于n的值:
(1)0或不写:什么都选不中——几乎不用
(2)n:选中所有子元素——几乎不用
(3)1~正无穷的整数:选中对应序号的子元素
(4)2n或even:选中序号为偶数的子元素
(5)2n+1或odd:选中序号为奇数的子元素
(6)-n+3:选中的是前3个(公式中n从0开始计算)
五、否定伪类
1、作用
排除满足括号中条件的元素
2、格式
:not(选择器)
3、举例
/* 选中的是div的儿子p元素,但是排除类名为fail的元素 */
/* div>p:not(.fail){
color: red;
} */
/* 选中的是div的儿子p元素,但是排除title属性值以“加油”开头的 */
/* div>p:not([title^="加油"]){
color: red;
} */
/* 选中的是div的儿子p元素,但是排除第一个儿子p元素 */
div>p:not(:first-child){
color: red;
}
<div>
<p>张三:93分</p>
<p>李四:88分</p>
<p>王五:80分</p>
<p class="fail" title="加油,赵六">赵六:56分</p>
<p class="fail" title="加油,孙七">孙七:54分</p>
</div>
六、UI伪类
1、代码
/* 选中的是勾选的复选框或单选按钮 */
/* 复选框和单选框的背景色是受到限制的 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: #f0f068;
}
/* 选中的是可用的input元素,去掉:enabled效果一样 */
input:enabled {
background-color: #db7474;
}
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
2、效果
七、目标伪类
1、格式
:target 选中锚点指向的元素
2、举例
(1)代码
div {
background-color: #e79292;
width: 400px;
height: 50px;
}
div:target{
background-color: #9ddc14;
}
<a href="#one">去看1</a>
<a href="#two">去看2</a>
<a href="#three">去看3</a>
<a href="#four">去看4</a>
<a href="#five">去看5</a>
<a href="#six">去看6</a>
<div id="one">1</div>
<br>
<div id="two">2</div>
<br>
<div id="three">3</div>
<br>
<div id="four">4</div>
<br>
<div id="five">5</div>
<br>
<div id="six">6</div>
<br>
(2)效果(点击去看4,4的颜色改变)
八、语言伪类(了解即可)
1、格式
:lang() 根据指定的语言选择元素(本质是看lang属性的值)
2、举例
(1)代码
div:lang(en) {
color: aqua;
}
/* div:lang(zh-CN) {
color: burlywood;
} */
:lang(zh-CN) {
color: #5059ff;
}
<div>您好</div>
<div lang="en">html</div>
<p>前端</p>
<span>css</span>
(2)运行效果