CSS 语法

CSS 语法由选择器一条或多条属性声明构成。

选择器 {
    样式属性: 属性值;
    样式属性: 属性值;
    ...
    样式属性: 属性值;
}

以下部分的文档总结了一些 选择器 部分的用法。

CSS 选择器

元素/类型选择器

选择指定元素名称的所有元素。

用法:A

类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。

选择类型A的所有元素。类型是标签的类型,因此 <div><p><ul>都是不同的元素类型。

例如:

  • p 选择所有的 <p> 元素
  • div 选择所有的 <div> 元素

ID 选择器

选择具有特定id的元素。

用法:#id

我们也可以将 ID 选择器类型选择器结合使用。

例如:

  • ul#long 选择 <ul id="long">

后代选择器

选择元素内部的元素。

用法:A B

A 中选择所有的 BB 在另一个元素之内,所以它叫做后代元素。

例如:

  • p strong 选择所有在 <p> 里的任意 <strong> 元素。

后代与 ID 选择器搭配使用

将后代选择器与 ID 选择器结合使用。

用法:#id A

例如:

  • #fancy span 选择任何有带 id="fancy" 的元素的后代中的 <span> 元素。
  • #cool span 选择任何有带 id="cool" 的元素的后代中的 <span> 元素。

类选择器

选择带有指定类 (class) 的元素。

用法:.类名

类选择器选择具有该类属性的所有元素。元素只能有一个 ID,但可以有多个类。

例如:

  • .neato 选择所有带有 class="neato" 的元素。

类选择器的搭配使用

我们可以将类选择器与其他选择器(例如类型选择器)组合在一起使用。

例如:

  • ul.important 选择所有带有 class="important"<ul> 元素。

  • #big.wide 选择所有带有 id="big"class="wide" 的元素。

选择器组合

同时选取多个元素。

用法: A, B

这将选择所有 AB 元素。我们可以通过这种方式组合任何选择器,并且可以指定两个以上。

例如:

  • p, .fun 选择所有 <p> 元素以及所有带有 class="fun" 的元素。

  • a, p, div 选择所有 <a>, <p><div> 元素。

通配选择器

选择所有元素。

用法:*

我们可以使用通用选择器选择所有元素。

例如:

  • p * 选择在所有 <p> 元素之内的任何元素。

通配选择器的搭配使用

选择另一个元素中的所有元素。

用法:A *

这会选择所有 A 中的每个元素。

例如:

  • p * 会选择所有 <p> 标签中的每个元素。

  • ul.fancy * 选择所有 <ul class="fancy"> 元素内的每个元素。

兄弟选择器

相邻兄弟选择器

选择第一个指定的元素之后(不是内部)紧跟的元素。

用法:A + B

这将选择跟在 A 之后的全部 B 元素。 彼此相邻的元素称为兄弟元素,它们处于相同的等级或层级。

例如:

  • p + .intro 选择每个跟在 <p> 之后的带有 class="intro" 的元素。
  • div + a 选择每个跟在 <div> 之后的 <a> 元素。

全体兄弟选择器

选择所有在指定的元素之后(不是内部)紧跟的元素。

用法:A ~ B

这可以选择一个元素后面的所有同级元素(兄弟元素)。就像相邻选择器 A + B 一样,只是它获取后面的所有元素而不是一个。

例如:

  • A ~ B 选择跟在 A 后面的所有 B 元素。

子元素选择器

选择带有特定父元素的元素。

用法:A > B

这可以选择一个元素的所有直接子元素。子元素是直接嵌套在另一个元素中的任意元素,比其嵌套更深的元素称为后代元素。

比其嵌套更深的元素称为后代元素。

例如:

  • A > BA 元素的所有直接子元素中选出所有 B 元素。

伪类选择器

第一子元素伪类选择器

选取属于其父元素的首个子元素。

用法::first-child

这可以选择一个元素内的第一个子元素。子元素是直接嵌套在另一个元素中的任意元素,我们可以将此伪选择器与其他选择器结合使用。

例如:

  • :first-child 选择所有的第一子元素。
  • p:first-child 选择所有是第一子元素的 <p> 元素。
  • div p:first-child 选择在 <div> 内的所有是第一子元素的 <p> 元素。

唯一子元素伪类选择器

选择属于其父元素的唯一子元素的每个元素。

用法::only-child

例如:

  • span:only-child 选择一个 <span> 元素,该元素是其父元素中唯一的元素。
  • ul li:only-child 选择一个 <li> 元素,其父元素为 <ul> 该元素是其父元素中唯一的元素。

最后子元素伪类选择器

选择属于其父元素的最后一个子元素的每个元素。

用法::last-child

Pro Tip → 如果只有一个元素,则该元素将同时计为第一子元素,唯一子元素和最后子元素。

