ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css中选择器 “>”、 “+”、“~”的区别

2022-07-31 23:01:57  阅读:166  来源: 互联网

标签:h1 区别 元素 li 选择 相邻 选择器 css


css中选择器 “>”、 “+”、“~”的区别

黎明的叶子 2021.09.06 18:53:14字数 543阅读 650

“>” 子元素选择器

是css3中特有的选择器,
A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。

“+” 相邻兄弟选择器

A+B{} 这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,(兄弟的意思就是相邻,可以不是同一种元素)
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。}
再例如:
一个列表,li元素,只有前四个有底边框。最后一个没有。
ul li+li{ border-top:1px solid red;}
// 第一个li 不加 后面的兄弟元素加就可以了。

“~” 兄弟选择器

A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素,但是 B不必直接紧随A。

总结

1.A>B 表示选择A元素的所有子B元素(只选择第一代)

2.A B 表示选择A元素的所有子B元素(选择在A标签里面所有的B元素,不止第一代)

3.A+B 表示HTML中紧随A的B元素,而且二者有相同的父元素:用一个结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个及后面的li都变为粗体,但第一个列表项不受影响。

4.A~B选择器 A之后出现的所有B。两种元素必须拥有相同的父元素,但是 B不必直接紧随A

    1人点赞   工作    

标签:h1,区别,元素,li,选择,相邻,选择器,css
来源: https://www.cnblogs.com/sexintercourse/p/16538506.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有