CSS选择器-一文搞懂CSS选择器

CSS选择器

  • 一、简单选择器和权值
    • 1. 通配符选择器 (权值 - 0)
    • 2. 标签选择器 (权值 - 1)
    • 3. 类选择器和伪类 (权值 - 10 )
    • 4. ID选择器 (权值 - 100)-精确制导
    • 行内样式 - 它不是选择器-权重 1000 -融入血液
  • 二、复杂选择器
    • 1. 并集选择器- 逗号
    • 2. 子代选择器-只选儿子-大于号 >
    • 3. 后代选择器 - 子孙都可选 - 空格
    • 4. 兄弟选择器之 + 加号 -不影响该标签前面的元素
    • 5. 兄弟选择器之 ~ 波浪号 -不影响该标签前面的元素
    • 6. 伪类选择器 - 单冒号
      • 6.1 动态伪类选择器-常用于鼠标事件和获取焦点的处理
      • 6.2 结构伪类选择器
    • 7. 伪元素选择器 - 双冒号
    • 8. 属性选择器

一、简单选择器和权值

在这里插入图片描述

1. 通配符选择器 (权值 - 0)

  • 语法结构: * { 属性名:value; }
  • 作用:统一页面风格样式,设置页面所有标签的通用属性样式,比如 margin 和 padding,文字字号、颜色等;

2. 标签选择器 (权值 - 1)

  • 语法结构: 标签名 { 属性名:value; }
  • 作用:统一页面中标签名相同的元素的风格样式;比通配符精确了一点。

3. 类选择器和伪类 (权值 - 10 )

伪类的本质也是类,所以权值一样;

  • 语法结构: .类名{属性名:value;}
  • 作用:可以给某一类的风格样式添加到不同的标签中(这些标签可以相同的标签名,也可以不是相同的标签名),相对标签选择器更加灵活,范围也更大,属于给某一些标签打了标记,对这些打标记的标签设置共同的样式。

4. ID选择器 (权值 - 100)-精确制导

ID选择器属于精确制导,给页面中的一个标签,定一个唯一的标识符,和类的区别是,类可以标识很多标签,但是 ID 选择器只标识唯一的,这就是精确制导,目标很明确。

  • 语法结构: #ID_NAME{属性名:value;}
  • 作用:精确的控制某个标签的样式;

行内样式 - 它不是选择器-权重 1000 -融入血液

它不是选择器,因为它没得选,只跟随当前元素;

  • 语法结构 <标签名 style=“属性名:value;” />
  • 作用:一直粘着跟随着当前元素,且这个融入到血液中去,不能轻易被改变;

二、复杂选择器

在这里插入图片描述

1. 并集选择器- 逗号

  • 语法结构:选择器1, 选择器2{…} – 建议逗号后换行书写,可读性更强。
  • 作用:给这些选择器设置通用的样式;

2. 子代选择器-只选儿子-大于号 >

  • 语法结构: 父亲选择器>儿子选择器{…}
  • 作用:设置父元素的直接下级元素的样式;

3. 后代选择器 - 子孙都可选 - 空格

  • 语法结构:父亲 儿子 孙子…{ … }
  • 作用:选择某个元素内的任意元素,被选中的元素都是同一个祖先;

4. 兄弟选择器之 + 加号 -不影响该标签前面的元素

只选择按照流的顺序,即文档中元素的书写书序往下找到和自己相临的第一个同级元素。

  • 场景:大哥小声的对后面的小弟说:“兄弟上”;这大哥声音太小,就后面紧挨着的这个小弟能听到,于是这个小弟上了。- 只是小弟干事,大哥不动,也就是只是小弟的样式生效
  • 语法结构:a+button {…}
  • 作用:上面的解读:选中a标签后面的同级的button元素,设置这个button的样式,并不设置 a 标签的样式。

5. 兄弟选择器之 ~ 波浪号 -不影响该标签前面的元素

  • 场景:大哥拿着个大喇叭对后面一排兄弟喊:“后面的兄弟们上啊”;后面的小弟们都能听到,于是蜂拥而上了。
  • 语法结构:a~button{color:red;}
  • 作用:a 大哥发话让后面的 一众小弟 button 生效, a 并不生效。

