这是一篇关于CSS入门及选择器知识的学习笔记，学习内容从https://www.w3school.com.cn/获取。非常感谢网站https://www.w3school.com.cn/提供了这么好的入门教程，也是一个很好的学习平台。
文章目录
一、CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
（一）多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于<head>标签内部）
4、内联样式（在HTML元素内部）
（二）样式表优势
你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
二、创建 CSS
（一）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
（二）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
（三）内联样式
使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
三、CSS基本语法
（一）基本规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。其中：
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
具体格式如下：
selector {property: value; property: value; ... property: value}
举例如下：
h1 {color:red; font-size:14px;}
备注：是否包含空格不会影响 CSS 在浏览器的工作效果，且CSS 对大小写不敏感。
（二）多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。
大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
p {
text-align: center;
color: black;
font-family: arial;
}
备注：在每行只描述一个属性，这样可以增强样式定义的可读性。
（三）选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
具体格式如下：
selector1,selector2,selector3 {property: value; property: value; ... property: value}
举例如下：
h1,h2,h3,h4,h5,h6 {
color: green;
}
四、选择器
（一）派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
在这个例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
（二）id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
例子中：两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色。
#red {color:red;}
#green {color:green;}
html代码如下：
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
实现了id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
另外：在现代布局中，id 选择器也常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
（三）类选择器
类选择器以一个点号显示：
1、单类
举例如下：
所有拥有 center 类的 HTML 元素均为居中。
.center {text-align: center}
html代码如下：
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。
2、多类
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
其中，css设置如下：
.important.warning {background:silver;}
（四）属性选择器
对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
1、单属性
为带有 title 属性的所有元素设置样式：
[title] {color:red;}
为 title="W3School" 的所有元素设置样式：
[title=W3School] { border:5px solid blue;}
为包含指定值的 title 属性的所有元素设置样式：
[title~=hello] { color:red; }
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
2、多属性
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
3、参考手册
（五）元素选择器
HTML文档的元素就是最基本的选择器，元素选择器又称为类型选择器，类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
（六）通配符选择器
通配符选择器显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
（七） 后代选择器
后代选择器可以选择作为某元素后代的元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
显示效果如下：
这个规则会把 h1所有的 strong 元素都变为红色。
（八）子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
运行效果如下：
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。
（九）相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
CSS样式如下：
li + li {font-weight:bold;}
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）
最终运行效果如下：
这篇文章只是介绍了《CSS入门和选择器》的知识，后面我还会继续分享更多关于CSS样式的知识，希望大家能够喜欢。
参考网站：https://www.w3school.com.cn/css/
