02-CSS-语法和选择器

一、语法格式：

• 选择器指向需要设置样式的 HTML 元素。
• 声明块包含一条或多条用分号分隔的声明。
• 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
• 多条 CSS 声明用分号分隔，声明块用花括号括起来。

二、选择器： 

CSS 选择器是一种用于选择文档中 HTML 元素的方法，控制元素的样式及其属性。CSS 选择器可以根据元素的类、ID、元素名、属性等不同条件进行筛选和控制。

1、元素选择器：

利用元素选择器，可以控制某个页面或整个网站内的某类 HTML 元素的样式，这些元素可以是段落、标题、图像、表格等标准的 HTML 元素。元素选择器根据元素名称来选择 HTML 元素。

元素选择器会选择文档中所有符合条件的元素，并将相同的样式应用于所有选中元素。

元素选择器是 CSS 样式优先级排名最低的一种选择器

• p - 匹配所有 <p> 元素
• h1, h2, h3 - 匹配所有标题，即 <h1>, <h2>, <h3>
• a - 匹配所有链接元素, 即 <a>
• img - 匹配所有图像元素, 即 <img>
• table - 匹配所有表格元素, 即 <table>
• form - 匹配所有表单元素, 即 <form>
• input - 匹配所有输入元素, 即 <input>

 2、id选择器：

• id 选择器使用 HTML 元素的 id 属性来选择特定元素。
• 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。
• 要选择具有特定 id 的元素，写一个井号（＃），后跟该元素的 id。

与元素选择器不同， ID 选择器具有更高的优先级，在规则冲突时具有更高的权重。如果有多个选择器针对同一个元素定义了不同的样式，那么拥有 ID 选择器的规则将覆盖元素选择器的规则。然而，为了保持样式表简洁且易于维护，尽量减少对 ID 选择器的使用，避免给后期维护造成不必要的麻烦。

3、类选择器：

• 类选择器选择有特定 class 属性的 HTML 元素。
• 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

除了上面提到的 .paragraph1 只选中单个元素外，还有很多其他的类选择器方式，比如：

• .heading - 选择所有属于 heading 类的元素；
• .primary-button - 选择所有属于 primary-button 类的按钮元素；

需要注意的是，在一个 HTML 中，同一个类可以被多次使用，也可以被多个元素使用。另外，类选择器的优先级低于 ID 选择器，但是可以高于元素选择器。类选择器应用广泛，使用时要注意为类命名语义化和简洁明了，以便于提升代码的可读性和可维护性。

4、通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。 

需要注意的是，由于通用选择器能匹配到 HTML 中的所有标签，因此在代码中大量滥用通用选择器会导致 CSS 选择器的匹配过程变慢，影响页面性能。因此，在实际开发中，尽量不要滥用通用选择器，只有在必要情况下使用。

5、并集选择器：是一种将多个 CSS 选择器组合使用的方式，它可以同时选中所有符合条件的不同元素。用逗号来分隔每个元素。

6、element element 选择器：选择<div>元素内的所有<p>元素。

 7、element>element 选择器：选择所有父级是 <div> 元素的 <p> 元素。

8、属性选择器：其语法形式为：

元素名称[attribute]，表示选取拥有指定属性的元素。
元素名称[attribute=value]，表示选取属性值恰好等于 value 的元素。
元素名称[attribute~=value]，表示选取属性中包含有给定单词的元素。
元素名称[attribute|=value]，表示选取属性值以 value 开头或以 '-' 分隔符开头的元素。
元素名称[attribute^=value]，表示选取属性值以 value 开头的元素。
元素名称[attribute$=value]，表示选取属性值以 value 结尾的元素。
元素名称[attribute*=value]，表示选取属性值中包含 value 子串的元素。

选中所有具有 title 属性的链接，并将链接文本颜色设置为红色：

a[title] {
  color: red;
}

选中所有 type 属性值为 text 的输入框，并将背景色设置为浅灰色：
 
input[type="text"] {
  ba