6. 伪类选择器 - 单冒号

伪类选择器的作用:给某些元素添加特殊效果

6.1 动态伪类选择器-常用于鼠标事件和获取焦点的处理

下面以 a 标签举例

  • a:link - 只能用于a标签,未被点击过的链接样式
  • a:visited - 只用于 a 标签,被点击过后的链接样式
  • a:active - 定义鼠标按下时,且未抬起鼠标按键情况下的样式
  • a:hover - 鼠标悬停时元素的样式
  • input:focus - 选择获得焦点的表单元素的样式设置

6.2 结构伪类选择器

主要是针对于选中元素中的子元素来进行设置布局结构响应的样式。
常用的结构伪类选择器如下(下文的E代表父元素中的某类选择器选中的子元素集合):

  1. E:first-child 它是父元素的第一个元素,且第一个元素是E元素 - 比如 div p:first-child{} 选中的是div 中的第一个元素是p 元素,如果第一个元素不是p 元素,假如div 的第一个子元素是a 那么这个选择器 div p:first-child 的样式是无效的。
  2. E:last-child 最后一个E元素 - 比如 div p:last-child{} 选中的是div 中的最后一个p 元素
  3. E:nth-child(n) 第n 个E元素 - 比如 div p:nth-child(1){} 选中的是div 中的第一个p 元素,和 E:first-child 等效;
  4. E:nth-last-child(n) 倒数第n 个E元素 - 比如 div p:nth-last-child(1){} 选中的是div 中的倒数第一个p 元素,和 E:last-child 等效;
  5. E:first-of-type 找到第一个元素类型是E元素(不一定是父元素中的第一个元素) - 比如 div p:first-of-type{} 选中的是div 中 p 元素集合的第一个元素
  6. E:last-of-type 和上述的5 类似,只是它标识的是最后一个元素
  7. E:nth-of-type 结合3 和5 理解
  8. E:nth-last-of-type 结合 4和6 进行理解
  9. E:not(exception) 不满足 exception 条件的 E 元素,比如 div p:not(.first-p){} 选中的是:div 中所有类名不是 first-p 的 p 元素

7. 伪元素选择器 - 双冒号

作用:使用 CSS 创建新的元素(标签),不真实存在于 html 结构树中,达到简化HTML 结构的目的。因此多少情况下也用于清除浮动,或者添加装饰物。
常用的伪元素选择器有:

  1. E::before 在E元素之前添加一个元素,需要有 content属性配合使用
  2. E::after 用法同上,在E元素之后添加一个元素。
  3. E::first-letter 给第一个字母添加样式
  4. E::first-line 给第一行添加特殊样式
  5. E::selection 给被选中或高粱状态的 E 元素添加特殊样式

8. 属性选择器

  • 写法1:选择器[属性名]{…}

    • 语法:选择器[属性名]{…} 比如: div[title]{ font-weight:600;}
    • 作用:选中有 title 属性的 div 设置文字为粗体 ,像这种会被选中
      <div title="hello">Hello</div>
  • 写法2:选择器[属性名=“hello”]{…}

    • 语法:选择器[属性名=“hello”]{…} 比如: div[title=“hello”]{ font-weight:600;}
    • 作用:选中有 title 属性的且该属性的值等于“hello”的 div 设置文字为粗体 ,像这种会被选中
    <div title="hello">Hello</div> <!-- 生效-->
    <div title="hello1">Hello1</div>  <!-- 不生效-->
    
  • 写法3:选择器[属性名 * = “hello”]{…}

    • 语法:选择器[属性名 * = “hello”]{…} 比如: div[title~=“ello”]{ font-weight:600;}
    • 作用:选中有 title 属性的 div ,切这个title 属性对应的值中包含了“ello”的元素,将其设置文字为粗体 ,像这种会被选中
    <div title="hello">Hello</div> <!-- 生效-->
    <div title="hello1">Hello1</div>  <!-- 生效-->
    
  • 写法4:选择器[属性名^=“hel”]{…}
    由写法 3 可以延伸出 属性值以某个字符串片段开始的写法

    • 语法:选择器[属性名^=“hel”]{…}
    <div title="hello">Hello</div> <!-- 生效-->
    <div title="hello1">Hello1</div>  <!-- 生效-->
    
  • 写法5:选择器[属性名$=“llo”]{…}
    以某个字符串片段为结尾

    • 语法:选择器[属性名$=“llo”]{…}
    <div title="hello">Hello</div> <!-- 生效-->
    <div title="hello1">Hello1</div>  <!-- 不生效-->
    

