您的位置：首页 > Web前端 > CSS

CSS选择器的组合选择器之后代选择器和子元素选择器

2017-08-07 00:00 316 查看

实例代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div h1{
/*div下的h1标签的样式*/
color:green;
font-size:30px;
font-style:italic;
}
div p{
/*div下的p标签的样式*/
color:silver;
font-size:20px;
font_style:italic;
}
div p.te1{
/*div下的p标签中的te1的样式*/
color:red;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>
举头望明月
<p>低头思故乡</p>
<span>
<p class="te1">李白</p>
</span>
</span>
</div>
</body>
</html>

浏览器刷新后的效果如下：

结论：

标签选择器优先级　<　类选择器的优先级

子元素选择器的表现形式:

div > span                表示div元素的子元素
div  span                   表示div元素的后代元素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML CSS 类选择器

相关文章推荐

新的分享

章节导航