css分组和嵌套选择器的用法笔记

原创 PHP笔记  2017-03-25 18:31  阅读 1,374 views 次

css分组选择器

如果多个选择器中有相同的样式(代码),为了简化代码,我们可以把相同的代码提取出来放到分组选择器中。

比如:

h1{color:red;}
h2{color:red;}
h3{color:red;}
相当于
h1,h2,h3{color:red;}

分组选择器就是同时选中多个html元素,从而给这些元素相同的样式。

格式:

选择器1,选择器2,......{
......
.....
}

实例:

......
<body>
<style type="text/css">
h1,.a,#b{color:red;}
</style>
<h1>css分组选择器示例</h1>
<p class="a">css分组选择器示例</p>
<div id="b">css分组选择器示例</div>
</body>
......

运行结果:

 

css嵌套选择器

css嵌套选择器就是用来选择某元素下的某元素下的.....。css嵌套选择器用的非常多,比如我们要选择html文档中的一个p元素,如果直接用p标签选择器,存在于该网页中的p元素也会被选中。如果不能给<p>标签添加属性,那么嵌套选择器就可以派上用场了,嵌套选择器可以选择某元素下的p元素,如果还有相同,再精确到某元素下的某元素下的p元素,直到唯一为止。

比如:div元素下的p元素下的span元素

div p span{
......
}

实例:

......
<body>
<style type="text/css">
div p span{color:red;}
</style>
<div><p>css<span>嵌套选择器</span>示例</p></div>
</body>
......

运行结果:

本文地址:https://www.ggbiji.com/css-grouping-nesting.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情