前端——高级选择器

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>