CSS选择器详解

最新推荐文章于 2020-06-22 17:23:39 发布

z-xiaoyao

最新推荐文章于 2020-06-22 17:23:39 发布

阅读量720

点赞数

分类专栏： ● B/S篇 --------【css】文章标签： css web html

本文链接：https://blog.csdn.net/zt15732621796/article/details/51711312

版权

● B/S篇同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

--------【css】

1 篇文章 0 订阅

订阅专栏

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

z-xiaoyao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
31
评论
CSS选择器详解

css样式表可以将数据逻辑与显示逻辑分离，从而提高文件的可读性，除此之外，css还可以提供其他的显示方式。css选择器是css发挥强大作用的基础，下面我对css选择器做了一个简单的总结。元素选择器html：元素选择器 div内的文字 css：div { background-colo
复制链接

扫一扫