CSS 样式表

css

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

样式定义通常保存在外部 .css 文件中，可以节省大量工作量

基本选择器

元素选择器

元素选择器根据元素名称来选择html元素

基本语法

p {
  text-align: center;
  color: red;
}

id选择器

id选择器根据元素的id属性来选择特定的html元素

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

要选择具有特定 id 的元素，需要写#，后跟该元素的 id 

需要注意id名称不能以数字开头

基本语法

#striking {
  text-align: center;
  color: red;
}

类选择器

类选择器选择特定的class属性的html元素

选择特定class的元素，要在clss之前加上(.),后面跟类名

基本语法

.center {
  text-align: center;
  color: red;
}

通用选择器

通用选择器（*）选择页面上的所以html元素

基本语法

* {
  text-align: center;
  color: blue;
}

分组选择器

分组选择器选取所有具有相同样式定义的html元素

基本语法

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码

如需对选择器进行分组，用逗号来分隔每个选择器

基本语法

h1, h2, p {
  text-align: center;
  color: red;
}

组合选择符

CSS 组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格 分隔)

子元素选择器(以大于号 > 分隔）

相邻兄弟选择器（以加号 + 分隔）

普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器

后代选择器用于选取某元素的后代元素

基本语法

div p {
  background-color: yellow;
}

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接一级子元素的元素

基本语法

div > p {
  background-color: red;
}

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

基本语法

div + p {
  background-color: green;
}

后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素

基本语法

div ~ p {
  background-color: orange;
}

[attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素

a [target] {
  background-color: yellow;
}

[attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素

a [target="_blank"] { 
  background-color: red;
}

各个选择器的优先级

id选择器的优先级高于元素选择器

类选择器的优先级高于元素选择器

元素选择器的优先级高于通用选择器

后代选择器的优先级高于分组选择器

后续兄弟选择器的优先级高于相邻兄弟选择器

后续兄弟选择器包含相邻兄弟选择器

通用选择器的优先级最低