CSS 中的选择器类型

CSS Photo by 潘卡伊·帕特尔 on 不飞溅

在 CSS 中，选择器起着至关重要的作用。在这里，您可以根据示例查看选择器的类型。

在此之前，了解特异性很重要，

CSS 的特殊性是什么？

它是选择器的顺序和它们的执行层次

执行优先级作品如下：

!important > 内联 > #ID > .class > 元素

现在，让我们看看选择器的类型，

1. 万能选择器——( * )

星号符号是一种选择器，它选择 全部 任何类型的元素。

 * {颜色：“绿色”； }

2.类型选择器（或）元素选择器

允许您通过以下方式匹配元素的选择器 节点名称 （或者） 标签名 被称为类型选择器

 p { _/* 这种类型会选择文档中的所有 p 个标签 */_ 颜色：“绿色”； }

3. 类选择器

• 类选择器根据 html 类属性中给出的名称值匹配元素

• 一个 . as 要添加在该名称前面以进行访问

• 广泛使用和推荐

  . 测试 { /*

  你好

  
  这里测试的是类属性的值 */
  颜色：“绿色”；
  }

4. ID 选择器

• id 选择器根据 html id 属性中给出的名称值匹配元素

• 通过使用访问 # 在名称值前面

• 只能以独特的方式使用，不强烈推荐

  测试{ _/*

  你好

  这里测试的是类属性的值 */_
  颜色：“绿色”；
  }

5. 属性选择器

• 这个 CSS 选择器根据元素的存在或属性中给出的值来选择元素。

  a[href="example.com"] { ... }
  /*href 值为 example.com 的锚标签将被定位 /
  _ ol[type="b"] { ... }
  _/ 由小字母组成的有序列表标签作为类型将被定位 */

6. 分组选择器

• 这 （ , ) 选择器选择两个匹配的节点

  div，跨度 { ... }
  /* 这完全匹配 div 和 span 元素 */

7. 组合器

7.1 后代组合子

元素之间的空白区域选择其父元素的所有指定子元素

 div 跨度 {...} _/* 这匹配 div 内的所有 span 元素 */_

7.2 子组合器

这 > 选择父元素的所有直接子元素

 div > 跨度 {...}  
 _/* 这匹配所有直接作为子元素的 div 标签的 span 元素 */_

7.3 相邻组合子

• 这 + 分隔两个元素是第二个元素是第一个元素的后续

• 对于上述情况，两个元素必须在同一个父元素下

  图像 + p { ... }
  /* 选择 img 标签之后的 p 标签，其中 img 和 p 都在同一个父元素下 */

8. 伪类

Pseudo Classes 让您不仅可以在元素位于 DOM 树中时将样式应用于元素，还可以根据用户交互添加样式

 一：悬停{ ... }  
 _/* 如果用户悬停在锚标签上，将应用 css 规则块 */  
_    
 .container:全屏 { ... }  
 _/* 当元素在全屏之间来回切换时，将应用此 css 规则 */  
_    
 输入：自动填充 { ... }  
 _/* 当浏览器自动填充时匹配输入 */_ *：启用 { ... }  
 _/* 表示 DOM 中所有启用的元素 */_  *：禁用 { ... }  
 _/* 表示 DOM 中所有禁用的元素 */_   
   
 输入：检查 { ... }  
 _/* 表示任何处于选中状态或切换状态的单选、选中、选择元素 */_  一条链接 { ... }  
 _/* 匹配尚未访问的锚元素 */  
_   
 一个：访问过 { ... }  
 _/* 匹配已经访问过的锚元素 */_ li:nth-child(arg)  
 _/* 选择与参数相关的所有 li 元素，参数将是奇数或偶数 */  
_   
 李：第一个孩子 { ... }  
 _/* 选择组中的第一个兄弟 */_ li:last-child { ... }  
 _/* 选择最后一个兄弟 */_ 按钮：活动 { ... }  
 _/* 表示用户正在激活的元素 */_   输入：焦点 { ... }  
 _/* 表示获得焦点的元素 */_

9. 伪元素

伪元素是添加到选择器的关键字，它允许对选定元素的特定部分进行样式设置，该部分最初不存在于 DOM 中

 p::第一行 { ... }  
 _/* 选择 p 标签的每一行 */_ 一个::{之后  
 _/* 这会在 a 标签的末尾添加一个新链接 */  
   _ 内容：'("attr(href)")';  
 } 一个::之前{  
 _/* 这会在 a 标签的开头添加一个新链接 */  
_ 内容：'("attr(href)")';  
 }  
 输入::占位符 { ... }  
 _/* 定位输入标签的占位符属性 */_   p::选择 { ... }  
 _/* 将样式应用于用户选择的部分内容 */_

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38644/30232211