上述的写法中[ ]可以是多个,即多个属性满足条件时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cassandra 集群安装部署

文章目录 一、概述1.官方文档2. 克隆服务器3.安装说明4.安装准备4.1.安装 JDK 114.2.安装 Python4.3.下载文件 二、安装部署1.配置 Cassandra2.启动 Cassandra3.关闭Cassandra4.查看状态5.客户端连接服务器6.服务运行脚本 开源中间件 # Cassandrahttps://iothub.org.cn/docs/m…

3.2 Beautiful Soup 的使用

目录 一、Beautiful Soup 的简介 二、解析器 三、基本使用 四、节点选择器 1 选择元素 2 获取名称、属性、文本内容 五、方法选择器 1 find_all 传入 name 节点名 传入 attrs 属性 传入 text 2 find 六、CSS 选择器 1 实例 2 获取属性 3 获取文本 七、结语 一…

从政府工作报告探计算机行业发展(在医疗健康领域)

从政府工作报告探计算机行业发展 政府工作报告作为政府工作的全面总结和未来规划&#xff0c;不仅反映了国家整体的发展态势&#xff0c;也为各行各业提供了发展的指引和参考。随着信息技术的快速发展&#xff0c;计算机行业已经成为推动经济社会发展的重要引擎之一。因此&…

暴雨信息:可持续转型更需要“以人为本”

数字化正在开启新的商业模式和价值流&#xff0c;为企业与组织带来巨大收益。其中&#xff0c;“人 (People)”这一因素至关重要。 提供更好的工作与生活体验&#xff0c;应对人口老龄化、劳动力短缺等挑战。对于企业而言&#xff0c;解决这些问题既是社会责任&#xff0c;也是…

代码随想录算法训练营第五十五天| 583. 两个字符串的删除操作 、72. 编辑距离

文章目录 1.两个字符串的删除操作2.编辑距离 1.两个字符串的删除操作 给定两个单词 word1 和 word2&#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步可以删除任意一个字符串中的一个字符。 示例 1&#xff1a; 输入: word1 “sea”, word2 “eat” 输出: 2 …

山景BP1048 烧录器烧写

1.首先确保硬件连接没问题&#xff0c;烧写器不能亮红灯&#xff0c;亮红灯说明硬件没正确连接。硬件连接如下&#xff1a; 2.点击Flash Burner 3.编程目标闪存选择SDK包自带的烧写驱动器&#xff0c;闪存映像档选择编译好的bin文件。 4.点击刻录 5.看见有进度条在跑&#x…

计算机网络——计算机网络体系结构

计算机网络——计算机网络体系结构 计算机网络体系结构的由来正确认识分层协议与层次划分著名的几个体系结构OSI体系结构TCP/IP体系结构5层体系结构 我们今天来了解一下计算机网络体系结构&#xff1a; 计算机网络体系结构的由来 俗话说&#xff0c;“没有规矩&#xff0c;不…

深入理解与应用Keepalive机制

目录 引言 一、VRRP协议 &#xff08;一&#xff09;VRRP概述 1.诞生背景 2.基本理论 &#xff08;二&#xff09;VRRP工作原理 &#xff08;三&#xff09;VRRP相关术语 二、keepalive基本理论 &#xff08;一&#xff09;基本性能 &#xff08;二&#xff09;实现原…

FreeRTOS操作系统学习——中断管理

中断管理介绍 嵌入式实时系统需要对整个系统环境产生的事件作出反应。这些事件对处理时间和响应时间都有不同的要求。事件通常采用中断方式检测&#xff0c;中断服务例程(ISR)中的处理量应当越短越好。ISR是在内核中被调用的&#xff0c; ISR执行过程中&#xff0c;用户的任务…

