css中包括：元素选择器、通用（*）选择器、类（class）选择器、id选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟元素选择器、兄弟元素选择器等，如下例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {border:1px solid red;position:relative;padding:5px;margin:5px}/*元素选择器 ：选择所有div元素*/
div *{border:1px solid red;position:relative;padding:5px;margin:5px}/*通用选择器：选择div的所有子元素 ，尽量少用*/
ul{list-style-position:inside;list-style-type:decimal;}
.ul1{border:1px solid green;}/*类选择器：选择class='"ul1"的元素 */
#ul2{border:1px solid blue;}/*id选择器：选择id="ul2"的元素 */
.ul1 li{text-decoration:underline;}/*后代元素选择器：选择class="ul1"的元素的所有后代li元素*/
.ul1>li{color:red;}/*子元素选择器：选择class="ul1"的元素的相邻后代li元素,ul2中的li不会选择 */
#ul2+li{border:1px solid blue;}/*相邻兄弟元素选择器：选择id="ul2"的元素之后的相邻兄弟li元素 */
#ul2~li{color:gray}/*兄弟元素选择器：选择id="ul2"的元素之后的所有兄弟li元素 */
p[id]{font-weight:bold;}/*属性元素选择器：选择含有属性id的所有p元素 */
p[id="p1"]{border:1px solid blue;}/*属性元素选择器：选择属性id="p1"的元素 */
p[id^="p2"]{color:green}/*属性id的值以"p2"开头的元素*/
p[id$="2"]{font-size:30px;}/*属性id的值以"2"结尾的元素*/
p[id*="p"]{text-decoration:overline;}/*属性id的值包含"p"字符串的元素*/
</style>
</head>
<body>
<div>
This is a div1.
<ul class="ul1">
This is a ul1.
<li id="li1" class="li11">This is li1.</li>
<li id="li2" class="li22">
This is li2.
<p id="p1">This is paragraph p1.</p>
<p >This is paragraph p2.</p>
</li>
<ul id="ul2">
<li id="li3" >This is paragraph li3.</li>
<li id="li4">
This is li4.
<p id="p2">This is paragraph p3.</p>
<p >This is paragraph p4.</p>
</li>
</ul>
<li id="li5">This is li5.</li>
<li id="li6">This is li6.</li>
<li id="li7">This is li7.</li>
</ul>
</div>
</body>
</html>
CSS选择器详解一
最新推荐文章于 2025-11-05 22:14:47 发布
本文详细介绍了CSS中的多种选择器类型，包括元素选择器、通用选择器、类选择器、ID选择器、属性选择器等，并通过实例展示了这些选择器如何应用于HTML元素中。
扫一扫
7251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
