详解CSS3中的选择器（一）基本选择器

深藏阁楼爱情的钟 2023-02-14 13:07 84阅读 0赞

## 什么是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;} 
              </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; }