伪类选择器
- 动态伪类
- UI元素状态伪类
- CSS3结构类
- 否定选择器
- 伪元素
动态伪类
这些伪类并不存在于HTM中，只有当用户和网站交互的时候才能体现出来
- 锚点伪类 :link :visited
- 用户行为伪类 :hover :active :focus（获取鼠标焦点）
UI元素状态伪类（CSS3新增）
我们把:enabled,:disabled,:check伪类称为UI元素状态伪类 兼容IE9以上 check只兼容OPera
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{width: 200px;height: 30px;border: 1px solid #f00;}
/*不可编辑*/
input:disabled{background: #abcdef;border: 1px solid green;}
/*可编辑*/
input:enabled{width: 200px;height: 30px;border: 1px solid yellowgreen;}
</style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
CSS3结构类（nth选择器）
选择方法
- first-child 选择属于其父元素的首个子元素的每个Element元素，并为其设置样式 兼容IE8以上
- last-child 指定属于父元素的最后一个子元素的Element元素样式 兼容IE8以上
- nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型 兼容IE9以上 （关于参数n n是一个简单的表达式，取值从0开始，这里只能是n，不能使用其他字符 odd(奇数) even（偶数）
- nth-last-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型，从最后一个子元素开始计数 兼容IE9以上
- nth-of-type(N) 选择器匹配属于父元素的特定类型的第N个子元素的每个元素 兼容IE9以上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div:nth-of-type(2){color: red}
</style>
</head>
<body>
<div>0-1</div>
<section>
<div>1-1</div>
<div>2-1</div>
<div>3-1</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</section>
</body>
</html>
- nth-last-of-type(N) 选择器匹配属于父元素的特定类型的第N个子元素的每个元素 从最后一个元素开始匹配 兼容IE9以上
- first-of-type 选择器匹配属于其父元素特定类型的首个子元素的每个元素 兼容IE9以上
- last-of-type 选择器匹配属于其父元素特定类型的最后一个子元素的每个元素 兼容IE9以上
- only-child 选择器匹配属于其父元素唯一子元素的每个元素 兼容IE9以上
- only-of-type 择器匹配属于父元素的特定类型的唯一子元素的每个元素 兼容IE9以上
- empty 选择器匹配没有子元素（包括文本节点）的每个元素 兼容IE9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{height: 30px;width: 200px;background: #abcdef;margin-top: 10px;}
div:empty{background: red}
</style>
</head>
<body>
<div></div>
<div>second</div>
<div>Third</div>
</body>
</html>
否定选择器（not）
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
语法格式
父元素：not(子元素/子选择器) 兼容IE9
原
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;border: none;}
nav{width: 800px;margin: 0 auto}
a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
nav > a{display: block;border-right: 1px solid red}
</style>
</head>
<body>
<nav>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
</nav>
</body>
</html>
改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;border: none;}
nav{width: 800px;margin: 0 auto}
a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
nav > a:not(:last-of-type){display: block;border-right: 1px solid red}
</style>
</head>
<body>
<nav>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
<a href="#">我是导航</a>
</nav>
</body>
</html>
时间： 2024-10-08 15:25:25