Skip to content

CSS 基础

CSS 指层叠样式表 (Cascading Style Sheets)。

将 CSS 应用于文档的三种方法:使用外部样式表、使用内部样式表和使用内联样式。

CSS 的语法基本上是这样的:

css
选择器 {
  属性: 值;
}

本文不会详细介绍 CSS 的各个方面,而是选取其中一些重要的知识点进行介绍。

CSS 选择器

类型、类和 ID 选择器

  • 类型选择器:pdivspan
  • 类选择器:.class
  • ID 选择器:#id
  • 全局选择器:*

属性选择器

选择器示例描述
[attr]a[title]匹配带有一个名为attr的属性的元素
[attr=value]a[href="https://example.com"]匹配带有一个名为attr的属性的元素,其值正为value
[attr~=value]p[class~="special"]匹配带有一个名为attr的属性的元素,其值正为value,或者匹配带有一个attr属性的元素,其值有一个或者更多,至少有一个和value匹配。注意,在一列中的好几个值,是用空格隔开的。
[attr|=value]div[lang|="zh"]匹配带有一个名为attr的属性的元素,其值可正为value,或者开始为value,后面紧随着一个连字符。
[attr^=value]li[class^="box-"]匹配带有一个名为attr的属性的元素,其值开头为value子字符串。
[attr$=value]li[class$="-box"]匹配带有一个名为attr的属性的元素,其值结尾为value子字符串
[attr*=value]li[class*="box"]匹配带有一个名为attr的属性的元素,其值的字符串中的任何地方,至少出现了一次value子字符串。

伪类选择器

伪类是选择器的一种,它用于选择处于特定状态的元素。比如某一类型的第一个元素,鼠标悬浮的元素等等。伪类并不是类,而是选择器,但 它表现地就像类一样。伪类可以帮我们减少多余的类,让代码更加灵活,更易于维护。

伪类就是开头为冒号的关键字:

:pseudo-class-name
伪类
选择器描述
:active在用户激活(例如点击)元素的时候匹配。
:any-link匹配一个链接的:link和:visited状态。
:blank匹配空输入值的<input>元素。
:checked匹配处于选中状态的单选或者复选框。
:current (en-US)匹配正在展示的元素,或者其上级元素。
:default匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir基于其方向性(HTMLdir属性或者 CSSdirection属性的值)匹配一个元素。
:disabled匹配处于关闭状态的用户界面元素
:empty匹配除了可能存在的空格外,没有子元素的元素。
:enabled匹配处于开启状态的用户界面元素。
:first匹配分页媒体的第一页。
:first-child匹配兄弟元素中的第一个元素。
:first-of-type匹配兄弟元素中第一个某种类型的元素。
:focus当一个元素有焦点的时候匹配。
:focus-visible当元素有焦点,且焦点对用户可见的时候匹配。
:focus-within匹配有焦点的元素,以及子代元素有焦点的元素。
:future (en-US)匹配当前元素之后的元素。
:hover当用户悬浮到一个元素之上的时候匹配。
:indeterminate匹配未定态值的 UI 元素,通常为复选框。
:in-range用一个区间匹配元素,当值处于区间之内时匹配。
:invalid匹配诸如的位于不可用状态的元素。
:lang基于语言(HTMLlang属性的值)匹配元素。
:last-child匹配兄弟元素中最末的那个元素。
:last-of-type匹配兄弟元素中最后一个某种类型的元素。
:left在分页媒体中,匹配左手边的页。
:link匹配未曾访问的链接。
:local-link (en-US)匹配指向和当前文档同一网站页面的链接。
:is()匹配传入的选择器列表中的任何选择器。
:not匹配作为值传入自身的选择器未匹配的物件。
:nth-child匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。
:nth-of-type匹配某种类型的一列兄弟元素(比如,<p>元素)——兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个)。
:nth-last-child匹配一列兄弟元素,从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
:nth-last-of-type匹配某种类型的一列兄弟元素(比如,<p>元素),从后往前倒数。兄弟元素按照an+b形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
:only-child匹配没有兄弟元素的元素。
:only-of-type匹配兄弟元素中某类型仅有的元素。
:optional匹配不是必填的 form 元素。
:out-of-range按区间匹配元素,当值不在区间内的的时候匹配。
:past (en-US)匹配当前元素之前的元素。
:placeholder-shown匹配显示占位文字的 input 元素。
:playing匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“播放”的元素。
:paused匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“暂停”的元素。
:read-only匹配用户不可更改的元素。
:read-write匹配用户可更改的元素。
:required匹配必填的 form 元素。
:right在分页媒体中,匹配右手边的页。
:root匹配文档的根元素。
:scope匹配任何为参考点元素的的元素。
:valid匹配诸如<input>元素的处于可用状态的元素。
:target匹配当前 URL 目标的元素(例如如果它有一个匹配当前URL 分段的元素)。
:visited匹配已访问链接。

伪元素选择器

伪元素表现得是像你往标记文本中加入全新的 HTML 元素一样,而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

备注

一些早期的伪元素曾使用单冒号的语法,所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容,支持早期的带有单双冒号语法的伪元素。

伪元素
选择器描述
::after匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter匹配元素的第一个字母。
::first-line匹配包含此伪元素的元素的第一行。
::grammar-error匹配文档中包含了浏览器标记的语法错误的那部分。
::selection匹配文档中被选择的那部分。
::spelling-error匹配文档中包含了浏览器标记的拼写错误的那部分。

关系选择器

  • 后代选择器:A B,匹配 A 元素的后代 B 元素
  • 子代选择器:A > B,匹配 A 元素的子元素 B
  • 相邻兄弟选择器:A + B,匹配 A 元素的相邻兄弟元素 B
  • 通用兄弟选择器:A ~ B,匹配 A 元素的兄弟元素 B

参考

最近更新于:

Released under the MIT License