css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素-CFANZ编程社区

文章目录

reference link

规则集/选择器/声明(属性:属性值;)

css属性和值
css 声明
CSS规则集
css语法特点
函数作为属性值

层叠与继承

优先级
继承

试验css继承
preview

理解层叠
计算优先级(权重)
兼容性:遇到无法解析的CSS代码
兼容性特点

选择器及其对象

各种选择器一览表
伪类与伪元素的比较

伪元素
伪类

选中与权重

@规则
github文章

reference link

“CSS 规则集”详解 (mozilla.org)
CSS 选择器 - CSS（层叠样式表） | MDN (mozilla.org)

在你的HTML里面应用CSS
在文本中使用CSS
选择器
属性和值
@规则

层叠与继承 - 学习 Web 开发 | MDN (mozilla.org)

规则集/选择器/声明(属性:属性值;)

css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_选择器

整个结构称为规则集（通常简称“规则”），各部分释义如下：
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中color 就是 `` 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

css属性和值

属性和值在最基本的层面上，CSS由两个组成部分组成：

属性：人类可读的标识符，指示您想要更改的样式特征(例如font-size,width,background-color) 你想改变。
值：每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性(例如，要将字体、宽度或背景色更改为。)

下面的图像突出显示单个属性和值。属性名为 color, 值为 blue.

css 声明

与值配对的属性称为CSS声明。
CSS声明放在CSS声明块{}中。

下一张图片显示了我们的CSS，并突出显示了声明块。

css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_css_02

CSS规则集

最后，CSS声明块与选择器配对，以生成CSS规则集(或CSS规则)。
我们的图像包含两个规则，一个用于H1选择器，另一个用于p选择器。h1的规则被突出显示。

css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_html5_03

css语法特点

将CSS属性设置为特定值是CSS语言的核心功能。
CSS引擎计算声明应用于页面的哪些元素，以便适当地布局和样式化它。
重要的是要记住，在css中，属性和值都是区分大小写的。
每对中的属性和值由冒号(：)分隔。

尝试查找以下属性的不同值，并编写将它们应用于不同HTML元素的CSS规则：

font-size
width
background-color
color
border

重要事项： 如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。

重要： 在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。

函数作为属性值

虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。
一个例子是calc()函数。这个函数允许您在CSS中进行简单的计算，例如：

.box {
    padding: 10px;
    width: calc(90% - 30px);
    background-color: rebeccapurple;
    color: white;
  }

函数由函数名和一些括号组成，其中放置了该函数的允许值。
在上面的calc()示例中，我要求此框的宽度为包含块宽度的90%，减去30像素。

这不是我可以提前计算的东西，只是在CSS中输入值，因为我不知道90%会是什么。

