CSS中所有选择器详解

文章目录

  • 一、基础选择器
    • 1.标签选择器
    • 2.类选择器
    • 3.id选择器
    • 4.通配符选择器
  • 二、复合选择器
    • 1.交集选择器
    • 2.并集选择器
  • 三、属性选择器
    • 1.[属性]
    • 2.[属性=属性值]
    • 3.[属性^=属性值]
    • 4.[属性$=属性值]
    • 5.[属性*=属性值]
  • 四、关系选择器
    • 1.父亲>儿子
    • 2.祖先 后代
    • 3.兄+弟
    • 4.兄~弟
  • 五、伪类选择器
  • 六、伪元素选择器

一、基础选择器

1.标签选择器

语法结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有的这类标签,并设置样式。
注意

  • 标签选择器选择的是一类标签,而不是单独的一个。
  • 标签选择器无论嵌套关系有多深,都能够找到对应的标签。
<style>p {color: red;}
</style>
<body><div>111<p>2222<div>333<p>444</p></div></p></div>
</body>

在这里插入图片描述

2.类选择器

语法结构:.类名{css属性名:属性值;}
作用:通过类名,找到页面中所有的带有这个类名的标签,并设置样式。
注意

  • 所有的标签上都有class属性,class属性的属性值成为类名。
  • 类名可以由数字,字母,下划线,中划线组成,但是不能以数字开头
  • 一个标签中可以同时有多个类名,类名之间用空格隔开。
  • 类名可以重复,一个类选择器可以同时选中多个标签。
<style>.class-one {color: red;}.class-two {font-weight: bold;}
</style>
<body><div class="class-one">111<div><div class="class-one class-two">222</div></div></div></body>

在这里插入图片描述

3.id选择器

语法结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,并设置样式。
注意

  • 所有的标签上都有id属性。
  • id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的。
  • 一个标签上只能有一个id属性值。
  • 一个id选择器只能选中一个标签。
<style>#id-one {color: red;}
</style>
<body><div id="id-one">111</div>
</body>

在这里插入图片描述

4.通配符选择器

语法结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,然后设置样式。
注意

  • 开发中应用极少,只有在特殊的情况下才会使用。
  • 在页面中可能会用于去除页面中默认的margin和padding。
<style>* {margin: 0;padding: 0;}
</style>
<body><div>111</div>
</body>

在这里插入图片描述

二、复合选择器

1.交集选择器

语法结构:选择器1选择器2{css样式}
作用:选中页面中同时满足多个选择器的标签。
注意

  • 多个选择器之间没有任何东西隔开,紧挨着的。
  • 交集选择器中如果有标签选择器,标签选择器必须放在前面
<style>div.class-one {color:red;}div#id-one {color:green;}
</style>
<body><div class="class-one">111</div><div id="id-one">222</div><div>333</div>
</body>

在这里插入图片描述

2.并集选择器

语法结构:选择器1,选择器2{css样式}
作用:同时选择多组标签,设置相同的样式。
注意

  • 选择器与选择器之间用,隔开。
<style>p, div, .class-one {color: red;}
</style>
<body><div class="class-one">111</div><div>222</div><p>333</p>
</body>

在这里插入图片描述

三、属性选择器

1.[属性]

作用:选中含有指定属性的元素。

<style>[title] {color: red;}
</style>
<body><div title="111">111</div><div>222</div>
</body>

在这里插入图片描述

2.[属性=属性值]

作用:选中含有指定属性和指定属性值的元素。
注意

  • 属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。
<style>[title=aaa] {color: red;}
</style>
<body><div title="aaa">aaa</div><div title="bbb">bbb</div>
</body>

在这里插入图片描述

3.[属性^=属性值]

作用:选中含有指定属性和指定属性值开头的元素。
注意

  • 属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。
<style>[title^=aaa] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="aa">bbb</div>
</body>

在这里插入图片描述

4.[属性$=属性值]

作用:选中含有指定属性和指定属性值结尾的元素。
注意

  • 属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。
<style>[title$=aaa] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="bbb-aaa">bbb</div>
</body>

在这里插入图片描述

5.[属性*=属性值]

作用:选中指定属性和含有指定属性值的元素。
注意

  • 属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。
<style>[title*=a] {color: red;}
</style>
<body><div title="aaa-one">aaa</div><div title="bbb-aaa">bbb</div>
</body>

在这里插入图片描述

四、关系选择器

1.父亲>儿子

作用:选择某元素后面的第一代子元素。

<style>.class-one > .class-two {color: red;}
</style>
<body><div class="class-one"><div class="class-two">aaa</div><div><div class="class-two">bbb</div></div></div>
</body>

