一.CSS基础语法;
1.1 语法解释
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}1.2 案例解释
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这段代码的结构：
提示：请使用花括号来包围声明。
二.CSS选择器分类
2.1 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
HTML文档
<body>
<h1>我是h1标签,目前被元素选择器选择</h1>
</body>CSS文档
h1 {color:blue;}2.2 类型选择器
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
因此，我们也可以为 XML 文档中的元素设置样式：
XML:文档
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>我是to标签,目前被类型选择器选择</to>
</note>CSS文档:
to {color:blue}2.3 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器
修改 HTML 代码
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：
HTML文档:
<body>
<h1 class="important">
我是h1标签,我被类选择器选择.
</h1>
<p class="important">
我是p标签,我被类选择选择.
</p>
<body>语法
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.）
CSS文档:
.important { color:blue }
2.4 多类选择器
我们处理了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
HTML文档:
<body>
<p class="important warning">
我是p标签,正在被多类选择器选择
</p>
</body>语法
然后我们使用以下语法向元素应用样式，即类名前有一个点号（.）
CSS文档:
.important.warning {color:blue}
2.5 ID选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
HTML文档
<body>
<p id="intro">
我是p标签,正在被ID选择器选择.
</p>
</body>
语法
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号
CSS文档
#intro {color:blue}
2.6 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
HTML 文档
<body>
<a href="https://blog.csdn.net/qq_36090463/article/list/1?">可以应用样式：</a>
<hr />
<a name="CSDN搜索阿武刚巴得">无法应用样式：</a>
</body>CSS文档
a[href] {color:red;}
2.7 后代选择器（descendant selector）又称为包含选择器
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
HTML文档
<body>
<h1>
这是h1标签, <em>important</em> 被后代选择器选择.
</h1>
<p>
这是p标签 <em>important</em> 被后代选择器选择.
</p>
</body>
CSS文档
h1 em {color:red;}
三.CSS选择器分组
通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
HTML文档
<body>
<h2>我是h2标签,目前被选中分组</h2>
<p>我是p标签,目前被选中分组</p>
</body>将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起，对此没有任何限制。
CSS文档
h2, p {color:gray;}
至此分享完毕,觉得有帮助的话请给个赞吧!(*￣︶￣)
