详解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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录