详解CSS3中的选择器（一）基本选择器
程序员文章站
2022-05-11 09:06:03
...
什么是CSS选择器
认识CSS选择器
写过Web页面的童鞋都知道，要使某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。
CSS3选择器的分类
CSS3在CSS2.1的基础上加了较多类型的选择器，比如属性选择器、伪类选择器等等。CSS3的选择器共有五种，具体如下：
- 基本选择器
- 层次选择器
- 伪类选择器
- 伪元素
- 属性选择器
下面我们就详细介绍下。
基本选择器
基本选择器是最古老，也是使用最多的选择器。它分为五种，如下：
- 通配选择器(*)
- 元素选择器(E)
- ID选择器(#id)
- 类选择器(.class)
- 群组选择器(selector1,…,selectorN)
我们先来看下面的一个html页面。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charsert="utf-8">
<title>使用CSS3基本选择器</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-right:5px;} <!-- 元素选择器 -->
#first {color:red;} <!-- ID选择器 -->
</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>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; }
.demo * { background-color: orange; }
元素选择器
元素选择器用于匹配特定的标记，比如：
li { list-style: none; outside: none; float: left; height: 20px; }
ID选择器
ID选择器具有唯一性，因为在单个HTML中，ID是唯一的。比如：
#first { background-color: lime; color: #000; }
类选择器
HTML中一个类可以出现在多个标记中。而且一个标记中可以出现多个类名。所以有两种形式的类选择器，一种是单一的形式，比如：
.item { background-color: green; }
一种是多类形式，比如：
.item .important { background-color: red; }
群组选择器
群组选择器将具有相同样式的元素分组在一起，每个选择器之间用逗号隔开。群组选择器中的选择器可以是不同类型的。