CSS选择器详解

来源：互联网发布：国网天津物资大数据编辑：程序博客网时间：2024/05/19 13:28

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一些常用的选择器，当然还有一些其他的选择器，如伪元素选择器等，在此不再举例，小编才疏学浅，请大牛们不吝赐教。

0 0