CSS复合选择器(二)
- 伪类选择器
- 一、动态伪类:
- 二、结构伪类
- 三、否定伪类:
- 四、UI伪类:
- 五、目标伪类(了解)
- 六、语言伪类(了解)
伪类选择器
- 作用:选中特殊状态的元素。
如何理解“伪” ? — 虚假的,不是真的。
如何理解“伪类”? — 像类( class ),但不是类,是元素的一种特殊状态。
- 常用的伪类选择器:
一、动态伪类:
- : link 超链接未被访问的状态。
- :visited 超链接访问过的状态。
- : hover 鼠标悬停在元素上的状态。
- :active 元素激活的状态。
什么是激活?—— 按下鼠标不松开。
注意点:遵循LVHA 的顺序,即:link 、visited 、hover 、active 。
- : focus 获取焦点的元素。
表单类元素才能使用:focus 伪类。
当用户:点击元素、触摸元素、或通过键盘的 “tab ” 键等方式,选择元素时,就是获得焦点。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_动态伪类</title>
<style>
/* 选中的是没有访问过的a元素 */
a:link {
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited {
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: skyblue;
}
/* 选中的是激活状态的a元素 */
a:active {
color: green;
}
/* 选中的是鼠标悬浮的span元素 */
span:hover {
color: green;
}
/* 选中的是激活的span元素 */
span:active {
color: red;
}
/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */
input:focus,select:focus {
color: orange;
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<span>前端</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</body>
</html>
二、结构伪类
- 常用的:
- :first-child 所有兄弟元素中的第一个。
- :last-child 所有兄弟元素中的最后一个。
- :nth-child(n) 所有兄弟元素中的第 n 个。
- :first-of-type 所有同类型兄弟元素中的第一个。
- :last-of-type 所有同类型兄弟元素中的最后一个。
- :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
关于n的值:
- 0或不写:什么都选不中 —— 几乎不用。
- n:选中所有子元素 —— 几乎不用。
- 1~正无穷的整数 :选中对应序号的子元素。
- 2n 或 even :选中序号为偶数的子元素。
- 2 n+1 或 odd :选中序号为奇数的子元素。
- -n+3 :选中的是前3个。
- 了解即可:
- :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
- :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
- :only-child 选择没有兄弟的元素(独生子女)。
- :only-of-type 选择没有同类型兄弟的元素。
- : root 根元素。
- : empty 内容为空元素(空格也算内容)。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_1</title>
<style>
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) —— 看结构1 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) —— 看结构2 */
/* div>p:first-child {
color: red;
} */
/* 选中的是div的后代p元素,且p的父亲是谁无所谓,但p必须是其父亲的第一个儿子(按照所有兄弟计算的) —— 看结构3 */
/* div p:first-child {
color: red;
} */
/* 选中的是p元素,且p的父亲是谁无所谓,但p必须是其父亲的第一个儿子(按照所有兄弟计算的) —— 看结构3 */
p:first-child {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三:98分</span>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div> -->
<!-- 结构3 -->
<p>测试1</p>
<div>
<p>测试2</p>
<marquee>
<p>测试3</p>
<p>张三:98分</p>
</marquee>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_2</title>
<style>
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的)—— 结构1*/
/* div>p:first-child {
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有兄弟计算的)—— 结构1*/
/* div>p:last-child {
color: red;
} */
/* 选中的是div的第n个儿子p元素(按照所有兄弟计算的)—— 结构1 */
/* div>p:nth-child(3) {
color: red;
} */
/* 选中的是div的偶数个儿子p元素(按照所有兄弟计算的)—— 结构2 */
/* 关于n的值 —— 结构2:
1. 0或不写:什么都选不中 —— 几乎不用。
2. n :选中所有子元素 —— 几乎不用。
3. 1 ~ 正无穷的整数,选中对应序号的子元素。
4. 2n 或 even :选中序号为偶数的子元素。
5. 2n+1 或 odd :选中序号为奇数的子元素。
6. -n+3 : 选中前三个。
*/
/* div>p:nth-child(2n) {
color: red;
} */
/* 选中的是div的第一个儿子p元素(按照所有同类型兄弟计算的)—— 结构3 */
/* div>p:first-of-type{
color: red;
} */
/* 选中的是div的最后一个儿子p元素(按照所有同类型兄弟计算的)—— 结构3 */
/* div>p:last-of-type{
color: red;
} */
/* 选中的是div的第n个儿子p元素(按照所有同类型兄弟计算的)—— 结构3 */
/* div>p:nth-of-type(5) {
color: red;
} */
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
</div> -->
<!-- 结构2 -->
<!-- <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> -->
<!-- 结构3 -->
<!-- <div>
<span>测试1</span>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<span>测试2</span>
<p>赵六:68分</p>
<span>测试3</span>
<p>孙七:58分</p>
<span>测试4</span>
<p>老八:48分</p>
<span>测试5</span>
</div> -->
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_结构伪类_3</title>
<style>
/* 选中div中倒数第n个的儿子p元素(按照所有兄弟)—— 看结构1 */
/* div>p:nth-last-child(3) {
color: red;
} */
/* 选中div中倒数第n个的儿子p元素(按照所有同类型的兄弟)—— 看结构1 */
/* div>p:nth-last-of-type(2) {
color: red;
} */
/* 选中的是没有兄弟的span元素 —— 看结构2 */
/* span:only-child {
color: red;
} */
/* 选中的是没有同类型兄弟的span元素 —— 看结构2 */
/* span:only-of-type {
color: red;
} */
/* 选中的是根元素 */
/* :root {
background-color: gray;
} */
/* 选中的是没有内容的div元素 */
/* div:empty {
width: 100px;
height: 100px;
background-color: red;
} */
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<span>测试1</span>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
<span>测试2</span>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
<p>孙七:58分</p>
<p>老八:48分</p>
</div> -->
<!-- 结构3 -->
<div> </div>
</body>
</html>
三、否定伪类:
:not(选择器) 排除满足括号中条件的元素。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_否定伪类</title>
<style>
/* 选中的是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;
}
</style>
</head>
<body>
<div>
<p>张三:98分</p>
<p>李四:88分</p>
<p>王五:78分</p>
<p>赵六:68分</p>
<p class="fail" title="你要加油啊!孙七">孙七:58分</p>
<p class="fail" title="你要加油啊!老八">老八:48分</p>
</div>
</body>
</html>
四、UI伪类:
- :checked 被选中的复选框或单选按钮。
- :enable 可用的表单元素(没有 disabled 属性)。
- :disabled 不可用的表单元素(有disabled 属性)。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_UI伪类</title>
<style>
/* 选中的是勾选的复选框或单选按钮 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>
五、目标伪类(了解)
:target 选中锚点指向的元素。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_目标伪类</title>
<style>
div {
background-color: gray;
height: 300px;
}
div:target {
background-color: green;
}
</style>
</head>
<body>
<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>
</body>
</html>
六、语言伪类(了解)
:lang() 根据指定的语言选择元素(本质是看lang 属性的值)。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器_语言伪类</title>
<style>
div:lang(en) {
color: red;
}
:lang(zh-CN) {
color: green;
}
</style>
</head>
<body>
<div>北京</div>
<div lang="en">上海</div>
<p>前端</p>
<span>你好</span>
</body>
</html>