与所有值一样，MDN上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。
注意其他重要的语法：
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
一般的,花括号{}中的内容(即一系列的声明)不会影响css规则集的命中对象(层叠和优先级会决定该规则集的命中对象(作用与那些元素/内容),而层叠和优先级又是通过规则集的选择器部分来决定(以及规则集定义的先后顺序;选择器包括基础选择器和非基础选择器(比如后代选择器)
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

层叠与继承

以下话题基于:多个不同的选择器(或者规则集)同时命中到相同的元素,而产生的被命中元素到底呈现出何种样式的问题(规则集的优先级)
规则集由选择器+声明集构成

优先级

优先级(查看详情)(MDN)
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。
它基本上是一个衡量选择器具体选择哪些区域的尺度：
总的来说,越具体的规则集优先级越高
一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
一个类选择器稍微具体点 — 它会选择该页面中有特定class 属性值的元素 — 所以它的优先级就要高一点。

继承

继承
特点:

继承样式的优先级,从specificity的角度来说,是比较低的

继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性(在规则集中体现为声明)是可以被子元素继承的，有些则不能。
举一个例子(可以被继承的情况)，如果你设置一个父元素的color 和font-family ，每个在里面的子元素也都会有相同的属性，除非你直接在元素上设置属性(比如有专门的选择器会选中子元素,选择器选中而具有的样式优先级高于继承到的样式)。

这个特点比较常见

试验css继承

在试验css继承的时候,需要了解block element&inline element
Block-level elements - HTML: HyperText Markup Language | MDN (mozilla.org)

list of “block” Elements

such as :

<h>

<div>

Inline elements - HTML: HyperText Markup Language | MDN (mozilla.org)

List of “inline” elements

such as:


<a>

Block-level elements may appear only within abody element.

<!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>Document</title>
    <style>
        body {
            color: blue;
            /* background-color: blue; */
            border: solid blue 1px;
        }

        body>* {
            border: solid 1px;
        }

        p {
            color: green;
            border: dotted 2px red;
            padding: 3px;
        }

        .red {
            color: red;
            margin: 3px 0px;
        }

        /* div:nth-of-type(2){
            color: hotpink;
        } */
        p>* {
            border: solid 1px hotpink;
            margin: 2px;
        }
    </style>
</head>

<body>
    <h1>演示样式继承(以颜色color/border为例)</h1>
    <h2>(body->h1)(style:inherit style from body(blue)</h2>
    <p>
        (body->p)(style: by p element selector)
        <br>
        <span>
            (body:p->span)(style:inherit style from p(green) )
            <div>(body->p->span->div)block-level element(div)(style:inherit from body)</div>
        </span>
    <div>body->div(style: inherit style from paren)t</div>
    <div class="red">second div(style by selector)</div>
    </p>
</body>

</html>

preview

css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_优先级_05

理解层叠

理解层叠
我们现在明白了为什么嵌套在html结构中的段落和应用于正文中的css颜色相同，从入门课程中，我们了解了如何将文档中的任何修改应用于某个对象的css，无论是把css指定某个元素还是创建一个类。
现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用css规则。

有三个因素需要考虑，根据重要性排序如下，前面的更重要：

重要程度
优先级(不考虑继承)
资源顺序

我们从下往上，看看浏览器是如何决定该应用哪个css规则的。

资源顺序

我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。
可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。

优先级
在你了解了顺序的重要性后，会发现在一些情况下，有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的优先级— 它范围更小，因此浏览器就把它选择为元素的样式。
就像前面看到的，类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。

这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性会被覆盖。

这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。

举个例子，在下面的样式中我给2级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。

css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_选择器_06

计算优先级(权重)

我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。
本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

权重位从高到低:

千位：如果声明在style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。(最大权重)
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

警告: 在进行计算时不允许进行进位

例如，20 个类选择器仅仅意味着 20 个十位，而不能视为两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
虽然不可进位,但是同权位上的数值大小还是具有可比性(特别时高位数值相同时)

你可以在MDN上面找到每个选择器的详细信息 selectors reference.

选择器	千位	百位	十位	个位	优先级
`h1`	0	0	0	1	0001
`h1 + p::first-letter`	0	0	0	3	0003
`li > a[href*="en-US"] > .inline-warning`	0	0	2	2	0022
`#identifier`	0	1	0	0	0100
内联样式	1	0	0	0	1000

属性选择器既可以因对应的元素选择器出现为总体加一分,
也可以由属性选择而为该选择器加10分.

兼容性:遇到无法解析的CSS代码

当浏览器遇到无法解析的CSS代码会发生什么

在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围
那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？
答案就是浏览器什么也不会做，继续解析下一个CSS样式！

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。
在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。
与规则集中的声明相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。
在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。

<p> I want this text to be large, bold and blue.</p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

兼容性特点

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。
当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。
这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。(新式代码靠后写)

.box {
  width: 500px;
  width: calc(100% - 50px);
}

选择器及其对象

css选择器可以选中html元素(可以是一整个元素,也可以是元素的一部分(特别是伪元素选择器))
css选择器所选择的元素，叫做“选择器的对象”。
伪类,伪元素选择器的对象和用户的操作以及渲染html文档的设备/程序窗口有关

伪类:例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
伪元素:选择一个元素的某个部分而不是元素自己。

例如，::first-line是会选择一个元素（下面的情况中是）中的第一行

p::first-line { }
类似包在了第一个被格式化的行外面，然后选择这个。

各种选择器一览表

选择器	示例
类型选择器	`h1 { }`
通配选择器	`* { }`
类选择器	`.box { }`
ID选择器	`#unique { }`
标签属性选择器	`a[title] { }`
伪类选择器	`p:first-child { }`
伪元素选择器	`p::first-line { }`
后代选择器	`article p`
子代选择器	`article > p`
相邻兄弟选择器	`h1 + p`
通用兄弟选择器	`h1 ~ p`

伪类与伪元素的比较

被伪类选中的元素将被整个元素地被应用对应地样式声明
被伪元素选中地元素一般仅该元素的部分被应用相应样式声明

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的::first-line 伪元素可改变段落首行文字的样式。
pseudo-elements 可被用于为一个元素的特定部分应用样式

/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
}

**注意：**与伪元素比较，pseudo-classes 能够根据状态改变元素样式。

语法

selector::pseudo-element {
 property: value;
}

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

**注意：**按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

伪类

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
pseudo-classes 能够根据状态改变元素样式

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

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如:visited），
同样的，可以根据内容的状态（例如在一些表单元素上的:checked），或者鼠标的位置（例如:hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

注意： 与伪类相反，pseudo-elements 可被用于为一个元素的 特定部分 应用样式。

语法

selector:pseudo-class {
 property: value;
}

类似于普通的类，你可以在一个选择器中同时一起写多个伪类。

选中与权重

这里说的选中是指直接的选中,而不是通过继承"选中"

下图属于w1>w2>0的情况,都是’‘选中’'的
css_选择器/规则集/属性和值(函数)/计算css选择器的优先级/兼容性规则集/块级元素和行内元素_html5_07

@规则

@rules (pronounced “at-rules”). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。
有些@rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主CSS样式表，可以使用@import:

@import 'styles2.css';

您将遇到的最常见的@rules 之一是@media，它允许您使用媒体查询来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
在下面的 CSS中，我们将给<body> 元素一个粉红色的背景色。但是，我们随后使用@media创建样式表的一个部分，该部分仅适用于视口大于30em的浏览器。如果浏览器的宽度大于30em，则背景色将为蓝色。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

github文章

link : click me!