伪类选择器
目录
概述
用来表示定位元素的某种状态所显示的样式
语法结构
选择器:伪类 {
属性 : 属性值;
}
允许在一个选择器上编写多个伪类选择器
伪类选择器
伪类选择器的种类
- 动态伪类选择器
通常与
<a>元素配合使用,用来表示用户的某种行为状态
- 目标伪类选择器
通常与
<a>元素配合使用,用来表示当前HTML页面唯一一个目标元素
- 元素状态伪类选择器
常与表单组件元素配合使用，用来表示表单组件的某种状态。
- 结构伪类选择器
常与
<table>元素配合使用，利用 HTML 元素之间的关系定位目标元素。
- 否定伪类选择器
用来定位与指定选择器不匹配的 HTML 元素。
否定伪类选择器
选择器1:not(选择器2){
属性 : 属性值;
}
配置选择器1但不匹配选择器2
- 例 不配置body标签下的div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>练习</title>
<style>
body :not(div) {
color: red;
}
</style>
</head>
<body>
<p>这是p</p>
<p>这是p</p>
<div>这是div</div>
</body>
</html>
-
代码效果
image.png
-
:not()伪类不能被嵌套，但是可以采用交集选择器，即:not():not():not() - 可以利用这个伪类提高规则的优先级。
-
:not(.foo)将匹配任何非.foo的元素，包括<html>和<body>。:not(*)则不会配置任何元素
