详解CSS3中的选择器(一)基本选择器

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

群组选择器

群组选择器将具有相同样式的元素分组在一起,每个选择器之间用逗号隔开。群组选择器中的选择器可以是不同类型的。

你可能感兴趣的:(CSS3技术详解)