1、选择器
群组选择器:同时匹配共同的样式,元素与元素之间用逗号隔开;
后代选择器:同时匹配A元素的后代B元素,两元素之间用空格隔开;
子元素选择器:匹配A元素的子代B元素,两元素之间用大于隔开;
毗邻选择器:B元素紧跟随着A元素,两元素之间用 + 隔开
2、属性的选择器
attr:属性
val:属性值
[ attr ]:所匹配具有这个属性的元素;
[ attr=val ]:所匹配具有这个属性而且属性值为val的元素
[ attr^=val ]:所匹配以attr属性值为val开头
[ attr$=val ]:所匹配以attr属性值为val结尾
3、伪类选择器
- :link 未被点击过的
- :hover 鼠标划过的样式
- :active 鼠标点击未松开的样式
- :visited 鼠标点击过后的样式
hover伪类选择器
鼠标划入父级div,子元素的样式会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.mydiv{
width:800px;
height:500px;
border:5px solid #0f0;
margin:50px auto 0;
}
/* .mydiv:hover{
border:5px solid red;
background-color:yellow;
} */
.mydiv:hover .mydiv1{
border:5px solid #000;
background-color: #f00;
}
.mydiv1{
width:400px;
height:400px;
border:5px solid #0ff;
margin:50px auto 0;
}
</style>
</head>
<body>
<div class='mydiv'>
<div class="mydiv1"></div>
</div>
</body>
</html>
4、display
display:none;样式消失
样式是完全消失,不会在我们页面中占位置;
若想让样式显示的话用display:block;