CSS的复合选择器/标签指定选择器/后代选择器/并集选择器/学习笔记

noahsark747

已于 2022-01-23 20:24:59 修改

阅读量1.9k

点赞数 1

文章标签： css css3 前端

于 2022-01-23 17:07:01 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122653778

版权

一、CSS复合选择器

复合选择器用于实现更丰富的

标签指定式选择器（交集选择器）：由两个学则器构成，其中一个为标签选择器，第二个为class选择器或id选择器两个选择器之间不能右空格，如：h2.special或p#id

  <head>
   <meta charset="UTF-8">
   <title>标签指定式选择器</title>
   	<style>
   		p{
   			color:red; font-size: 40px;
   		}
   		p.one{
   			color: blue;
   			/*指定所有p标签中类名为one的样式效果*/
   		}
   	</style>
   </head>
   <body>
   	<p>段落文本1</p>
   	<p class="one">段落文本2</p>
   	<h3 class="one">标题文本一</h3>

   </body>

后代选择器：选择元素或者元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面,中间用空格进行分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

   <title>后代选择器</title>

   	<style>
   		p strong em{
   			color:red; font-size: 40px;
   		}
   	</style>
   </head>
   <body>
   	<p><strong>段落<em>abcde</em></strong>文本1</p>
   	<strong>段落文本2</strong>
   </body>
   </html>

并集选择器：各个选择器通过,逗号链接而成，任何形式的学则器都可以作为并集选择器的一部分。弱某些选择器定义的样式完全或部分相同，可以利用并集选择器为他们定义相同的样式。

   <style>
   		p strong em,h2,p,strong{
   			color:red; font-size: 40px;
   			/*后代选择器与并集选择器混合使用*/
   		}
   	</style>

###欢迎加入QQ群一同交流学习937864538

noahsark747

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS的复合选择器/标签指定选择器/后代选择器/并集选择器/学习笔记

一、CSS复合选择器复合选择器用于实现更丰富的标签指定式选择器（交集选择器）：由两个学则器构成，其中一个为标签选择器，第二个为class选择器或id选择器两个选择器之间不能右空格，如：h2.special或p#id <head> <meta charset="UTF-8"> <title>标签指定式选择器</title> <style> p{ color:red; font-size: 40
复制链接

扫一扫

CSS的复合选择器/标签指定选择器/后代选择器/并集选择器/学习笔记

一、CSS复合选择器

“相关推荐”对你有帮助么？