例如:

  • :last-child 选择所有的最后子元素。
  • span:last-child 选择所有的 <span> 元素,且该 <span> 元素为最后子元素,即在所有的最后子元素中选择所有的 <span> 元素。)
  • ul li:last-child 在任意 <ul> 中选择所有 <li> 元素,且该 <li> 元素为最后子元素。

第 N 子元素伪类选择器

选择属于其父元素的第 N 个子元素,不论元素的类型。

用法::nth-child(N)

选择父元素中第 N 个( nth ,如:1st,3rd,7th,12th 等等)子元素。

例如:

  • :nth-child(8) 选择父元素中每一个排第 8 的子元素。
  • div p:nth-child(2) 选择在每个 <div> 中的第 2 个 <p> 元素。

倒数第 N 子元素伪类选择器

属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

用法::nth-last-child(N)

在父元素中选择倒数第 N 个子元素。

N 可以是数字、关键词(odd、even)或公式(An+B)。

例如:

  • :nth-last-child(2) 选择所有倒数第 2 个子元素。

特定类型第一元素伪类选择器

选择属于其父元素的特定类型的首个子元素的每个元素。

用法::first-of-type

在父元素中选择第一个该类型的子元素。

例如:

  • span:first-of-type 在任意元素中选择第一个 <span> 元素。

第 n 元素伪类选择器

选择属于父元素的特定类型的第 N 个子元素的每个元素。

用法::nth-of-type(N)

根据元素的类型和顺序(或该类型元素的偶数或奇数次序)选择特定子元素。

例如:

  • div:nth-of-type(2) 选出第 2 个 <div> 元素。
  • .example:nth-of-type(odd) 在带有 class="example" 的元素中选出奇数次序的元素。

带公式的第 n 元素伪类选择器

用法::nth-of-type(An+B)

按公式选择出特定次序的每个元素。

n 是计数器(从 0 开始),B 是偏移值。公式 An+Bn∈N ,即选出第 B, A+B, 2×A+B, 3×A+B, ... 项元素。

例如:

  • span:nth-of-type(6n+2) 选出第 6×n+2<span> 元素(第 2, 8, 14, 20, ... 项)。

类型唯一伪类选择器

选出属于其父元素的特定类型的唯一子元素的每个元素。

用法::only-of-type

例如:

  • p span:only-of-type 在任意 <p> 中选出 <span> 子元素,且该 <span> 子元素是该类型的唯一元素。

最后类型伪类选择器

选出属于其父元素的特定类型的最后一个子元素的每个元素。

用法::last-of-type

类型是标签的种类,所以 <p><span> 是不同的类型。

例如:

  • div:last-of-type 在每个元素中选择最后的 <div> 元素。
  • p span:last-of-type s在每个 <p> 元素中选择最后的 <span> 元素。

空伪类选择器

选出没有子元素(包括文本节点)的每个元素。

用法::empty

例如:

  • div:empty 选择所有空的 <div> 元素。

否定伪类选择器

选出非指定元素/选择器的每个元素。

用法::not(X)

可以使用它来选择与选择器 "X" 不匹配的所有元素。

例如:

  • :not(#fancy) 选择所有不带 id="fancy" 的元素。
  • div:not(:first-child) 选择每个不是其父元素的第一子元素的 <div> 元素。
  • :not(.big, .medium) 选择所有不带 class="big"class="medium" 的元素。

属性与属性值选择器

属性选择器

选取带有指定属性的元素。

用法:[attribute]

属性显示在元素的开始标记内,如 <span attribute="value"> 。属性并不总是具有值,可以为空。

例如:

  • [type] 选择所有带有 type="任意属性值" 属性的元素。

用法:A[attribute]

可以通过将属性选择器添加到末尾,将其与另一个选择器(例如标签名称选择器)组合起来。

例如:

  • a[href] 选择所有带有 <href="任意属性值"> 属性的 <a> 元素。
  • input[disabled] 选择所有带有 disabled 属性的 <input> 元素。

属性值选择器

选取带有指定属性和值的元素。

用法:[attribute="value"]

属性选择器区分大小写,每个字符必须完全匹配。

例如:

  • input[type="checkbox"] 选择所有复选框输入元素。

以指定值开头的属性值选择器

选出属性值以指定值开头的每个元素。

用法:[attribute^="value"]

例如:

  • .toy[category^="Swim"] 选择带有 class="toy" 的元素并且带有 category="Swimwearcategory="Swimming"

以指定值结尾的属性值选择器

选出属性值以指定值结尾的每个元素。

用法:[attribute$="value"]

例如:

  • img[src$=".jpg"] 选择所有显示 .jpg 图片的 <img> 元素。

包含指定值的属性值选择器

选出属性值包含指定值的每个元素。

用法:[attribute*="value"]

例如:

  • img[src*="/thumbnails/"] 选择从 "thumbnails" 文件夹中显示图像的所有 <img> 元素。
  • [class*="heading"] 选择所有类名中带有 "heading" 的元素,如 class="main-heading"class="sub-heading"