要使某个样式应用于HTML元素,首先需要找到该元素,在CSS中执行这一任务的表现规则称为CSS选择器。
CSS3选择器有如下几种:
本文讨论基本选择器,通过基本选择器可以确定HTML树形结构中大多数的DOM元素,分为如下几类
选择器 | 类型 | 功能描述 |
---|---|---|
* | 通配选择器 | 选择文档中所有的HTML元素 |
E | 元素选择器 | 选择指定类型的HTML元素 |
#id | ID选择器 | 选择指定ID属性为"id"的任意类型元素 |
.class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 |
selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
从浏览器兼容性上来说,浏览器对基本选择器都是支持的。
下面用代码样例看一下基本选择器的使用,创建一个HTML文件,如下:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS基本选择器</title>
<style type="text/css">
* {margin: 0; padding: 0}
.clearfix:after,.clearfix:before{display: table;content: ""}
.clearfix:after{clear: both;overflow: hidden}
.demo {width: 250px; border:1px solid #ccc; 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: #f36; color: green; margin-left: 5px;}
</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>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
显示效果如下:
通配选择器:
通配选择器可以用来选择所有元素,也可以选择某个元素下的所有元素,例如:
* {margin: 0; padding: 0;}
表示将所有元素的margin和padding设置为0,下面,将上述html文件中所有项的背景颜色设置为orange
在上述HTML文件CSS样式的最后添加如下代码:
.demo *{background:orange}
显示效果如下:
元素选择器:
元素选择器是CSS中最常见,最基本的选择器,文档的元素包括HTML,body,p,div,ul,li等,下面通过ul元素选择器改变整个列表的背景颜色,在上述HTML CSS代码的最后增加如下语句:
ul {background:grey}
显示效果如下:
ID选择器:
在使用ID选择器之前,需要在HTML文档中给对应的元素设置id属性并设置其值,才能找到对应的元素,ID选择器具有唯一性,在一个页面不会出现id相同的属性值。
在CSS中使用id选择器时,需要在id属性值得前面加上#号,如#id,下面使用ID选择器来修改li中id为first和last的表象的背景颜色和前景颜色:
在CSS代码后面增加如下代码:
#first {background:lime;color:#000}
#last {background:#000;color:lime}
显示效果如下:
类选择器:
类选择器在一个页面中可以由多个相同的类名,而ID选择器其ID值在整个页面中是唯一的一个,在HTML的CSS代码最后增加对class值为item的元素代码,修改其背景颜色,字体颜色和加粗,如下:
.item {background:green;color:#fff;font-weight:bold}
显示效果如下:
类选择器还有一种用法就是多类选择器,通过两个或者两个以上类选择器合并,来定义有别于一个类名的元素效果,例如,在CSS代码最后增加如下样式:
.item.important {background:red}
显示效果如下:
即,只会修改同时具有item和important两个class的元素,缺一不可。
CSS选择器还支持带标签名的类选择器,例如只修改ul标签中class为block的元素的背景颜色,可以增加如下CSS样式:
ul.block {background:#ccc;}
群组选择器:
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间用逗号分开,例如,刚好有好几个选择器需要将对应的元素的文字设置为灰色的时候,可以写为类似如下形式:
h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; }
这样写起来比较简洁。
参考资料: