[前端笔记——CSS] 10.层叠与继承、选择器

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

[前端笔记——CSS] 10.层叠与继承、选择器

1.层叠与继承

1.1 冲突规则

CSS 代表层叠样式表Cascading Style Sheets层叠的表现方式是理解 CSS 的关键。与层叠密切相关的概念是优先级specificity决定在发生冲突的时候应该使用哪条规则。

样式表层叠——简单的说就是 CSS 规则的顺序很重要当应用两条同级别的规则到一个元素的时候写在后面的就是实际使用的规则。

优先级
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度

  • 一个元素选择器不是很具体则会选择页面上该类型的所有元素所以它的优先级就会低一些。
  • 一个类选择器稍微具体点则会选择该页面中有特定 class 属性值的元素所以它的优先级就要高一点。

继承——一些设置在父元素上的 CSS 属性是可以被子元素继承的有些则不能。

这三个概念一起来控制 CSS 规则应用于哪个元素。

1.2 继承

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。
inherit

设置该属性会使子元素属性和父元素相同。实际上就是“开启继承”。

initial

将应用于选定元素的属性值设置为该属性的初始值。

revert(en-US)

将应用于选定元素的属性值重置为浏览器的默认样式而不是应用于该属性的默认值。在许多情况下此值的作用类似于 unset。

revert-layer(en-US)

将应用于选定元素的属性值重置为在上一个层叠层中建立的值。

unset

将属性重置为自然值也就是如果属性是自然继承那么就是 inherit否则和 initial 一样。

CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于几乎所有属性。它的值可以是其中任意一个inherit、initial、unset 或 revert。这是一种撤销对样式所做更改的简便方法以便回到之前已知的起点。

可以试着实现下面的例子

<!DOCTYPE html>
<head>
<title>继承</title>
<link rel="stylesheet" href="jicheng.css">
</head>

<body>
 <ul class="main">
    <li>Item One</li>
    <li>Item Two</li>
    <ul>
        <li>2.1</li>
        <li>2.2</li>
    </ul>
    <li>Item three</li>
        <ul class="special">
            <li>3.1</li>
            <ul>
                <li>3.1.1</li>
                <li>3.1.2</li>
            </ul>
            <li>3.2</li>
        </ul>
 </ul>

 <ul>
    <li>Default <a href="#">link</a>color</li>
    <li class="my-class-1">Inherit the <a href="#">link</a>color</li>
    <li class="my-class-2">Reset the <a href="#">link</a>color</li>
    <li class="my-class-3">Unset the <a href="#">link</a>color</li>
</ul>
<blockquote>
    <p>this blockquote is styled</p>
</blockquote>

<blockquote class="fix-this">
    <p>this blockquote is not styled</p>
</blockquote>
</body>

.main{
    color: rebeccapurple;
    border: 2px solid #ccc;
    padding: 1em;
}
.special{
    color: black;
    font-weight: bold;
}

body{
    color: green;
}
.my-class-1 a {
    color: inherit;
}
.my-class-2 a {
    color: initial;
}
.my-class-3 a {
    color: unset;
}

blockquote{
    background-color: red;
    border:2px solid green;
}
.fix-this{
    all:unset;
}

1.3 层叠

层叠如何定义在不止一个元素的时候怎么应用 CSS 规则?
有三个因素需要考虑根据重要性排序如下后面的更重要

1.资源顺序
后面的规则覆盖前面的规则直到最后一个开始设置样式。资源顺序仅在规则的优先级相同时才体现出来。
2.优先级
不同类型的选择器有不同的分数值。一个选择器的优先级可以说是由三个不同的值或分量相加可以认为是百ID十类个元素——三位数的三个位数

  • ID选择器中包含 ID 选择器则百位得一分。
  • 类选择器中包含类选择器、属性选择器或者伪类则十位得一分。
  • 元素选择器中包含元素、伪元素选择器则个位得一分。

类选择器的权重大于元素选择器因此类上定义的属性将覆盖应用于元素上的属性。

内联样式即 style 属性内的样式声明优先于所有普通的样式无论其优先级如何。这样的声明没有选择器但它们的优先级可以理解为 1-0-0-0即无论选择器中有多少个 ID它总是比其它任何优先级的权重都要高。

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算不过需要很小心的使用——!important。用于修改特定属性的值能够覆盖普通规则的层叠。在一种情况下可能不得不使用它当我们不能编辑核心的 CSS 模块不能用任何其他方式覆盖而又真的想要覆盖一个样式时。可以研究下面代码学习一下

<!DOCTYPE html>
<head>
<title>继承</title>
<link rel="stylesheet" href="cengdie.css">
</head>

<body>


<h2>Heading with no class</h2>
<h2 class="small">Heading with class of small</h2>
<h2 class="bright">Heading with class of bright</h2>

<div id="outer" class="container">
    <div id="inner" class="container">
        <ul>
            <li class="nav"><a href="#">One</a></li>
            <li class="nav"><a href="#">Two</a></li>
        </ul>
    </div>
</div>
<p class="better">This is a paragraph</p>
<p class="better" id="winning">One selector to rule them all!</p>
</body>

h2{
    font-size: 2em;
    color: #000;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.small{
    font-size: 1em;
}
.bright{
    color: rebeccapurple;
}

/*1.specificity:1-0-1 */
#outer a {
    background-color: red;
}

/*2.speciticity:2-0-1 */
#outer #inner a {
    background-color: blue;
}

/*3.specificity:1-0-4*/
#outer div ul li a {
    color:yellow;
}
/*4.specificity:1-1-3*/
#outer div ul .nav a {
    color:white;
}

/*5.specificity:0-2-4*/
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/*6.specificity:0-2-3*/
div li:nth-child(2) a:hover{
    border: 10px dashed black;
}

