CSS 选择器

本贴最后更新于 1026 天前,其中的信息可能已经事过景迁

什么是 CSS? CSS(层叠样式表)用于给文档添加样式,是描述 HTML 或 XML 文档样式的语言。 CSS 选择器规定了某些 CSS 规则会应用在哪些元素上。

基本选择器

  • 通用选择器 :* 选择所有的元素。(可选)也可以将其限制为特定的名称空间或所有名称空间 ns|**|*
  • 元素选择器 :elementname 选择元素名为 elementname 的元素。
  • 类选择器.classname 选择任何 class 属性中含有 classname 的元素。
  • ID 选择器#idname 选择 id 属性为 idname 的元素。一个文档中,每个 ID 属性都应当是唯一的。
  • 属性选择器 : 选择任何属性符合条件的元素。
    • [attr] 选择带有 attr 属性的所有元素;
    • [attr=value] 选择带有 attr 属性,并且 attr=“value”的所有元素
    • [attr~=value] 选择带有 attr 属性,并且 attr 的属性值中包含 value 的所有元素;
    • [attr|=value] 选择带有 attr 属性,并且 attr 的属性值以“value”开头的所有元素;
    • [attr^=value] 选择带有 attr 属性,并且 attr 的属性值以 value 开头的每个元素;(这里的匹配是正则匹配,所以选择器里面的 value 应该是 string)
    • [attr$=value] 选择带有 attr 属性,并且 attr 的属性值以 value 结尾的每个元素;(这里的匹配是正则匹配,所以选择器里面的 value 应该是 string)
    • [attr*=value] 选择带有 attr 属性,并且 attr 的属性值中包含 value 子串的每个元素;(这里的匹配是正则匹配,所以选择器里面的 value 应该是 string)

如果多个通用选择器紧挨在一起,表示选择同时满足所有选择器要求的元素。

分组选择器

  • 选择器列表 :选择所有能被列表中的任意一个选择器选中的节点。列表间的元素用 , 号分开。

例:div, span 会同时匹配 <span> 元素和 <div> 元素。

组合器

  • 后代组合器 (空格)组合器选择前一个元素的后代节点。
    • 例如,div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。
  • 直接子代组合器> 组合器选择前一个元素的直接子代的节点。
    • 例如:ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。
  • 一般兄弟组合器~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
    • 例如:p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素。
  • 紧邻兄弟组合器+ 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。

伪选择器

  • 伪类: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。实际上还是选择元素。类似于普通的类,可以在一个选择器中同时一起写多个伪类。
    • :active: 匹配被用户激活的元素。这个样式可能会被后声明的其他链接相关的伪类覆盖,为保证样式生效,需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序 ::link —>:visited —>:hover —>:active在有多键鼠标的系统中,CSS 3 规定 :active 伪类必须只匹配主按键;对于右手操作鼠标来说,就是左键。
    • :checked:任何处于选中状态的 radio (<input type="radio">),checkbox (<input type="checkbox">) 或("select") 元素中的 option HTML 元素("option")。
    • :default:一组相关元素中的默认表单元素。
    • :disabled :任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。
    • :empty:没有子元素的元素。子元素只可以是元素节点或文本(包括空格)。注释或处理指令都不会产生影响。
    • :enabled :表示任何被启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。
    • :first-child : 表示在一组兄弟元素中的第一个元素。
    • :first : 打印文档的时候,第一页的样式。
    • :first-of-type :表示一组兄弟元素中其类型的第一个元素。
    • :focus:表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
    • :focus-within:表示一个元素获得焦点,或,该元素的后代元素获得焦点。
    • :host :选择包含其内部使用的 CSS 的 shadow DOM 的根元素
    • :host():选择包含使用这段 CSS 的 Shadow DOM 的影子宿主(这样就可以从 Shadow DOM 中选择包括它的自定义元素)——但前提是该函数的参数与选择的阴影宿主相匹配。
    • :hover :使用指示设备虚指一个元素(没有激活它)的情况。
    • :indetermainate :表示状态不确定的表单元素
    • :in-range :代表一个 <input> 元素,其当前值处于属性 minmax 限定的范围之内.
    • :invaild :表示任意内容未通过验证的 <input> 或其他 <form> 元素
    • :lang() :基于元素语言来匹配页面元素。:lang(en)``:lang(fr)
    • :last-child :代表父元素的最后一个子元素。
    • :last-of-type :表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。
    • :left :对打印文档的左侧页设置 CSS 样式."从左到右"的书写方向中第一页应当使用 :right 配置; "从右至左"的书写方向中第一页应当使用 :left 配置.
    • :link:选中元素当中的链接。
    • :not():用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类negation pseudo-class )。
    • :nth-child:首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从 1 开始排序,选择的结果为 CSS 伪类:nth-child 括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。tr:nth-child(2n+1) 表示 HTML 表格中的奇数行
    • :nth-last-child:从兄弟节点中从后往前匹配处于某些位置的元素
    • :nth-last-of-type
    • :only-child:匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1)
    • :only-of-type
    • :optional:表示任意没有 required 属性的 <input><select><textarea> 元素使用它。
    • :out-of-range
    • :read-only:表示元素不可被用户编辑的状态(如锁定的文本输入框)。
    • :read-write:代表一个元素(例如可输入文本的 input 元素)可以被用户编辑。
    • :required
    • :right
    • :root:匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,
    • :scope:表示作为选择器要匹配的参考点的元素。在样式表中使用时,:scope 等效于 :root
    • :target:代表一个唯一的页面元素(目标元素),其 id 与当前 URL 片段匹配 .
    • :vaild
    • :visited
  • 伪元素:: 伪选择器用于表示无法用 HTML 语义表达的实体。会在选择的元素的某个位置插入实体。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
    • ::before:
    • ::after :用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
    • ::cue :匹配所选元素中的 WebVTT 提示。
    • ::first-letter 选中块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格) 。
    • ::first-line :选中块级元素第一行。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的 html 元素。
    • ::selection :CSS 伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。
    • ::slotted():用于选定那些被放在 HTML 模板 中的元素
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    184 引用 • 458 回帖 • 4 关注

相关帖子

回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...