关于CSS中选择器的一点补充[(div p),(div>p),(div+p)]
程序员文章站
2022-04-28 08:03:29
...
CSS element element 选择器
实例:选择div 下所有的p元素
/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/
<style>
div p{
background-color:red;
}
</style>
--------------------------------------------------------------------
<body>
<div >
<p>取次花丛懒回顾</p> /* 背景red*/
<p>半缘修道半缘君</p> /* 背景red*/
</div>
<p>金风玉露一相逢</p> /* 无*/
<p>便胜却人间无数</p> /* 无*/
</body>
CSS element>element 选择器
实例 选取父元素是
元素的每个
元素：
/*选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：*/
<style>
div>p {
background-color:yellow;
}
</style>
---------------------------------------------------
<body>
<div >
<p>取次花丛懒回顾</p> /* 背景yellow*/
<p>半缘修道半缘君</p> /* 背景yellow*/
</div>
<div><p>金风玉露一相逢</p></div> /* 背景yellow*/
<span><p>便胜却人间无数</p></span> /* 无*/
</body>
CSS element+element 选择器
/*选择 <div> 元素之后紧跟的每个 <p> 元素*/
<style>
div+p {
background-color:yellow;
}
</style>
--------------------------------------------------------------
<body>
<div >
<p>取次花丛懒回顾</p> /* 无*/
<p>半缘修道半缘君</p> /* 无*/
</div>
<div><p>金风玉露一相逢</p></div> /* 无*/
<p>便胜却人间无数</p> /* 背景yellow*/
</body>
上一篇： 文件上传，java文件上传