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

最新推荐文章于 2024-07-11 18:05:14 发布

「已注销」

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量2.8k

点赞数

分类专栏： CSS3技术详解文章标签： css3

本文链接：https://blog.csdn.net/weixin_42071117/article/details/106506330

版权

CSS3技术详解专栏收录该内容

3 篇文章 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;} <!-- 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; }

群组选择器

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

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解CSS3中的选择器（一）基本选择器

什么是CSS选择器认识CSS选择器写过Web页面的童鞋都知道，要使某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。CSS3选择器的分类CSS3在CSS2.1的基础上加了较多类型的选择器，比如属性选择器、伪类选择器等等。CSS3的选择器共有五种，具体如下：基本选择器层次选择器伪类选择器伪元素属性选择器下面我们就详细介绍下。基本选择器基本选择器是最古老，也是使用最多的选择器。它分为五种，如下：通配选择器(*)元素选择器(
复制链接

扫一扫

专栏目录