乐趣区

关于css:CSS中常用的一些样式选择符

当波及到 CSS 选择器时,大多数人都相熟常见的选择器,如类选择器、ID 选择器、标签选择器等等。然而,CSS 还提供了一些较为冷门但实用的选择器,上面介绍几个:

通用选择器(Universal Selector):通用选择器应用 * 符号,能够匹配 HTML 文档中的任何元素。通用选择器不会抉择文档中不存在的元素,但会抉择 HTML 中的所有元素。

属性选择器(Attribute Selector):属性选择器能够依据元素的属性及其属性值抉择元素。例如,能够应用 [attribute=value] 选择器抉择所有属性名为 attribute 的元素,并且属性值等于 value。还有一些其余的属性选择器能够抉择属性的结尾或结尾等。

子串匹配选择器(Substring Matching Selector):子串匹配选择器能够依据元素的属性值中蕴含的子字符串抉择元素。例如,应用 [attribute*=value] 能够抉择所有属性名为 attribute 的元素,并且属性值中蕴含 value 子字符串。

后辈选择器(Descendant Selector):后辈选择器应用空格分隔,能够抉择元素的后辈元素。例如,应用 ul li 能够抉择所有嵌套在 ul 元素内的 li 元素。

邻接选择器(Adjacent Sibling Selector):邻接选择器应用 + 符号分隔,能够抉择紧接在另一个元素后的元素。例如,应用 h1 + p 能够抉择在 h1 元素后紧接着的 p 元素。

通用兄弟选择器(General Sibling Selector):通用兄弟选择器应用 ~ 符号分隔,能够抉择与另一个元素相邻的所有同级元素。例如,应用 h1 ~ p 能够抉择所有与 h1 元素同级的 p 元素。

:empty 伪类选择器:能够用来抉择没有子元素的元素,例如 div:empty 能够抉择所有没有子元素的 div 元素。
:not 伪类选择器:能够用来抉择除了某个元素之外的所有元素。例如,p:not(.intro) 能够抉择所有没有 intro 类的 p 元素。
:checked 伪类选择器:能够用来抉择被选中的表单元素,例如 input:checked 能够抉择所有被选中的 input 元素。
:target 伪类选择器:能够用来抉择以后流动的锚点元素,例如 #section1:target 能够抉择以后流动的 ID 为 section1 的锚点元素。
:nth-of-type() 伪类选择器:能够用来抉择特定类型的元素中的特定子元素。例如,ul li:nth-of-type(2) 能够抉择所有 ul 元素中的第二个 li 元素。
:first-of-type 伪类选择器:能够用来抉择某个元素下第一个呈现的特定类型的子元素。例如,ul li:first-of-type 能够抉择每个 ul 中第一个 li 元素。
:last-of-type 伪类选择器:能够用来抉择某个元素下最初一个呈现的特定类型的子元素。例如,ul li:last-of-type 能够抉择每个 ul 中最初一个 li 元素。
:only-of-type 伪类选择器:能够用来抉择某个元素下惟一的特定类型的子元素。例如,div p:only-of-type 能够抉择每个 div 中惟一的 p 元素。
:lang() 伪类选择器:能够用来抉择特定语言的元素。例如,p:lang(en) 能够抉择所有带有 “en” 语言属性的 p 元素。
:root 伪类选择器:能够用来抉择文档的根元素,即 html 元素。例如,:root {font-size: 16px;} 能够将文档中所有元素的字体大小设置为 16px。

:focus-within 伪类选择器:能够用来抉择蕴含有焦点元素的父元素。例如,:focus-within {background-color: yellow;} 能够将蕴含有焦点元素的父元素的背景色设置为黄色。
[attribute^=value] 属性选择器:能够用来抉择具备特定属性值的元素。例如,input[type^=”button”] 能够抉择所有 type 属性值以 “button” 结尾的 input 元素。
[attribute$=value] 属性选择器:能够用来抉择具备特定属性值的元素。例如,a[href$=”.pdf”] 能够抉择所有 href 属性值以 “.pdf” 结尾的 a 元素。
[attribute=value] 属性选择器:能够用来抉择具备特定属性值的元素。例如,input[name=”user”] 能够抉择所有 name 属性值蕴含 “user” 的 input 元素。
: : before 和 : : after 伪元素选择器:能够用来在元素内容之前或之后插入内容。例如,p::before {content: “>>”;} 能够在每个 p 元素内容之前插入 “>>” 字符串。

这些是比拟罕用但比拟冷门的 CSS 选择器,能够依据须要应用它们来抉择特定的元素。同时,须要留神应用选择器时要尽量避免适度应用简单选择器,以放弃样式表的简洁和性能。

退出移动版