CSS选择器详解
css样式表可以将数据逻辑与显示逻辑分离，从而提高文件的可读性，除此之外，css还可以提供其他的显示方式。css选择器是css发挥强大作用的基础，下面我对css选择器做了一个简单的总结。
元素选择器
<span style="font-size:18px;"><strong>html：
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>元素选择器</title>
</head>
<body>
<form id="form1" runat="server">
<div>
div内的文字
</div>
</form>
</body>
</html>
css：
div {
background-color:grey;
font:italic
}
</strong></span>
属性选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>属性选择器</title>
</head>
<body>
<form id="form1" runat="server">
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx字符串的div元素</div>
<div id="xxyy">id属性以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</form>
</body>
</html>
Css:
/*元素选择器，选择div元素*/
div {
background-color:grey;
font:italic
}
/*选择带有id属性的div元素*/
div[id] {
background-color:#aaa;
}
/*选择id属性包含xx的div元素*/
div[id*=xx] {
background-color:#999;
}
/*选择id属性以xx开头的div元素*/
div[id^=xx] {
background-color:#555;
}
/*选择id属性等于xx的div元素*/
div[id=xx] {
background-color:#111;
}
</strong></span>
ID选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>ID选择器</title>
</head>
<body>
<form id="form1" runat="server">
<div id="xx">id属性值为xx的div元素</div>
</form>
</body>
</html>
Css:
/*选择id为xx的元素*/
#xx {
background-color:#ffd800;
}
</strong></span>
class选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>类选择器</title>
</head>
<body>
<form id="form2" runat="server">
<div class="myclass">class属性为myclass的div元素</div>
<p class="myclass">class属性为myclass的p元素</p>
</form>
</body>
</html>
css：
/*选择所有class为没有class的元素*/
.myclass {
width:240px;
height:40px;
background-color:#808080;
}
/*选择class为myclass的div元素*/
div.myclass {
border:2px dotted black;
background-color:#ffd800;
}
</strong></span>
包含选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>类选择器</title>
</head>
<body>
<form id="form2" runat="server">
<div>没有任何属性的div元素</div>
<div><section><div class="a">处于div之内且class属性为a的元素</div></section></div>
<p class="a">没有处于div之内class属性为a的元素</p>
</form>
</body>
</html>
Css:
/*选择所有的div元素*/
div {
width:350px;
height:60px;
background-color:#ff0000;
margin:5px;
}
/*选择class属性为a的div元素*/
div .a {
width:200px;
height:35px;
border:2px dotted black;
background-color:#b6ff00;
}
</strong></span>
子选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>类选择器</title>
</head>
<body>
<form id="form2" runat="server">
<div>没有任何属性的div元素</div>
<div><P class="a">class属性为a且是div子节点的元素</P></div>
<div><section><P class="a">class属性为a且处于div内部的元素</P></section></div>
</form>
</body>
</html>
Css:
/*选择所有的div元素*/
div {
width:350px;
height:60px;
background-color:#ff0000;
margin:5px;
}
/*选择class属性为a的div元素的直接子元素*/
div >.a {
width:200px;
height:35px;
border:2px dotted black;
background-color:#b6ff00;
}
</strong></span>
注意：包含选择器与子选择器有点相似，但他们之间是有区别的，对于包含选择器来说，只要目标选择器位于外部选择其对应的元素的内部，即使是孙子元素也可以，儿对于子选择器来说，要求目标选择器必须作为外部选择器对应的元素的直接子元素才行。
兄弟选择器
<span style="font-size:18px;"><strong><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/test.css" rel="stylesheet" />
<title>类选择器</title>
</head>
<body>
<form id="form2" runat="server">
<div>没有任何属性的div元素</div>
<div class="long">class属性为long的div元素</div>
<div id="android">id为android的div元素</div>
<p class="long">class属性为long的p元素</p>
<div class="long">class属性为long的div元素</div>
</form>
</body>
</html>
css：
/*选择id为android的元素后面，class属性为long的兄弟节点*/
#android ~ .long {
background-color:#ffd800;
}
</strong></span>
这里是css一些常用的选择器，当然还有一些其他的选择器，如伪元素选择器等，在此不再举例，小编才疏学浅，请大牛们不吝赐教。