div p、divp、div+p、div~p、div.a 、p,span的用法和区别

div p、div>p、div+p、div~p、div.a 的用法和区别

div p ：将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）

<style>
div span{color:red;}
</style>

<div>
<p>
<span> Hello World! </span>
</p>
<span> Study Css </span>
</div>
上面的例子中所有的span都为红色

div>p ：将所有<div>标签的子标签<p>选中，不包括孙子辈标签。

<style>
div>span{color:red;}
</style>

<div>
<p>
<span> Hello World! </span>
</p>
<span> Study Css </span>
</div>
这个例子中只有Study Css是红色！

div+p ：将所有离<div>相邻的<p>标签选中

<style>
div + p{color: blue;} /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
</style>

<div>hello</div>
<p>world</p>

这个例子中world字体是蓝色！

div~p ：将<div>后面所有的<p>标签选中

<style>
div~p{color: orange;}
</style>

<div>第一段</div>
<p>p标签</p>
<p>p标签</p>

这个例子中所有p标签字体都是橙色！

div.a ：将<div>下class=a标签选中

<style>
div.a{color: green}
</style>

<div class="a">hello world</div>

这个例子中hello world字体是绿色！

p,span ：将p和span选中

<style>p,span{color: green}
</style>
<p>驾驶、行驶</p>
<span>记分查询</span>
这个例子中p和span字体是绿色！

div p、divp、div+p、div~p、div.a 、p,span的用法和区别相关推荐

div p span的用法和区别
<div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色.字体等 ...
DIV与SPAN之间有什么区别
DIV与SPAN之间有什么区别解决思路: DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是 ...
html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老 ...
div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...
css 容器内 div 底部,CSS：在div容器的底部放置一個div容器
My intention is to place a div-container inside a div-container, but it isn't working atm. My div-co ...
HTML学习笔记：让div在屏幕居中，图片在div里居中
目录一.效果演示二.实现方法方法一:利用CSS实现方法二:利用JavaScript实现方法三:利用JavaScript实现方法四:利用jQuery实现一.效果演示二.实现方法方法一: ...
html中怎么让div撑开,html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）...
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素f ...
html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
转自:https://www.thinkcss.com/shili/1372.shtmlcss div对象盒子向右偏移设置,使用css让div靠右必定距离-div向右移教程实例篇html div向右偏 ...
实现一个行内三个div等分_一个div，包含三个小的div,平均分布的样式
从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

div p、divp、div+p、div~p、div.a 、p,span的用法和区别

div p、div>p、div+p、div~p、div.a 的用法和区别

div p、divp、div+p、div~p、div.a 、p,span的用法和区别相关推荐

最新文章

热门文章