万字详解CSS中的基础选择器

最新推荐文章于 2023-02-28 01:30:00 发布
最新推荐文章于 2023-02-28 01:30:00 发布
阅读量183 收藏 3
点赞数 1
分类专栏： 从头学前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46163658/article/details/119810822
版权

Hello 大家好，我是彼岸繁華🌸，一个坚信努力可以改变命运的前端👨🏻‍💻，如果有幸写的文章可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第十七篇-《CSS基本选择器的用法》

编写不易转载请获得允许

写在前面

本篇文章将来学习CSS中的选择器，通过本篇文章可以掌握什么内容呢？如下图：

00_导读.png

本篇文章大概万字，阅读完大概会花费半小时的时间，建议点赞收藏慢慢读。

CSS选择器概述

什么是选择器

CSS选择器 的作用是按照CSS规则定位HTML页面的一个或多个元素 。浏览器在解析HTML页面时，会根据CSS规则中的选择器定位HTML页面的元素，并为对应的元素设定样式。

CSS选择器作为CSS中的支柱，其作用好比人类的脊柱，与THML结构、浏览器行为、用户行为都相互依存相互作用，这就导致CSS选择器是非常重要的一个部分。

这里的 “选择器 ” 指的就是平常使用的CSS声明块前面的标签、类名等。如下代码所示：

div {
  color: lightcoral;
    font-size: 24px;
}

这里的div就是一个选择器。

选择器的分类

CSS从第一版本发展到第三版本，导致CSS选择器的种类越来越复杂。目前，CSS选择器的分类具体如下：

  • 基本选择器：共有5个基本选择器，是CSS选择器的最为基本的用法。

  • 层级选择器：共有4个层级选择器，是根据HTML元素之间的关系来定位HTML元素。

  • 组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。

  • 伪类选择器：允许未包含在HTML页面中的状态信息选定位HTML元素。

  • 伪元素选择器：定位所有未被包含HTML的实体。

选择器的优先级别

CSS选择器的优先级别有着严格的规定，我们可以将其划分为0~5这6个级别，在这6个级别中，前4个的等级由CSS选择器决定，后两个等级由我们书写的形式和特性语法决定。具体如下所示

  • 0级：通配符选择器优先级为0 (通配选择器写作星号 * )。代码如下所示：

    * {
    color: #000; 
}

  • 1级：类型（元素）选择器的优先级为1

  • 2级：类选择器和属性选择器的优先级为10

  • 3级：ID选择器的优先级为100

  • 4级：内联样式的优先级为1000

  • 5级：!important 特殊规则

    !important是选择器优先级比较特殊的存在，优先级别为最高。值得注意的是 ，使用!important会破坏原有的选择器类型权重规则

基本选择器

CSS的基本选择器 是选择器所有种类中最为基础的用法，基本选择器 共有5种具体用法，如下：

  • 类型选择器/元素选择器

  • 类选择器

  • ID选择器

  • 通用选择器/通配符选择器

  • 属性选择器

类型选择器

类型选择器 又称为元素选择器 ，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。

语法结构如下所示：

元素名 {  
  属性 : 属性值;  
 }

值得注意是 类型选择器的元素名是不区分大小写的。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型选择器</title>
    <style>
        /* 选择标签名为 h1 的元素，设置字体的颜色为红色 */
        h1 {
            color: lightcoral;
        }
    </style>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
</body>

</html>

代码运行结果如下图所示：

01_类型选择器.png

类型选择器是最简单的一个选择器，直接通过元素名来使用。

类选择器

类选择器 是通过HTML元素的class属性的值定位具体HTML元素。这种基本选择器的用法是 .类名形式。

语法结构如下所示：

