css交集选择器什么意思_CSS的选择器

最新推荐文章于 2024-04-10 00:11:18 发布
最新推荐文章于 2024-04-10 00:11:18 发布
阅读量273 收藏
点赞数
文章标签： css交集选择器什么意思
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34195649/article/details/112332489
版权

基本选择器

类选择器 .

class属性的值与类选择器一一对应

ID选择器 #

id选择器的名字是唯一的，虽然两个一样的不报错，但不能那么写

通配符选择器 *

通配符选择器: 定位当前HTML页面中所有元素

* 应用: 用来设置当前HTML页面的默认样式

* 问题: 该选择器的性能不好

属性选择器 []

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

层级选择器

HTML元素之间的关系分为三种：

  • 父级与子级的关系：如下所示，
    • 元素是
    • 元素的父级元素,那么
    • 元素就是
      • 元素的子级元素。
    • 兄弟之间的关系：如下所示，
      • 是两个
      • 的父级，即两个
      • 是
        • 的子级，那么两个
        • 之间就是兄弟元素。
        • 祖先与后代之间的关系：如下所示，
          是
          • 和
          • 元素的祖先元素，那么
            • 和
            • 就是
              的后代元素

              后代选择器

              后代选择器包含该元素中所有包裹的元素 如下图所示：

                        
                  18级启嘉班     
                    19级启嘉班       
              20级启嘉班
                   
                 
               

              效果： C1和C2都是C的后代，所以C1和C2都有颜色

              9fb2478f431720e5c0f039f64ba16731.png

              子级选择器

              子级选择器 定位的是为子级的元素 如下所示：

               ​     ​    
                  18级启嘉班     
                    19级启嘉班       
              20级启嘉班
                   
                 
               

              效果： C的子级是C1所以，C1的地方有颜色

              5751958d6bd9815fcb9b9592f4f1123f.png

              相邻兄弟选择器

              相邻兄弟选择器(只能找后面的div，不能找前面的)如下所示

               ​     ​    
                  18级启嘉班     
                    19级启嘉班       
              20级启嘉班
                     
              21级启嘉班
                     
              22级启嘉班
                   
                 
               

              效果如下： 相邻兄弟选择器只能找后面的，C2相邻的是C3，所以C3有颜色

              47fcb1048bc4512d6479523acafa13c4.png

              普通兄弟选择器

              普通兄弟选择器 (找到后面所有的兄弟)

                   ​    
                  18级启嘉班     
                    19级启嘉班       
              20级启嘉班
                     
              21级启嘉班
                     
              22级启嘉班
                     
              23级启嘉班
                     
              24级启嘉班
                   
                 
               

              效果：

              3370999483e6cd7ed2991a0b5e79eeb8.png

              并集选择器

              给所有的选择器选中的标签设置属性。以","隔开,如下所示

               ​    ​    

              标题一

                 

              标题二

                 

              标题三

                 
              标题四
               

              效果：h1~h4颜色相同，可以用并集选择器集合起来

              3e642489db0506ff7012e207298b940f.png

              交集选择器

                 ​          交集选择器     ​    

              18级启嘉班

                 

              19级启嘉班

                 

              20级启嘉班

                 
              启嘉网
                ​ 

              效果：交集改变了19级启嘉班的颜色

              15dd733527d46a07b0423c9113c50b01.png

              下一节更新CSS的其他的选择器