在这里插入图片描述

2.祖先 后代

作用:选择某元素后面的所有子元素。

<style>.class-one .class-two {color: red;}
</style>
<body><div class="class-one"><div class="class-two">aaa</div><div><div class="class-two">bbb</div></div></div>
</body>

在这里插入图片描述

3.兄+弟

作用:可选择紧接在另一元素后的元素,且二者有相同父元素。

<style>.class-one+.class-two {color: red;}
</style>
<body><div class="class-one">aaa</div><div class="class-two">bbb</div>
</body>

在这里插入图片描述

4.兄~弟

作用:选取某个元素之后的所有相同元素。
注意

  • 比如.class-one ~ h2 这句就是选取 .class-one后面所有的 h2。
  • 这个选择器两种元素必须处于同一个父元素内,被选取的元素不必直接紧随
<style>.class-one ~ .class-two {color: red;}
</style>
<body><div class="class-one">aaa</div><div><div class="class-two">bbb</div></div><div class="class-two">ccc</div>
</body>

在这里插入图片描述

五、伪类选择器

请浏览博客:CSS中伪类详解和用法例子详解

六、伪元素选择器

请浏览博客:CSS中伪元素详解和用法例子详解

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

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

相关文章

【EI/SCOPUS征稿】2023年算法、图像处理与机器视觉国际学术会议(AIPMV2023)

2023年算法、图像处理与机器视觉国际学术会议&#xff08;AIPMV2023&#xff09; 2023 International Conference on Algorithm, Image Processing and Machine Vision&#xff08;AIPMV2023&#xff09; 2023年算法、图像处理与机器视觉国际学术会议&#xff08;AIPMV2023&am…

Flink - sink算子

水善利万物而不争&#xff0c;处众人之所恶&#xff0c;故几于道&#x1f4a6; 文章目录 1. Kafka_Sink 2. Kafka_Sink - 自定义序列化器 3. Redis_Sink_String 4. Redis_Sink_list 5. Redis_Sink_set 6. Redis_Sink_hash 7. 有界流数据写入到ES 8. 无界流数据写入到ES 9. 自定…

Python批量查字典和爬取双语例句

最近&#xff0c;有网友反映&#xff0c;我的批量查字典工具换到其它的网站就不好用了。对此&#xff0c;我想说的是&#xff0c;互联网包罗万象&#xff0c;网站的各种设置也有所不同&#xff0c;并不是所有的在线字典都可以用Python爬取的。事实上&#xff0c;很多网站为了防…

iphone备份用什么软件?好用的苹果数据备份工具推荐!

众所周知&#xff0c;如果要将iPhone的数据跟电脑进行传输备份的话&#xff0c;我们需要用到iTunes这个pc工具。但是对于iTunes&#xff0c;不少人都反映这个软件比较难用&#xff0c;用不习惯。于是&#xff0c;顺应时代命运的iPhone备份同步工具就出现了。那iphone备份用什么…

AirLink 101 Wireless N 150 PCI Adapter驱动和管理软件

从光盘里拷出来的&#xff0c;界面比较复古&#xff0c;实际功能聊胜于无 链接&#xff1a;https://pan.baidu.com/s/1clUcp7QsF8QMWdGoZkc_dQ?pwdmkra 提取码&#xff1a;mkra

抖音mcn的概念是什么?申请需要什么条件?

MCN&#xff0c;即多渠道网络&#xff0c;是一种服务于视频创作者的组织形式。抖音MCN则特指在抖音平台上运营的MCN。早在2015年&#xff0c;抖音作为字节跳动旗下的一款短视频应用出现&#xff0c;它通过凭借其“随便看看”的特性&#xff0c;收获了大量的用户和创作者。为了让…

进程与线程、线程创建、线程周期、多线程安全和线程池(ThreadPoolExecutor)

目录 进程与线程线程和进程的区别是什么&#xff1f;线程分两种&#xff1a;用户线程和守护线程线程创建四种方式run()和start()方法区别&#xff1a;为什么调用 start() 方法时会执行 run() 方法&#xff0c;为什么不能直接调用 run() 方法&#xff1f;Runnable接口和Callable…

27 使用Arrays.asList生成的集合无法使用add、addAll方法及解决方法。

27.1 原因 使用 Array.asList方法生成的ArrayList继承的是AbstractList抽象类 &#xff0c;如下图所示。 AbstractList又继承了AbstractCollection抽象类&#xff0c;实现了List接口的方法&#xff0c;如下图所示。 如下图所示。可以发现&#xff0c; AbstractionCollection实现…