/*7.specificity:0-3-3*/
div div .nav:nth-child(2) a:hover{
    border:10px double black;
}

a {
    display: inline-block;
    line-height: 40px;
    font-size:20px;
    text-decoration: none;
    text-align: center;
    width: 200px;
    margin-bottom:10px;
}

ul{
    padding:0;
}

li{
    list-style-type: none;
}

# winning {
    background-color: red;
    border: 1px solid black;
}
.better{
    background-color: gray;
    border: none !important;
}

p{
    background-color: blue;
    color: white;
    padding: 5px;
}

3.重要程度

1.4 CSS位置的影响

CSS 声明的优先级取决于定义它的样式表和级联层。

它让用户可以设置自定义样式表来覆盖开发人员定义的样式也可以在级联层中声明开发人员定义的样式可以让非分层样式覆盖分层样式或者可以让后面的层中声明的样式覆盖先前的层中声明的样式。
覆盖声明的顺序
相互冲突的声明将按以下顺序应用后一种声明将覆盖前一种声明

  1. 用户代理样式表中的声明例如浏览器的默认样式在没有设置其他样式时使用。
  2. 用户样式表中的常规声明由用户设置的自定义样式。
  3. 作者样式表中的常规声明这些是web 开发人员设置的样式。
  4. 作者样式表中的 !important 声明
  5. 用户样式表中的 !important 声明
  6. 用户代理样式表中的 !important 声明

注意标记为 !important 的样式的优先级顺序是颠倒的。

级联层的顺序
在级联层中声明 CSS 时优先级的顺序由声明层的顺序来决定。

在任何层之外声明的 CSS 样式会被按声明的顺序组合在一起形成一个未命名的层它会被当作最后声明的层。

对于存在冲突的常规没有 !important 声明样式后面的层比先前定义的层的优先级高。

对于带有 !important 标记的样式其顺序相反——先前的层中的 important 样式比后面的层以及为在层中声明的 important 样式优先级要高。

内联样式比所有作者定义的样式的优先级都要高不受级联层规则的影响。
可以try 1 try下面的程序

<p id="addSpecificity">A paragraph with a border and backgroud</p>

@layer firstLayer {
    #addSpecificity { /* 1-0-0 */
    background-color: blue;
    color: white;
    border-width: 5px;
    border-style: dashed !important;
    }
}

@layer secondLayer {
    p#addSpecificity { /* 1-0-1 */
    background-color: green;
    color: orange !important;
    border-width: 10px;
    border-style: dotted !important;
    }
}

2.选择器

2.1 选择器是什么

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素叫做“选择器的对象”。
在这里插入图片描述
CSS 中选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样它们需要浏览器的支持才能工作。大多数选择器都是在CSS 3中定义的这是一个成熟的规范浏览器对这些选择器有良好的支持。

2.2 选择器列表

如果有多个使用相同样式的 CSS 选择器那么这些单独的选择器可以被混编为一个“选择器列表”这样规则就可以应用到所有的单个选择器上了。例如如果我的h1和.special类有相同的 CSS那么我可以把它们写成两个分开的规则。

h1 {
	color:blue;
}
.special {
	color:blue;
}

也可以将它们组合起来在它们之间加上一个逗号变为选择器列表。

h1,.special {
	color:blue;
}

空格可以在逗号前或后如果每个选择器都另起一行会更好读些。

h1,
.special {
	color:blue;
}

当你使用选择器列表时如果任何一个选择器无效 (存在语法错误)那么整条规则都会被忽略。
在下面的示例中无效的 class 选择器会被忽略而h1选择器仍会被样式化。

h1 {
  color: blue;
}

..special {
  color: blue;
}

但是在被组合起来以后整个规则都会失效无论是h1还是这个 class 都不会被样式化。

h1, ..special {
  color: blue;
}

2.3 选择器的种类

类型、类和 ID 选择器

这个选择器组第一个是指向了所有 HTML 元素 <h1>。

h1 { }

它也包含了一个 class 的选择器

.box { }

亦或一个 id 选择器

.#unique { }

标签属性选择器

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式

a[title] { }

或者根据一个有特定值的标签属性是否存在来选择

a[href="https://example.com"] { }

伪类与伪元素

这组选择器包含了伪类用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素

a:hover { }

它还可以包含伪元素选择一个元素的某个部分而不是元素自己。例如::first-line是会选择一个元素下面的情况中是<p>中的第一行类似<span>包在了第一个被格式化的行外面然后选择这个<span>。

p::first-line { }

运算符

最后一组选择器可以将其他选择器组合起来更复杂的选择元素。下面的示例用运算符>选择了<article>元素的初代子元素。

article > p { }

选择器参考表

在这里插入图片描述

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：注重实效的项目

下一篇：npm ERR! code EPERM npm ERR! syscall mkdir

“[前端笔记——CSS] 10.层叠与继承、选择器” 的相关文章

【JavaEE】进入Web开发的世界-CSS1年前 (2023-02-02)
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)1年前 (2023-02-02)
CSS选择器整理学习（上）1年前 (2023-02-02)
CSS给元素添加边框（样式、颜色、宽度）1年前 (2023-02-02)
HTML+CSS+JS制作炫酷【烟花特效】1年前 (2023-02-02)
纯CSS实现跑马灯效果1年前 (2023-02-02)
【web高级进阶之JS】css、js规范+新增数据类型+堆栈溢出+GC垃圾回收1年前 (2023-02-03)
CSS中的各种格式化上下文-FC（BFC、IFC、GFC、FFC）1年前 (2023-02-03)
CSS实现9宫格布局的4种方法：flex、float、grid、table布局1年前 (2023-02-04)
前端学习第七站——CSS盒子模型1年前 (2023-02-04)

阿里云国际版