.类名 {
  属性 : 属性值;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 设置所有带有 title 类名的元素 */
        .title {
            color: lightsalmon;
        }
    </style>
</head>

<body>
    <!-- 为 h1 h2 h3 元素增加一个 title 的类名，可以通过类选择器统一控制 -->
    <h1 class="title">一级标题</h1>
    <h2 class="title">二级标题</h2>
    <h3 class="title">二级标题</h3>
</body>

</html>

代码运行结果如下图所示：

02_类选择器.png

下图展示了类选择器的分析结构：

03_类选择器的分析结构.png

在HTML中可以为一个元素添加多个类名，示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .title {
            color: lightsalmon;
        }

        /* 任意选择一个类名设置即可 */
        .h3 {
            color: lawngreen;
        }
    </style>
</head>

<body>
    <h1 class="title">一级标题</h1>
    <h2 class="title">二级标题</h2>
    <!-- 多个类型通过空格进行分割 -->
    <h3 class="title h3">二级标题</h3>
</body>

</html>

代码运行结果如下图所示：

04_为元素设置多个类名.png

<h3>元素的字体与前面不一样的原因是因为相同优先级时，越靠后优先级越高。

ID选择器

ID选择器 和类选择器 类似，都是根据某个属性来匹配HTML元素的，类选择器匹配的是class选择器，而ID选择器匹配的是id属性。值得注意的是，ID属性在整个页面中是唯一不可重复的 。

语法结构如下：

#ID {
  属性 : 属性值;
}

用法与类选择器类似，这里不做赘述。只需要注意id属性唯一不可重复即可。

通用选择器

通用选择器 又称为通配符选择器 ，是一个星号（*），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及<script>、<style>、<title>等元素，但是不包括伪元素。

语法结构如下所示：

* {
  属性 : 属性值;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: lightskyblue;
        }

        /* 由于通配符选择器的优先级最低，可以随意覆盖 */
        p {
            color: #333;
        }
    </style>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>段落文本</p>
</body>

</html>

代码运行结果如下图所示：

05_通配符选择器.png

属性选择器

属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是 HTML 元素中id的属性值。

CSS中的属性选择器还可以分为两种，如下所示

  • 属性值直接匹配选择器

  • 属性值正则匹配选择器

接下来我们将分别讨论这两类属性选择器

属性值直接匹配选择器

属性值直接匹配选择器还可以分为4种，如下所示：

  • [attr]：表示属性名匹配

  • [attr= "value"]：表示键值对匹配

  • [attr~="value"]：表示是属性值单词完全匹配选择器，专门用来匹配属性中的单词，其中，～=用来连接属性和属性值。

  • [attr|="value"]：表示属性值起始片段完全匹配选择器，表示具有attr属性的元素，其值要么正好是value ，要么以value外加短横线-开头，|=用于连接需要匹配的属性和属性内容。

[attr]属性选择器

[attr]属性选择器是众多属性选择器中的最简单用法，其中attr表示的是HTML元素的属性名。[attr]属性选择器是通过HTML元素的attr属性名来定位一个或多个HTML元素，而不关注该属性的值是什么。

语法结构如下所示：

