欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

详解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; }

群组选择器

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

上一篇: HTML5基本结构

下一篇: html/css3