css规则中的类型,CSS从小白到大神(一)CSS 规则集

创建日期: 2020年4月13日

题记：

时至今日，写了两个月的react，笔者已经不是单纯的小白了。但是，对CSS式样部分，也是照葫芦画瓢，稍微变化点，就是一脸懵。为此，写下这一系列的学习笔记。

如果，你真的是web开发小白，在开始本系列之前，建议你先自学下web开发基础。

w3school 在线教程

从这里面的HTML教程开始，到CSS教程结束。

本篇来源：CSS基础

1. “CSS 规则集”详解

image.png

整个结构称为 规则集(通常简称“规则”)，各部分释义如下：

选择器(Selector)

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。

声明(Declaration)

一个单独的规则。如 color: red; 用来指定添加样式元素的属性。

属性(Properties)

改变 HTML 元素样式的途径。(本例中 color 就是

元素的属性。)CSS 编写人员决定修改哪个属性以改变规则。

属性的值(Property value)

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。

注意其他重要的语法：

每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。

在每个声明里要用冒号(:)将属性与属性值分隔开。

在每个规则集里要用分号(;)将各个声明分隔开。

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

p {

color: red;

width: 500px;

border: 1px solid black;

}

2.多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p, li, h1 {

color: red;

}

3.不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称

选择的内容

示例

元素选择器(也称作标签或类型选择器)

所有指定类型的 HTML 元素

p

选择

ID 选择器

具有特定 ID 的元素(单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID)

#my-id

选择

或

类选择器

具有特定类的元素(单一页面中，一个类可以有多个实例)

.my-class

选择

和

(标签)属性选择器

拥有特定属性的元素

img[src]

选择 而不是

伪(Pseudo)类选择器

特定状态下的特定元素(比如鼠标指针悬停)

a:hover

仅在鼠标指针悬停在链接上时选择 。

伪元素选择器

选择一个元素的某个部分而不是元素自己

::first-line

总是会选择一个元素中的第一行,下例选择了。

元素一

元素二

子代选择器

最后一组选择器将其他选择器组合起来，以图指向我们的文档里的选择器。

article > p

下面的示例用子元素运算符(>)选择了元素的初代子元素。---待调查，没看懂

后代选择器

article p

* { }

选择器的种类远不止于此，更多信息请参阅 [选择器]。

4.选择器列表

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

h1 {

color: blue;

}

.special {

color: blue;

}

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

h1, .special {

color: blue;

}

空格无论在逗号前面还是后面都可以，你可能还会发现如果每个选择器都另起一行，会更好读些。

h1,

.special {

color: blue;

}

当你这样子给选择器放在一起时，如果任何一个选择器无效，那么整条规则都会被忽略。

在下面的示例中，无效的类选择器会被忽略，而h1仍会被样式化。

h1 {

color: blue;

}

..special {

color: blue;

}

但是在被组合起来以后，在整个规则都被认为是失效的时候，无论是h1还是这个类都不会被样式化。

h1, ..special {

color: blue;

}