CSS选择器 < ~ +
CSS lt 选择器
2023-09-11 14:22:49 时间
1.>(子选择器)
#a>p{ // 使用 > 号,让选择器选择id="a"的所有子类(直接子类)
<div id="a"> <p>11111111111111</p> <p>22222222222222</p> <div>
<p>333333333</p>
</div><!--该<p>在<div>中--> </div> <style> #a>p { background-color:Red; } </style>
结果:
2.+(相邻选择器)
h1+p,选择紧接在另一个元素后的元素,而且二者有相同的父元素。只会选择第一个相邻的匹配元素。
<div id="a"> <h1>11111111111111</h1> <p>22222222222222</p> <p>33333333333333</p><!--只会选择第一个相邻的匹配元素--> <div> <p>44444444444</p> </div> </div> h1+p { background-color:Red; }
结果:
3.~(匹配选择器)
#b~p,匹配所有在#b元素之后的同级p元素。
<style> h1~p { background-color:Red; } </style> <div id="a"> <h1>11111111111111</h1> <p>22222222222222</p> <p>33333333333333</p> <div> <p>44444444444</p> </div> </div>
所有相匹配的P元素都被选择到。
结果:
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- 使用纯 CSS 实现滚动阴影效果
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
- CSS小技巧收藏
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- css移动端设置底部导航栏(1+X Web前端开发初级 例题)
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- css 设置div半透明 悬浮在页面底部 不随滚动条滚动
- CSS 浮动【快速掌握知识点】
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- 《HTML与CSS入门经典(第8版)》——2.8 作业
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- 周末没事干就看CSS JS Python ThinkPHP的书,照着例子运行就行,可以增强信心(还有QML,虚拟机运行Web。Windows核心编程,照着例子运行。没事看看socket和rest的例子和文档,还有POCO和BOOST。做自己感兴趣的虚拟机,研究5.0,SG2,BOX,CloudDisk)
- css隐藏输入框的光标
- Web网站模板-电商产品介绍网站模板(HTML+CSS+JavaScript)
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- CSS学习知识整理(四)Css 盒子模型