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>