仇小佳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
猿码互联
10-14 2484
在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。它是通过 ~ 或 + 符号来实现的。需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
【CSS兄弟选择器】
qq_44847590的博客
12-08 8386
最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的。选中h2下面的类名为on的元素 ： h2~.on{ }表示某元素后所有同级的指定元素，选中的是所有的。选中h2下面的第一个p ： h2+p{ }选中h2下面的所有p ： h2~p{ }
兄弟选择器
coolchaobing的博客
07-28 3886
认识兄弟选择器
关系选择器(兄弟、父子选择器)
comegoing_xin_lv的博客
07-11 4178
包括父子、祖先后代、兄弟的多种选择器
CSS选择器到底有哪些？CSS笔记（一）
01-20
6. **复合选择器（交集选择器）**：两个选择器之间没有操作符，表示它们同时存在，例如`div p`会选择所有在`div`内的`p`元素。 7. **后代元素选择器**：用空格分隔两个选择器，如`div .content`会选择所有在`div`内...
【CSS基础学习】伪类选择器，伪元素选择器，交集选择器
01-08
伪类选择器 伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下： HTML标记 伪类名...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（4）交集选择器 语法 选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:...
css基础、选择器介绍、样式介绍
12-29
选择器进阶：复合选择器、并集选择器、交集选择器 、hover伪类选择器； 背景相关属性：颜色、图片等； 元素显示模式：块级元素、行内元素、行内块元素； CSS三大特性：继承性、层叠性、优先级； 盒子模型：内容、...
话术
GentryYapi2000的博客
03-28 1733
话题一：18级同学的学习和生活 经过一段时间的线上学习，你最大的感受是什么 线上学习刚开始的时候觉得舒服，长这么大第一次可以躺在床上学习，到后来就是觉得对自制力差的我是一个考验，因为手机就在身边，老师也看不见我，所以我现在上课都把手机放到另外的房间 线上和线下学习哪个效果更好？为什么 相对来说，我认为线下的学习效果要好一些，因为老师和同学的距离近，不受网络延迟的影响，对知识的吸引也更好一些 线...
HTML + CSS 连载 | 09 - CSS 兄弟选择器与选择器组
JingnanJia的博客
10-16 412
交集选择器可以定位到同时符合两个选择器的条件的元素，通常在开发中为了精确的选择某一个元素会使用交集选择器，交集选择器的两个选择器之间紧密相连，没有空格或者逗号隔开，如。并集选择器能定位到符合多个选择器中的一个选择器的元素，两个选择器以上，以逗号分割，在开发中共通常为了给多个元素设置相同的样式时会使用并集选择器，如。兄弟选择器可以通过目标元素同级的其他元素的选择器选中，直接相邻的兄弟选择器使用。后代选择器可以选择所有元素的后代，包括直接和间接的，选择器之间通过空格分割；开发中属性选择器的使用频率一般。
从0开始，自学前端的一点记录——CSS选择器
qq_43600631的博客
04-13 214
从0开始，自学前端的一点记录
CSS3【1】—选择器总结
采花小盗周的博客
04-30 197
一、兄弟选择器1.相邻兄弟选择器2.通用兄弟选择器二、属性选择器1.基础选择器2.并列属性3.表示更加精确的匹配:三、伪类选择器1.让标记更加的凸显2.结构伪类 一、兄弟选择器 1.相邻兄弟选择器 基本语法： 参考选择器+目标选择器{样式} 匹配规则： 参考选择器 下的紧挨着的那个兄弟，所有的 { 之前放的都是 选择器 //加号左右有空格，匹配id为tag的标签紧挨着的p兄弟标签 #tag
css选择器
最新发布
Cheny_Yang的博客
04-10 757
div<div>.class#idA BA > BA + BA ~ B[attr]:hover:active:focus:target:checked:disabled:not()::before::after:has()在CSS规则中，最右边的选择器被称为关键选择器（Key Selector），也就是实际应用样式时直接作用于目标元素的选择器。在浏览器解析CSS规则时，它会从右向左读取选择器，因为这样可以更快地确定规则是否适用于当前元素。因此，关键选择器的性能对整个选择器链的匹配效率有很大影响。
css选择器的那些类型，中高级前端开发应该要了解
2401_83946509的博客
03-28 699
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】行成功。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
交集选择器与并集选择器
热门推荐
jwz934738949的博客
03-27 2万+
1、交集选择器 交集选择器就是在两个标签相交的部分，也就是交集进行修改格式。 对于交集选择器，可以与id和class共同使用。 格式： 标签1标签2 { 属性; } <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> &...
CSS交集选择器
xyjikl
07-17 9171
CSS交集选择器的格式 第一种格式类似于： h1.center {color:red; text-align:center;} 这种格式由标签选择器和类选择器组成。 第二种格式类似于： h1#center {color:red; text-align:center;} 这种格式由标签选择器和id选择器组成。 两个选择器之间不能有空格，必须连续书写。 以上这两
css交集选择器什么意思_HTML+CSS入门 交集选择器学习
weixin_35895753的博客
02-01 638
本篇教程介绍了HTML+CSS入门 交集选择器学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1.什么是交集选择器？我们首先了解一下什么是交集以前学数学的时候学过交集，其实这里也是一样两个集合有重复的部分就叫做交集作用：给所有选择器选中的标签中，相交的那部分标签设置属性格式：选择器1选择器2{属性：值;}注意点：1.选择器和选择器之间没有任何连接符号来看一个案例：先找...
css交集选择器使用说明
05-18
CSS交集选择器用于选择同时匹配两个选择器的元素。它使用符号“ ”（空格）来连接两个选择器，例如： ```css selector1 selector2 { /* styles */ } ``` 这个选择器会选择同时匹配 selector1 和 selector2 的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值