05 - ArrayList还是LinkedList?使用不当性能差千倍

集合作为一种存储数据的容器&#xff0c;是我们日常开发中使用最频繁的对象类型之一。JDK 为开发者提供了一系列的集合类型&#xff0c;这些集合类型使用不同的数据结构来实现。因此&#xff0c;不同的集合类型&#xff0c;使用场景也不同。 很多同学在面试的时候&#xff0c;…

Qt Creator 11 开放源码集成开发环境新增集成终端和 GitHub Copilot 支持

导读Qt 项目今天发布了 Qt Creator 11&#xff0c;这是一款开源、免费、跨平台 IDE&#xff08;集成开发环境&#xff09;软件的最新稳定版本&#xff0c;适用于 GNU/Linux、macOS 和 Windows 平台。 Qt Creator 11 的亮点包括支持标签、多外壳、颜色和字体的集成终端模拟器&am…

MobPush iOS SDK iOS实时活动

开发工具&#xff1a;Xcode 功能需要: SwiftUI实现UI页面&#xff0c;iOS16.1以上系统使用 功能使用: 需应用为启动状态 功能说明 iOS16.1 系统支持实时活动功能&#xff0c;可以在锁定屏幕上实时获知各种事情的进展&#xff0c;MobPushSDK iOS 4.0.3版本已完成适配&#xf…

word转pdf两种方式(免费+收费)

一、免费方式 优点&#xff1a;1、免费&#xff1b;2、在众多免费中挑选出的转换效果相对较好&#xff0c;并且不用像openOffice那样安装服务 缺点&#xff1a;1、对字体支持没有很好&#xff0c;需要安装字体库或者使用宋体&#xff08;对宋体支持很好&#xff09;2、对于使…

剑指Offer05.替换空格

剑指Offer05.替换空格 目录 剑指Offer05.替换空格题目描述解法一&#xff1a;遍历添加解法二&#xff1a;原地修改 题目描述 请实现一个函数&#xff0c;把字符串s中的每个空格都替换成“%20”。 解法一&#xff1a;遍历添加 由于每次替换都要把一个空格字符变成三个字符&a…

04 Ubuntu中的中文输入法的安装

在Ubuntu22.04这种版本相对较高的系统中安装中文输入法&#xff0c;一般推荐使用fctix5&#xff0c;相比于其他的输入法&#xff0c;这款输入法的推荐词要好得多&#xff0c;而且不会像ibus一样莫名其妙地失灵。 首先感谢文章《滑动验证页面》&#xff0c;我是根据这篇文章的教…

uniapp自定义头部导航栏

有时我们需要一些特殊的头部导航栏页面&#xff0c;取消传统的导航栏&#xff0c;来增加页面的美观度。 下面我就教大家如何配置&#xff1a; 一、效果图 二、实现 首先在uniapp中打开pages.json配置文件&#xff0c;在单个路由配置style里面设置导航栏样式​​​​​​nav…

2023数字生态大会召开,长虹佳华再获3项大奖

近日&#xff0c;2023数字生态大会在北京隆重召开。长虹佳华勇夺“2023数字生态云计算服务卓越企业”、“2023数字生态元宇宙十强”和“数字生态增值分销商十强”三项大奖&#xff1b;还同时入选 “智慧教育十佳案例” 和 “智能制造十佳案例”。 长虹佳华是国企控股的香港上市…

Zookeeper

目录 一.Zookeeper 定义 二.Zookeeper 工作机制 三.Zookeeper 特点 四.Zookeeper 数据结构 五.Zookeeper 应用场景 六.Zookeeper 选举机制 当ZooKeeper 集群中的一台服务器出现以下两种情况之一时&#xff0c;就会开始进入Leader选举&#xff1a; 而当一台机器进入…

1312. 序列统计(隔板法,组合数,转化,Lucas)

题目链接&#xff1a;https://www.acwing.com/problem/content/1314/ &#xff0c; Code #include <cstring> #include <iostream> #include <algorithm>using namespace std;typedef long long LL;const int p 1000003;int qmi(int a, int k) {int res 1…

了解垃圾回收算法

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 垃圾回收&#xff08;Garbage Collect&#xff09;是Java语言中的一种自动内存管理机制&#xff0c;用于自动回收不再使用的对象所占用的内存空间。Java虚拟机会自动追踪和…

url重定向

不安全的url跳转 不安全的url跳转问题可能发生在一切执行了url地址跳转的地方。 如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地,而又没有做判断的话 就可能发生"跳错对象"的问题。 url跳转比较直接的危害是…