一、CSS选择器常见的有几种?
1.基本选择器
2.通配选择器~选择文档中所有的html元素，用一个*表示
3.元素选择器~选择指定类型的的html元素
4.ID选择器~选择指定ID属性值为"id"的html元素，选择的时候前面加上一个#号
5.类选择器~选择指定class属性值为"class"的任意多个html元素，选择的时候前面加上一个.号
二、层次选择器
1.多选择器 E,F~选择匹配E元素，F元素
2.后代选择器 E F~选择匹配E元素下的F元素
3.子孙选择器 E > F~选择匹配E元素下的直接子元素F
4.相邻兄弟选择器 E + F~选择匹配E元素后的直接相邻元素F
5.通用相邻选择器 E ~ F~选择匹配E元素后的所有同级元素F
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*通配选择器*/
*{
margin: 0;
padding: 0;
}
/*元素选择器*/
ul{
list-style: cricle;
}
/*ID选择器*/
#header{
height: 200px;
}
/*类选择器*/
.intro{
float: right;
}
/*多元素选择器*/
.content h3,.content ul{
font-size: 16px;
}
/*后代选择器*/
.nav li{
height: 100px;
}
/*子孙选择器 */
.content > ul{
float: left;
}
/*相邻兄弟选择器 */
.intro + p{
font-weight: bold;
}
/*通用相邻选择器 */
.intro ~ p{
color: red;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>基本选择器</li>
<li>层次选择器</li>
<li>伪类选择器</li>
<li>伪元素</li>
<li>属性选择器</li>
</ul>
</div>
<div id="content">
<h3>css选择器~基本选择器</h3>
<ul class="intro">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="footer">
<p>我是底部我是底部！！！！</p>
</div>
</body>
</html>