[attr] {
  属性 : 属性值;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 选中所有id属性 */
        [id] {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <h1 id="title1">白月初</h1>
    <h1 id="title2">东方月初</h1>
    <h1 id="title3">涂山苏苏</h1>
    <h1 id="title4">涂山红红</h1>
    <h1 id="title5">涂山雅雅</h1>
    <h1 id="title6">王权富贵</h1>
</body>

</html>

代码运行结果如下图所示：

06_属性选择器1.png

[attr=value]属性选择器

[attr=value]属性选择器是通过HTML元素的attr属性名属性值为value来定位一个或多个HTML元素。

语法结构如下所示：

[attr=value] {
  属性 : 属性值;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 选择 id 属性为 title1 的元素 */
        [id=title1] {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <h1 id="title1">白月初</h1>
    <h1 id="title2">东方月初</h1>
    <h1 id="title3">涂山苏苏</h1>
    <h1 id="title4">涂山红红</h1>
    <h1 id="title5">涂山雅雅</h1>
    <h1 id="title6">王权富贵</h1>
</body>

</html>

代码运行结果如下图所示：

06_属性选择器2.png

[attr~=value]属性选择器

[attr~=value]属性选择器是通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位一个或多个HTML元素。

[attr|=value]属性选择器

[attr|=value]属性选择器通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位一个或多个HTML元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 匹配所有id属性中包含 name4 的元素 */
        [class~=name4] {
            color: cornflowerblue;
        }

        /* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
        [class |="name"] {
            color: lawngreen;
        }
    </style>
</head>

<body>
    <h1 id="title1" class="name-1 title ">白月初</h1>
    <h1 id="title2" class="name2 title ">东方月初</h1>
    <h1 id="title3" class="name-3 title ">涂山苏苏</h1>
    <h1 id="title4" class="name4 title ">涂山红红</h1>
    <h1 id="title5" class="name-5 title ">涂山雅雅</h1>
    <h1 id="title6" class="name">王权富贵</h1>
</body>

</html>

代码运行结果如下图所示：

06_属性选择器3.png

属性值正则匹配选择器

属性值正则匹配选择器还可以分为3种，如下所示：

  • [attr^=val]属性选择器：通过HTML元素的attr属性名并且属性值是以 value 为开头 来定位具体HTML元素。

  • [attr$=val]属性选择器：通过HTML元素的 attr属性名并且属性值是**以 ** **value ** 为结束 来定位具体 HTML 元素。

  • [attr*=val]属性选择器：通过HTML元素的attr属性名并且属性值是包含 value 来定位具体HTML元素。

语法结构如下所示：

[attr^=value] {
  属性 : 属性值;
}
[attr$=value] {
  属性 : 属性值;
}

[attr*=value] {
  属性 : 属性值;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* 匹配以 name 开头的元素，设置字体颜色为蓝色 */
        [class ^=name] {
            color: blue;
        }

        /* 匹配以 human 结尾的元素，设置字体大小为 2.6rem */
        [class $=human] {
            font-size: 2.6rem;
        }

        /* 匹配包含 em 的元素，设置字体颜色为红色 */
        [class *=em] {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="name human">白月初</h1>
    <h1 class="name human">东方月初</h1>
    <h1 class="name demon">涂山苏苏</h1>
    <h1 class="name demon">涂山红红</h1>
    <h1 class="name demon">涂山雅雅</h1>
    <h1 class="name human">王权富贵</h1>
</body>

</html>

代码运行结果如下图所示：

06_属性选择器4.png

层级选择器

CSS层级选择器 是根据HTML节点树之间的关系提供的选择器用法，所以说如果想要很好的学习层级选择器 首先要搞清楚HMTL元素之间的关系是什么样子的。先看下面这段HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML测试代码</title>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <span></span>
        <button></button>
        <span></span>
    </div>
</body>

</html>

将如上代码可以画成如下节点树，如下图所示

07_HTML节点树.png

现在来我们看一个HTML元素之间的关系，在HTML页面中元素之间的关系存在着如下所示的三种关系：

  • 父级与子级之间的关系 ：在上述代码中，左边<div>元素是<p>元素的的父级元素，反之<p>是<div 的子级元素，当然这种父子结构还有跟多。

  • 兄弟之间的关系 ：在上述代码代码中，<p>元素和<p>元素是兄弟元素，<span>元素和<button> 元素也是兄弟元素。

  • 祖先与后代之间的关系 ：在上述代码代码中，<p>元素是<body>元素的后代元素，反之<body>元素是<p>元素的祖先元素。

层级选择器种类

根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法：

  • 后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。

  • 子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。

  • 相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素

  • 普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。

选择符

CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示

  • 表示后代关系的空格（）

  • 表示父子关系的尖括号（>）

  • 表示相邻兄弟关系的加号（+）

  • 表示兄弟关系的波浪号（~）

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
    <style>
        /* body下后代字体大小为28px */
        body .child {
            font-size: 28px;
        }

        /* body的子级div字体大小为34px */
        body>div {
            font-size: 34px;
        }

        /* 设置.child的兄弟元素字体颜色为红色 */
        .child1~.child {
            color: red;
        }

        /* 设置.child的响铃兄弟字体变粗 */
        .child1+.child {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- 
        目前结构中，我们将 body 元素作为祖先元素
        body与.parent为父子关系
        .parent与.child为父子关系
        body与.child为祖先关系
        .child1与.child2为相邻兄弟关系
        .child2与.child3为相邻兄弟关系
        .child1与.child3为普通兄弟关系
     -->
    <div class="parent">
        父级元素
        <div class="child child1">子级1</div>
        <div class="child child2">子级2</div>
        <div class="child child3">子级3</div>
    </div>
</body>

</html>

代码运行结果如下图所示：

08_层级选择器.png

组合选择器

组合选择器 是将之前学习的CSS选择器用法综合在一起的一种用法，从定位HTML元素的结果上可分为如下2种：

  • 组合（并集）选择器

  • 组合（交集）选择器

组合（并集）选择器

组合（并集）选择器 就是不同选择器的相同CSS声明合并在一起，从而得到更为简洁的样式表。例如如果要为<h1>至<h6>标题元素设定相同的背景颜色，可以如下示例代码所示：

h1 { color:blue; }
h2 { color:blue; }
h3 { color:blue; }
h4 { color:blue; }
h5 { color:blue; }
h6 { color:blue; }

这时我们可以看到上述CSS使用了类型选择器 ，但元素名称不同，并且CSS声明完全一致。那么，上述示例代码可以通过组合（并集）选择器 进行改写如下所示：

h1, h2, h3, h4, h5, h6 { color:blue; }

上述两段示例代码的作用是一致的，第二段示例代码展示的就是组合（并集）选择器 的用法。

组合（并集）选择器 是使用逗号（,）分隔不同的选择器，并为这些不同的选择器定义相同的CSS声明。组合（并集）选择器 的语法结构如下所示：

选择器1, 选择器2, ... ... {
  属性 : 属性值;
}

组合（交集）选择器

组合（交集）选择器 就是先通过第一个选择器定位HTML元素集，再通过第二个选择器从上述HTML元素集再次筛选定位HTML元素集，如此反复，直到最后一个选择器执行完毕。

例如如果我们要为所有class属性值为cls的<p>元素设定CSS样式的话，具体实现的代码如下所示：

p.cls {
  color: blueviolet;
}

如上述示例所示，展示了组合（交集）选择器 的用法。

组合（交集）选择器 在多个选择器之间不需要任何分隔符进行分隔 ，只需要将多个选择器依次编写即可 。组合（交集）选择器 的语法结构如下所示：

选择器1选择器2... ... {
  属性 : 属性值;
}

值得注意的是，组合（交集）选择器中多个选择器的执行顺序是按照编写的先后顺序执行的 。

伪元素选择器

CSS中伪元素选择器 的是在指定CSS选择器增加关键字。用来描述某个指定元素的特定部分设定样式。

语法结构如下所示：

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

现在应该都采用两个冒号的方式，除非你还兼容IE8。

::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>
</head>

<body>
    <p>这是一段测试内容</p>
</body>

</html>

代码运行结果如下图所示：

09_after和before.png

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

  • none：不会产生伪类元素。

  • normal：::before伪元素和::after伪类元素中会被视为 none。

  • text：文本内容。

  • url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>
</head>

<body>
    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>
</body>

</html>

代码运行结果如下图所示：

10_first-letter和first-line伪元素.png

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的，可以点击查看::first-letter、::first-line

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>
</head>

<body>
    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>
</body>

</html>

代码运行结果如下图所示：

11_selection伪元素.gif

伪类选择器

伪类选择器 是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法。伪类选择器 的具体用法就是向已有的选择器增加关键字，表示定位的HTML元素的状态信息。

例如:hover伪类选择器可以用来在用户将鼠标悬停在按钮上时改变按钮的颜色。如下示例代码所示：

/* 所有用户指针悬停的按钮 */  
 button:hover {  
  color: blue;  
 }

伪类选择器 的语法结构如下所示：

选择器:伪类 {  
  属性 : 属性值;  
 }

伪类选择器 的具体语法格式为 :伪类，这里一定不要忘记 :。

伪类选择器的分类

CSS 版本从第一版本发展到第三版本，提供的伪类选择器 的数量已经很庞大了。尤其CSS3版本新增了大量的伪类选择器 。

伪类选择器 的数量这么多，为了更好地梳理伪类选择器 ，我们可以按照用途的不同分为如下 5 种类型：

  • 用户行为伪类：指与用户行为相关的一些伪类，例如，悬停:hover、按下:active以及获取焦点:focus等。

  • URL定位伪类：用于定位HTML页面中的元素

  • 输入伪类：与表单控件相关的伪类

  • 树结构伪类：主要用于定位目标元素

  • 逻辑组合伪类：用于逻辑操作的，例如:not()，就表示不是某元素。

由于CSS中的伪类选择器的数据过于庞大，我们会在以后拿出专项来讲解具体的用法。

总结

99_总结.png

预告：下一篇文章我们将来学习CSS中的颜色以及其概念

一碗周.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS中的基础选择器
weixin_52272516的博客
09-15 91
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 CSS是曼层样式表( Cascading Style Sheets )的简称 有时我们也会称之为CSS样式表或级联样式表。
CSS中的选择器
YZ0406280703的博客
05-20 2676
在 CSS 中，选择器是选取需设置样式的元素的模式。选择器就是将含有某种名称或者属性的标签在进行设样式的时候可以大面积的设置，可以清楚地区分样式，使得更加方便快捷。还有很多选择器没有列举出来，想了解的可以在W3School上找找。
CSS中4种常用选择器
王春燕的博客
04-09 781
1:元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{},h1{},h3{} 2:id选择器 作用：根据元素的id属性值选中一个元素 语法：#id属性值{} 例子：#p1{} 3:class选择器 作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用 语法：.class属性值{} 例子：.p2{} 4:通配选择器 作用：选中页面中的所有元素 语法：*{} <!DOCTYPE html> <html lang=
【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-28 1557
一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项
CSS 选择器 — 重学CSS
三钻 - 之前端到全栈之路
09-18 1950
在之前的 《实战中学习浏览器工作原理》中我们已经对选择器有了一些全新视角的认知。这里我们站在 CSS 的角度一起学习选择器。
详解CSS中的选择器优先级顺序
09-24
在CSS中，选择器优先级顺序是决定多个样式冲突时哪个样式生效的关键因素。它涉及到特殊性（Specificity）和重要性（!important）这两个概念。理解并熟练掌握这些规则对于编写高效且易于维护的CSS代码至关重要。 ...
十种CSS选择器详解介绍
最新发布
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
举例详解CSS中的选择器
01-19
浏览器才会很方便的根据css各种规则的选择器在dom结构中找到相应的位置，那下一个问题自然就严重了，那就是必须深入的理解dom模型。 一：理解Dom模型 首先我们看下面的代码。 复制代码代码如下:<!DOCTYPE ...
详解css常用选择器
09-27
在本文中，我们将深入探讨一些常见的CSS选择器及其用法。 1. **元素选择器**：通过元素名称来选择元素，如`table {background:red;}`将所有表格的背景颜色设为红色。 2. **属性选择器**： - `div[id]` 选择所有...
CSS选择器
chnejgeo的博客
06-17 2380
在 CSS 中，选择器是选取需设置样式的元素的模式。 下面我们介绍几种常用选择器: 元素选择器:通过选择html标签设置css样式 如果设置 html的样式，选择器通常将是某个 html元素，比如 p、h1、em、a，甚至可以是 html 本身： 写法：html{font-size:35px;} 2.类选择器：通过获取class类设置css样式 写法：.name{color:red;} “.”表示类，“name”表示类名，以.开头加类名表示类选择器 3.ID选择器：通过获取ID来设置css样式
CSS之选择器（一）普通选择器
码、蚁的博客
05-06 1089
1、CSS选择器概述 2、CSS选择器 1、一般选择器 一般选择器 选择器 示例 示例说明及注意事项 id选择器 #name 选择所有id="name"的元素 注意：一般id名不可重复 class选择器 .name 选择所有class="name"的元素 注意：class名可重复 元素选择器 p 选择所有的p元素 通配选择器 * 全局样式，选择所有元素 下面就用代码演示下以
css基础知识 -- 选择器
qq_52993453的博客
11-18 1440
1.css选择器： 用于“查找”（或选取）要设置样式的 HTML 元素；选择器种类分为5类 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 1.1简单选择器 1.1.1元素选择器：根据元素名称来选择 HTML 元素 p { text-align: center; color: green; } 1.1.2..
常用CSS选择器及规则
weixin_55800388的博客
06-18 411
​ 由一定规则组成的字符, 表示对网页元素进行选中​ 2.1 通用选择器 *​ 表示选中所有的元素​ 2.2 元素选择器​ 通过元素的名字将对应的内容选中​ 2.3 id选择器​ 给元素添加id属性, 通过"#"+id属性值选中元素​ 注意:id值是唯一的​ 2.4 类选择器​ 给元素添加class属性 , 通过".class属性值"选中​ 2.5 子代选择器​ 通过父元素选择器 > 子元素选择器将元素选中​ 2.6 后代选择器​ 祖辈元素选择器 后代元素的选择器​
name选择器_这个笔记《CSS中层次、属性、结构伪类选择器》，轻松搞定选择器...
weixin_39895481的博客
12-01 45
层次选择器注意: 这些选择器最终的控制对象都是F!实际应用中, 后代选择器和子元素选择器是使用得较多的!属性选择器结构伪类选择器E:first-child 选择的是在同级元素中排第1位的E元素E:last-child 选择的是在同级元素中排最后1位的E元素E:nth-child(n) 选择的是在同级元素中排第n位的E元素E:first-of-type 选择的是同级E元素中排第1位的E元素E:las...
CSS内联样式的使用，真香
m0_57502067的博客
06-01 365
前言 校招 -1 年 这个阶段还属于成长期，更需要看重的是你的基础和热情。对于 JS 基础，计算机基础，网络通信，算法等部分的要求会相对高一些。毕竟这个阶段比较难考察你的业务项目中的沉淀，所以只能从基础部分入手考察。 在学校学习，或是利用网络上的各种资料巩固自己的基础，是这个阶段的关键。 在简历里用各种方式展示出你对前端的热情，让面试官看到你的潜力。 多去了解社区前沿技术，关注国内外的各种技术趋势。 尝试自己写一些小项目，或者是参与社区开源的项目。 开始记录自己的技术博客。 form表单细节 一、表单
name选择器_这33个超级好用的CSS选择器，你可能见都没见过
weixin_39996035的博客
11-29 521
作者：陈大鱼头转发链接：https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ前言CSS 选择器是 CSS 世界中非常重要的一环。在 CSS 2 之后，所有的 CSS 属性都是按模块去维护的。CSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是20...
css样式中name用什么,CSS3中的animation-name属性怎么用
weixin_42214418的博客
08-03 731
CSS3中的animation-name属性的用法：【animation-name: keyframename|none】。该属性用来给@keyframes动画规定名称。css3 animation-name属性作用：animation-name 属性为 @keyframes 动画规定名称。语法：animation-name: keyframename|none;keyframename：规定需要...
!important、3种级联样式、选择器优先级 详细介绍
一步一个脚印
05-30 7895
1、!important 表示最高优先级（ie6浏览器不认识 !important ）。 例如: 正常情况下，写在下面的样式优先级高于上面的样式 demo1{ color:red; color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/ } 加了!important 那么它的优先级会比较高，ie6比较傻，不认识。 demo2 { color:re...
Selenium CSS选择器详解与实践应用
总结起来，Selenium CSS选择器定位包括基础类型选择器、子元素选择器以及其他高级选择器，它们共同构成了一个强大的工具，帮助开发人员在自动化测试和网页抓取过程中定位目标元素，实现对网页行为的模拟与分析。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗周.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值