CSS 基础

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

CSS 语法

CSS 是一门基于规则的语言,即能够定义用于网页中特定元素样式的一组规则。也就是说,CSS 语言的基本组成单位是规则。

一个 CSS 规则:主标题 {颜色: 红色; 字体大小: 大; 水平对齐方式: 居中;}

						
h1 {
  color: red;
  font-size: 5em;
  text-align: center;
}
						
					

说明:

  • CSS 规则由选择器 selector 开头。它选择了需要添加样式的 HTML 元素。
  • 接着是一对大括号 { }。在大括号 { } 内定义一个或多个形式为 属性名(propertyname): 属性值(value)的属性(property)声明(declarations)。每个属性声明都指定了所选择元素的一个样式特性,例如颜色(红色)等。
  • 一个 CSS 样式表(.css 文件)可以包含很多个规则。

添加 CSS

让 CSS 规则能够应用到 HTML 文件中,有三种方式可以实现:

HTML 文件外链 CSS 文件

						
<head>
  <link rel="stylesheet" href="default.css">
</head>
						
					

Selector

选择器(selector)用来指定网页中需要添加样式的 HTML 元素。选择器所选择的元素,叫做“选择器的对象”。

基本选择器

通配选择器(Universal selector)

选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。

在 CSS 中,一个星号“*”就是一个通配选择器.它可以匹配任意类型的 HTML 元素。

  • 在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。比如,*.warning 和 .warning 的效果完全相同。
  • 在 CSS3 中,星号“*”可以和命名空间组合使用。
						
* {
  属性名: 属性值;
}

/*
 * 匹配 ns 命名空间下的所有元素
 */
ns|* {
  属性名: 属性值;
}

/*
 * 匹配所有命名空间下的所有元素
 */
*|* {
  属性名: 属性值;
}

/*
 * 匹配所有没有命名空间的元素
 */
|* {
  属性名: 属性值;
}
						
					

元素选择器(Type selector)

按照给定的节点名称(元素名),选择所有匹配的元素。

CSS 元素选择器(也称为类型选择器)通过 node 节点名称匹配元素。因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该 HTML 文件中所有此类型的元素。

						
elementname {
  属性名: 属性值;    //样式声明
}
						
					

类选择器(Class selector)

按照给定的 classname,选择所有匹配的元素。也就是说,选择具有 class 属性且其属性值为 classname 的所有元素。

						
.classname {
  属性名: 属性值;
}
						
					

ID 选择器(ID selector)

按照给定的 idname,选择一个与之匹配的元素。也就是说,选择具有 id 属性且其属性值为 idname 的唯一元素。在一个 HTML 文件中,属性 id 的属性值具有唯一性,即不重复。

						
#idname {
  属性名: 属性值;
}
						
					

属性选择器(Attribute selector)

按照给定的属性,选择所有匹配的元素。

语法:

  • [attr]

    选择所有具有 attr 属性的元素,不论这个属性的属性值是什么。

  • [attr=value]
  • [attr~=value]
  • [attr|=value]
  • [attr^=value]
  • [attr$=value]
  • [attr*=value]

分组选择器(Grouping selectors)

选择器列表(Selector list)

如果有多个使用相同样式的 CSS 选择器,那么这些单独的选择器之间用逗号“,”隔开,组成一个选择器列表,这样,相同规则就可以应用到多个选择器上。

						
h1 {
  font-size: 5em;	
}

h2 {
  font-size: 4em;
}

h3 {
  font-size: 3em;
}

h4 {
  font-size: 2em;
}

h1, h2, h3, h4, .special {
  color: red;
  text-align: center;
}

h1,
h2,
h3,
h4,
.special {
  color: red;
  text-align: center;
}
						
					

说明:

  • 空格可以在逗号前或后,每个选择器都另起一行也是允许的。
  • 当使用选择器列表时,如果某个选择器无效 (存在语法错误),那么整条规则都会被忽略。

组合器(Combinators)

后代组合器(Descendant combinator)

后代(空格)组合器选择前一个元素的后代节点。

直接子代选择器(Child combinator)

直接子代(>)组合器选择前一个元素的直接子代的节点。

一般兄弟组合器(General sibling combinator)

一般兄弟(~)组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。

紧邻兄弟组合器(Adjacent sibling combinator)

紧邻兄弟(+)组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。

列组合器(Column combinator)

列(||)组合器选择属于某个表格行的节点。

伪选择器(Pseudo)

伪类

伪类(:)选择器支持按照未被包含在文档树中的状态信息来选择元素。

						
/*
 * a:visited 匹配所有已经被访问过的 a 元素
 */
a:visited {
  color: red;
}
						
					

伪元素

伪元素(::)选择器用于表示无法用 HTML 语义表达的实体。

						
/*
 * p::first-line 匹配所有 p 元素的第一行
 */
p::first-line {
  color: red;
}