解决代理IP无法连接特定网站的问题

目录 一、问题原因分析 二、解决方案 三、案例与代码示例 四、总结 在网络爬虫、数据抓取、或者是网络加速等场景下&#xff0c;使用代理IP是一个常见的做法。然而&#xff0c;在实际使用过程中&#xff0c;有时会遇到代理IP无法连接特定网站的问题&#xff0c;这不仅影响了…

计讯物联智慧合杆在智慧城市中的应用

随着智慧城市数字化的建设与发展&#xff0c;5G智慧合杆不仅成为智慧城市感知网络体系的重要载体&#xff0c;也是发展智慧城市IoT的重要基础。在今年两会中&#xff0c;全国政协委员提出&#xff0c;探索“智慧灯杆5G基站”“多杆合一”试点示范&#xff0c;实现社会资源共享。…

微信小程序问题定位——sourcemap文件

使用sourceMap在微信小程序中进行线上问题定位&#xff0c;主要可以通过以下步骤实现&#xff1a; 下载微信开发者工具首先&#xff0c;确保已经安装了微信开发者工具&#xff0c;这是进行小程序开发和调试的基础。登录微信公众平台并下载sourceMap文件&#xff1a;登录微信小…

Windows系统下载安装Emby结合内网穿透实现公网访问本地影音网站

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

(差分)胡桃爱原石

琴团长带领着一群胡桃准备出征&#xff0c;进攻丘丘人&#xff0c;出征前&#xff0c;琴团长根据不同胡桃的战力&#xff0c;发放原石作为军饷&#xff0c;琴团长分批次发放&#xff0c;每批次会给连续的几个胡桃发放相同的原石&#xff0c;琴团长最后想知道给每个胡桃发放了多…

Java异常分类(三)

ClassCastException异常&#xff1a; class Animal{} class Dog extends Animal{} class Cat extends Animal{} public class Test5{public static void main(String[] args){Animal a new Dog();Cat c (Cat)a;} } 执行结果如图所示&#xff1a; 解决 ClassCastException 的…

部署docker仓库harbor

1、下载包 1、包已上传有两个harbor.v2.6.0.tar与harbor.tar 2、harbor.tar解压后会生成harbor目录&#xff0c;将harbor.v2.6.0.tar移动到harbor目录下。 3、执行harbor目录下的install.sh 4、执行完后修改配置文件 2、修改配置文件 vim /root/harbor/make/ harbor.yml.tmpl …

python中的排序函数用法:A.sort(key=lambda x: abs(x), reverse=True)

这行代码是Python中对列表A进行排序的一个例子。具体来说&#xff0c;它使用了sort()方法来对列表进行排序&#xff0c;并且利用了key和reverse参数来控制排序的方式。 解释如下&#xff1a; A.sort()&#xff1a;这是对列表A进行排序的方法。sort()方法会改变原列表A的顺序&…

Tomcat下载安装及纯手动发布一个应用

文章目录 javaWeb介绍一. 下载tomcat二、部署Web项目准备三. 验证tomcat配置是否成功四、安装包中各个文件的解释与用途五、纯手动部署web项目 javaWeb介绍 1、什么是JavaWeb&#xff1f; JavaWeb是一种使用Java语言编写的基于Web的应用程序开发技术。它是通过Java的Web开发框…

傅立叶之美:深入研究傅里叶分析背后的原理和数学

一、说明 T傅里叶级数及其伴随的推导是数学在现实世界中最迷人的应用之一。我一直主张通过理解数学来理解我们周围的世界。从使用线性代数设计神经网络&#xff0c;从混沌理论理解太阳系&#xff0c;到弦理论理解宇宙的基本组成部分&#xff0c;数学无处不在。 当然&#xff0c…

Mysql批量更新: on duplicate key update

ON DUPLICATE KEY UPDATE 语句&#xff1a; 是MySQL中的一个特性&#xff0c;允许在插入数据时如果发现主键或者唯一索引重复时&#xff0c;直接更新数据&#xff0c;支持批量更新。 语法如下&#xff1a; INSERT INTO table_name (column1,column2,column3, ...) VALUES (val…