1.属性选择器
2.伪类选择器
- hover 鼠标悬停状态
- active 鼠标点击状态
- focus 获取焦点状态 input使用
- checked 点击勾选状态 只能单选和多选使用
示例1：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {float: left;width: 100px;height: 100px;background-color: red;}/* :hover 鼠标悬停到触发状态 发生改变 */.box:hover{width: 200px;height: 200px;background-color: green;}.wrap {float: left;width: 400px;height: 400px;background-color: pink;/* 元素消失 */display: none;/* margin-left: 100px; */}/* 我鼠标悬停到 box盒子 然后让我的同级元素盒子wrap显示出来 */.box:hover~.wrap {display: block;}/* 鼠标放到 wrap区域 显示出来 */.wrap:hover {display: block;}/* 点击状态 点击触发效果 */.text {width: 200px;height: 200px;background-color: red;}/* 点击状态触发伪类效果 */.text:active {background-color: orange;/* 圆 */border-radius: 50%;}</style></head><body><div class="box">点我有惊喜</div><div class="wrap"></div><div class="text"></div></body></html>鼠标放上去效果左和点击效果右
示例2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 500px;height: 500px;border: 1px solid green;}.pic {display: none;width: 400px;height: 350px;}.rad1:checked~.pic {display: block;}.radbox {float: left;height: 500px;background: url(./1.jpg)no-repeat 0/cover;border: 1px solid #ccc;}.radio {width: 100px;height: 500px;/* 透明度 */opacity: 0;}.radio:checked {width: 1000px;height: 500px;}</style></head><body><div class="box1"><input type="radio" class='rad1'>点一下圈圈，有惊喜哦<img src="./1.jpg" alt="" class='pic'></div></body></html>未触发选择器前（左）触发后（右）
3.结构选择器
- 子元素选择器 通过父级去找子级 (满足是父子关系)
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* :nth-child 子元素选择器 通过父级结构去找 子级添加样式 *//* 需求: 135 是红色 246 是绿色 *//* 奇数 odd 2n-1 */.list>li:nth-child(2n-1){color: red;}/* 偶数 even 2n */.list>li:nth-child(even){color: green;}/* 选择第一个子元素 */.list>li:first-child{color: skyblue;}/* 选择最后一个 */.list>li:last-child{color: purple;}</style>
</head>
<body><ul class="list"><li>第1个li子元素</li><li>第2个li子元素</li><li>第3个li子元素</li><li>第4个li子元素</li><li>第5个li子元素</li><li>第6个li子元素</li></ul></body>
</html>效果：
- 同类别选择器 兄弟选择器
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* nth-of-type: 同类别选择器 无视其它元素的影响 *//* 奇数 */.box>p:nth-of-type(odd){color: orange;}/* 偶数 */.box>p:nth-of-type(even){color: brown;}/* 选择第一个兄弟 */.box>p:first-of-type{color: pink;}/* 选择最后一个兄弟元素 */.box>p:last-of-type{color: purple;}</style>
</head>
<body><div class="box"><p>英雄联盟</p><b>我的世界</b><p>原神</p><span>俄罗斯方块</span><p>魔兽</p><p>逆水寒</p><span>永劫无间</span></div>
</body>
</html>效果：
4.伪元素选择器
示例
<style>
/* 用伪元素 在内容前面插入 */
.box::before{
/* 伪元素必备 开启的一把key 钥匙 */
content: '老师说:';
float: left;
width: 100px;
height: 100px;
background-color: green;
color: red;
display: none;
}
/* 伪元素可以被伪类选择器选中 */
.box:hover:before{
display: block;
}
/* 用伪元素 在内容后面插入 */
.box::after{
/* 伪元素内容 */
content: '以后都要认认真真搞学习了';
color: pink;
}
</style>