css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]

PBitW

已于 2024-01-15 11:33:11 修改

阅读量1w

点赞数 7

分类专栏：重学前端2 css 文章标签： css 选择器优先级 7种基础选择器详解样式表选择器权重选择器权重错误理解 css组合选择器

于 2020-08-03 18:38:06 首次发布

本文链接：https://blog.csdn.net/langwang_100/article/details/107768098

版权

重学前端2 css 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS的使用方法，包括选择器、样式表的种类、优先级规则及常见选择器组合，帮助读者掌握CSS布局和样式调整的核心技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：

选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute），每个属性有一个值，属性和值被冒号分开
CSS声明总是以分号 ; 结束，声明总以大括号 { } 括起来

注意：

如果多个标签共用一个样式，则用 , 分隔，eg：.head_left_ul , .head_end_ul , .end_div ul { }

Tips:

使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

css中的id

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。（仅仅限于一个，多个会出现你意想不到的一些bug）

HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 " # " 来定义。

css中的class

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示，在 CSS 中类选择器以一个点" . "号显示。

对于多个不同元素，但class一样的，你也可以指定特定的HTML元素使用class。

eg：

p.center {text-align:center;}

注意：

p和.center之间不要加空格，不然无效，因为这是选择p中 class 叫center的，而不是选择p元素后代元素中 class 叫center的（css结合元素选择器）

样式表

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。 < link> 标签在（文档的）头部。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表。

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如：当样式仅需要在一个元素上应用一次时 或者 vue中动态绑定style。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

7种基础选择器

在讨论 CSS 优先级之前，先说说 CSS 的 7 种基础的选择器：

ID 选择器，如 #id{}

类选择器，如 .class{}

属性选择器，如 a[href=“segmentfault.com”]{}

伪类选择器，如 :hover{}

伪元素选择器，如 ::before{}

标签选择器，如 span{}

通配选择器，如 *{}

较难选择器，详见：

5种组合选择器

所有 CSS 的选择符由上述 7 种基础的选择器及其组合而成，组合的方式有很多种，这里列举较常见的5种：

后代选择符： .father .child{}（中间有空格）

子选择符： .father>.child{}（加不加空格一样，格式化之后，编译器（VS code）会自动删除空格，所以最好不加空格）

相邻（兄弟）选择符： .bro1+.bro2 p{} （空格同上）

后续兄弟选择器：div~p（后续兄弟选择器选取所有指定元素之后的相邻兄弟元素，以破折号分隔，空格同上）

多类选择器：.p1.p2（不能加空格，表示同时含有两个才行！）

后代选择和子代选择注意

很多人容易把子代选择器和后代选择器混在一起，子代选择器只能选择元素的子代，而他的孙代、曾孙不能被选上，后代选择器可以选子代、孙代、曾孙的元素

eg：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .second p {
            color: red;
        }

        /* .second>p {
            color: red;
        } */
    </style>
</head>

<body>
    <div class="first">
        <div class="second">
            <p>子代</p>
            <!-- first的子代 -->
            <div>
                <p>孙代</p>
                <!-- //first的孙代 -->
                <div>
                    <p>曾孙</p>
                    <!-- //firs的曾孙代 -->
                </div>
            </div>
        </div>
        <div class="third">
            <!-- //first的第二个子代、second的兄弟 -->
            <P>兄弟</P>
        </div>
    </div>
</body>

</html>

运行结果：

.second p {
	color: red;
}

在这里插入图片描述

.second>p {
	color: red;
}

在这里插入图片描述
兄弟选择注意：

兄弟选择器只能选择所选元素的后面兄弟元素，不能选择前面的兄弟元素，相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

eg：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .second+.third p{
  			color: red;
		}

		/*.third+.second p{
  			color: red;
		}*/
    </style>
</head>

<body>
    <div class="first">
        <div class="second">
            <p>子代</p>
            <!-- first的子代 -->
            <div>
                <p>孙代</p>
                <!-- //first的孙代 -->
                <div>
                    <p>曾孙</p>
                    <!-- //firs的曾孙代 -->
                </div>
            </div>
        </div>
        <div class="third">
            <!-- //first的第二个子代、second的兄弟 -->
            <P>兄弟</P>
        </div>
    </div>
</body>

</html>

运行结果

.second+.third p{
	color: red;
}

在这里插入图片描述

.third+.second p{
	color: red;
}

无效果！
在这里插入图片描述

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：

如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

但是也会出现更加复杂的样式，eg：p.center 、继承、#c .p 、div p…

这时的优先级如何比较？

最近的祖先样式比其他祖先样式优先级高
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断
属性后插有 !important 的属性拥有最高优先级，若同时插有 !important，则再利用规则 3、4 判断优先级

选择器错误理解

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。

比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。

还是拿刚刚的例子说明，11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，你可以理解为 99.99，所以最终应用后者样式。