一、CSS選擇器常見(jiàn)的有幾種?
1.基本選擇器
2.通配選擇器~選擇文檔中所有的html元素迹缀，用一個(gè)*表示
3.元素選擇器~選擇指定類型的的html元素
4.ID選擇器~選擇指定ID屬性值為"id"的html元素粹排，選擇的時(shí)候前面加上一個(gè)#號(hào)
5.類選擇器~選擇指定class屬性值為"class"的任意多個(gè)html元素种远，選擇的時(shí)候前面加上一個(gè).號(hào)
二、層次選擇器
1.多選擇器 E,F~選擇匹配E元素顽耳，F(xiàn)元素
2.后代選擇器 E F~選擇匹配E元素下的F元素
3.子孫選擇器 E > F~選擇匹配E元素下的直接子元素F
4.相鄰兄弟選擇器 E + F~選擇匹配E元素后的直接相鄰元素F
5.通用相鄰選擇器 E ~ F~選擇匹配E元素后的所有同級(jí)元素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>