首页 > 其他分享 >CSS 中的选择器类型

CSS 中的选择器类型

时间:2022-09-22 11:46:53浏览次数:96  
标签:... 匹配 标签 元素 类型 选择器 CSS

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

标签:...,匹配,标签,元素,类型,选择器,CSS
From: https://www.cnblogs.com/amboke/p/16718678.html

相关文章

  • CSS带小三角形的div框
    效果图:<spanclass="hint_prompt">超时20天</span>.hint_prompt{border:1pxsolid#fff1f0;border-radius:4px;margin:50px;text-align:center;bor......
  • 通过异或(^)实现基本数据类型(浮点型除外)值互换
    一般情况下,我们要实现值替换的时候需要引入一个中间变量,以int为例代码如下inta=10,b=20;//中间变量inttemp;temp=a;a=b;b=temp;//a=20,b=10......
  • CSS3动画
    简介CSSanimations使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。......
  • css 列表样式,<a> 连接文字超长省略
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • 仅使用 CSS 和 HTML 制作动画加载屏幕
    仅使用CSS和HTML制作动画加载屏幕关于如何仅使用CSS和HTML开发动画加载屏幕的教程编写一个简单的加载屏幕很容易。但是编写一个可以移动的动画加载屏幕确实具有......
  • CSS:浏览器的内核及了解,有哪些常见的浏览器内核?(面试题)
    浏览器的内核及了解?有哪些常见的浏览器内核?     浏览器要渲染出网页给用户看必须加载htm编码和js脚本渲染引擎渲染页面的UI和jd执行引擎操作内存,就是浏览器的内......
  • Typescript学习之路(2) - 类型简述
    什么是强类型语言/弱类型语言?强类型语言老式定义:在强类型语言中,当一个对象从调用函数传递到被调用函数时,其类型必须与被调用函数中声明的类型兼容。A(){B(x)}B......
  • Typescript学习之路(3) - 基础数据类型介绍
    安装TSnpmi-gtypescriptTips:因为使用的命令是tsc,这里安装的时候好多人都错误写成了 npmi-gtsc❎,结果在使用的时候就会被提示,安装的不对,要重新安装。TS转换JS......
  • Flask 学习-71.Flask-RESTX 枚举类型Enum字段
    前言model中有枚举类型字段使用示例模型设计classTeachers(db.Model):__tablename__='teacher'#数据库表名id=db.Column(db.Integer,primary_key=T......
  • Go语言基础之基本数据类型
    基本数据类型    Go语言中有丰富的数据类型,除了基本的整型、浮点型、布尔型、字符串外,还有数组、切片、结构体、函数、map、通道(channel)等。Go语言的基本类型和其他......