4-13 兄弟选择器实例
2017-12-07 本文已影响14人
一Left一
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p{
color: red;
}
div h3{
color: green;
}
div>p{
font-family:"楷体";
font-style: italic;
}
p.underLine{
text-decoration: underline;
}
div,p,h1,h3{
font-size: 20px;
}
</style>
</head>
<body>
<!--
1. div 中的所有p 标签变成红色,所有h3标签变成绿色
2. div 中所有的儿子p元素元素使用楷体,倾斜
3. p 标签中class="underLine"的标签文字添加下划线
4. div,p,h1,h3 标签统一字号为20px
-->
<p>sldkjg</p>
<h3>sladgjkl</h3>
<div>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<h1>我是标题1</h1>
<p>我也是div中的段落</p>
<ul>
<li>
<p>我是li中的段落</p>
<h3>我是li中的标题3</h3>
<h3 class="underLine">我是li中的标题3</h3>
<h3>我是li中的标题3</h3>
<h3 class="underLine">我是li中的标题3</h3>
</li>
<li>
<p>我是li中的段落</p>
<ul>
<li>
<p class="underLine">我是一个段落</p>
</li>
<li>
<p>我是一个段落</p>
</li>
<li>
<p>我是一个段落</p>
</li>
</ul>
</li>
<li>
<p class="underLine">我是li中的段落</p>
</li>
777
</ul>
</div>
</body>
</html>
图片.png
