CSS选择器

第 15 / 154 卷日期：2024-02-01

普通流

普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

CSS选择器

选择器	例子	例子描述
.class	.intro	选择class=“intro”的所有元素。
.class1.class2	.name1.name2	选择class属性中同时有name1和name2的所有元素。
.class1 .class2	.name1 .name2	选择作为类名name1元素后代的所有类名name2元素。
#id	#firstname	选择id=“firstname”的元素。
*	*	选择所有元素。
element	p	选择所有元素。
element.class	p.intro	选择class=“intro”的所有元素。
element,element	div, p	选择所有元素和所有元素。
element element	div p	选择元素内的所有元素。
element>element	div > p	选择父元素是的所有元素。
element+element	div + p	选择紧跟元素的首个元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。
[attribute]	[target]	选择带有target属性的所有元素。
[attribute=value]	[target=_blank]	选择带有target=“_blank”属性的所有元素。
[attribute~=value]	[title~=flower]	选择title属性包含单词“flower”的所有元素。
[attribute	=value]	[lang
[attribute^=value]	a[href^=“https”]	选择其src属性值以“https”开头的每个元素。
[attribute$=value]	a[href$=“.pdf”]	选择其src属性以“.pdf”结尾的所有元素。

::after	p::after	在每个的内容之后插入内容。
::before	p::before	在每个的内容之前插入内容。
:checked	input:checked	选择每个被选中的元素。
:default	input:default	选择默认的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
::first-letter	p::first-letter	选择每个元素的首字⺟。
::first-line	p::first-line	选择每个元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:focus	input:focus	选择获得焦点的input元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的input元素。
:indeterminate	input:indeterminate	选择处于不确定状态的input元素。
:invalid	input:invalid	选择具有无效值的所有input元素。
:lang(language)	p:lang(it)	选择lang属性等于“it”（意大利）的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not§	选择非元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。

全站分卷索引 · 154 卷