本文通过一个实例展示了如何使用CSS选择器来为不同元素应用样式。包括元素选择器、ID选择器、类选择器等，帮助读者理解并掌握CSS选择器的基本用法。
<!DOCTYPE html>
<html>
<head>
<title>基本选择器使用</title>
<style>
*{margin:0;padding: 0}
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc; padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left;height:20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #36;color: green;margin-right: 5px;}
.demo *{background: orange}
/*--元素选择器*/
ul{background: grey}
/*--id选择器*/
#first{background: lime;color: #000}
#last{background: #000000;color: lime}
/*类选择器*/
.item{background: green;color:#fff;font-weight: bold}
.item.important{background: red}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="last" id="last">9</li>
</ul>
</body>
</html>
<html>
<head>
<title>基本选择器使用</title>
<style>
*{margin:0;padding: 0}
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc; padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left;height:20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #36;color: green;margin-right: 5px;}
.demo *{background: orange}
/*--元素选择器*/
ul{background: grey}
/*--id选择器*/
#first{background: lime;color: #000}
#last{background: #000000;color: lime}
/*类选择器*/
.item{background: green;color:#fff;font-weight: bold}
.item.important{background: red}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="last" id="last">9</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
