css 兄弟选择器 后代选择器 并级选择器

最新推荐文章于 2024-04-01 10:46:06 发布
最新推荐文章于 2024-04-01 10:46:06 发布
阅读量707 收藏 2
点赞数
分类专栏： css 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45715615/article/details/123601874
版权

这些选择器的优先级都为0，优先级最低。

~ 普通兄弟选择器  匹配所有的兄弟

选择器<第一个选择器> ~ <第二个选择器>
匹配目标元素位于匹配第一个选择器的元素之后，且匹配第二个选择器

+ 相邻兄弟选择器  匹配相邻的下一个兄弟

选择器<第一个选择器> + <第二个选择器>
匹配目标元素紧跟匹配第一个选择器的元素，且匹配第二个选择器
* 通配符选择器*0

, 并集选择器  创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。

 后代选择器  后代选择器用于选择包含在其他元素中的元素

选择器<第一个选择器> <第二个选择器>
匹配目标元素为匹配第一个选择器的后代元素，且匹配第二个选择器

观空自然
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css后代选择器和子选择器的区别介绍
09-25
css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等，需要了解的朋友可以参考下
CSS选择前几个元素、后几个元素或者指定元素
前端菜菜DayDayUp的博客
08-19 9537
CSS选择前几个元素、后几个元素或者指定元素
CSS复合选择器（ 交集、 并集、后代、子元素、兄弟、伪类、伪元素）
热门推荐
weixin_42235173的博客
06-06 1万+
CSS复合选择器 总结 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 :first-child与:first-of-type区别 :first-child 匹配的是其父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是在其父元素的所有子元素中 该类型元素的第一个元素 <p>结构上的第一个p元素</p> <!-- p:first-child --> &
html+css基础入门教程之相邻兄弟选择器，前端开发岗还不会这些问题
最新发布
2401_83621661的博客
04-01 571
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。如果想找比较厉害的，就增加个第四步，亮点项目考察。
css选择器
Menqq的博客
12-23 774
1、选择第n个，n代表数字 :nth-child(n){ } 2、偶数标签 :nth-child(2n){} :nth-child(even){ } 3、奇数标签 :nth-child(2n - 1){ } :nth-child(odd){ } 4、【负方向范围】选择第1个到第5个 :nth-child(-n + 5){ } 5、【正方向范围】选择从第5个开始的，直到最后 :nth-child(n + 5){ } 6、【限制范围】选择第2个到第8个，取两者的交集 :nth-child(-n+8):nth-c
【CSS】css 获取从第n个元素开始，之后的所有元素 :nth-of-type(n)与:nth-child(n)
余浩的博客
05-03 8750
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 html代码： <div id="box"> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </div> css代码： 获取box中，除了第一个之外的其他的div #box div:nth-o
选到你满意：完美掌握 css 选择元素的方法
Shids_的博客
03-17 1万+
选到你满意：完美掌握 css 选择元素的方法
css串联选择器和后代选择器使用方法
09-25
主要介绍了css串联选择器和后代选择器使用方法,需要的朋友可以参考下
css后代选择器使用方法实例
09-25
下面是一个css后代选择器的例子，大家参考使用吧
css 串联选择器和后代选择器介绍及示例
12-13
串联选择器：作用在同一个标签上  复制代码代码如下:”a” id =”qq”><span>...后代选择器：作用在不同标签上 复制代码代码如下:”qq”>”a”>look at the color</span></div> css: #qq .a{ } 注意#qq .a 之前有空格
css选择前几个元素或者后几个元素
口袋的天空的博客
01-22 7614
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #nth-test div:nth-child(-n + 4).
css 获取从第n个开始之后的所有元素
09-22
主要介绍了css 获取从第n个开始之后的所有元素 ,需要的朋友可以参考下
CSS复合选择器之后代选择器
m0_61629312的博客
04-06 621
CSS复合选择器之后代选择器
CSS选择除第一个和最后两个以外的所有子元素 + 结构伪类选择器深度解析
JZevin的博客
07-16 1万+
最近在练习网易严选首页的布局时，发现它的顶部导航栏需求很特殊，第一项和最后两项是没有下拉选择框的。那么问题来了，在写css的时候该怎么使用选择器去达到这样的需求呢!？ 首先先贴一下我最后的解决方案： .nav-first>li:nth-child(n+2):not(:nth-last-child(-n+2)):hover .nav-second { display: block; } 其中核心是：:nth-child(n+2):not(:nth-last-child(-n+2)) :nth-c
css之选择器
yangsen99的博客
05-25 327
一、基本选择器 1、id选择器 #1、作用： 根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性 #2、格式 #+id名称 { 属性：值; } #3、注意点： 1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个id，id就相...
css伪类选择器之first-child,last-child,nth-child()
qq_43390061的博客
03-03 1962
今天没上班，脑袋不太清晰，就简单给小白们讲一个很实用的css伪类选择器，这个在你们写导航或者其他列表类的css时特别实用，而且利于后期维护。 这个选择器就是 元素:fist-child / last-child / nth-child(子节点序号) 例如此时我们需要写一个一级导航： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...
css获取第n个元素之后所有的元素
threelifeadv的博客
05-19 4558
项目中需要手绘日历，日历可能会出现5行或6行，当第6行无数据时，不显示第6行。 example： var txt = $(".calendarLi:nth-child(36)").html(); if(txt == null || txt == "") { $(".calendarLi:nth-of-type(n+36)").remove(); $(".calendarLi:...
CSS——css选择后几个元素及第几个元素
qq_43201350的博客
01-19 1213
一共5张图 <navigator wx:for="{{5}}" wx:key="index"> <image mode="widthFix" src="./aa.png"></image> </navigator> 选中后4张 navigator { &:nth-last-child(-n+4) { // 此处可写样式 } } 选中2、3张 navigator &:nth-child(2),
css后代选择器 firstchild
08-16
在CSS中，后代选择器用于选择元素的后代元素。而:first-child伪类选择器可以选择元素的第一个子元素。结合起来使用，可以选择元素的后代元素中的第一个子元素。 例如，选择所有p元素下，同级第一个且为em的元素，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

观空自然

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值