CSS 元素选择器

最新推荐文章于 2024-02-23 10:44:54 发布

W Y L

最新推荐文章于 2024-02-23 10:44:54 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/weixin_45959525/article/details/103646480

版权

CSS 元素选择器

CSS元素选择器其实就是标签选择器，例如 p{color:black;} 就是设置页面中的所有p标签的字体颜色为黑色。

例子：

<html>
 	<head>
	  <style> 
  		html {color:black;}
  		h1 {color:blue;}
  	    h2 {color:red;} 
  	</style> 
	 </head> 
	 <body>
 		 <h1>这是 heading 1</h1>
  		 <h2>这是 heading 2</h2> 
 	     <p>这是一段普通的段落。</p > 
   </body>
 </html>

在例子中设置了html的字体颜色为黑色，h1标签的字体为蓝色, h2标签内的字体为红色。

页面显示时，因为h1,h2标签各自都有设置了字体颜色，所以显示的是对应的蓝色和红色。

p标签因为没有设置对应的字体颜色，这时候p标签的字体颜色就是p标签上一层的字体颜色，p标签的上一层是body标签，但是也没设置字体颜色，所以查找body的上一层html，html设置了字体的颜色为黑色，所以p标签的字体也应该是黑色。

CSS 选择器分组

CSS选择器分组，可以把定义相同属性的不同标签做为一组处理，缩短了CSS样式编写的时间和CSS样式表的大小。

例如希望h2和p标签的字体颜色都设置为黑色，则可以写成：

h2,p{color:black;}

通过分组，可以将相同属性的样式“压缩”在一起，这样就可以得到更简洁的样式表。例如：


 h1 {color:blue;}
 h2 {color:blue;} 
 h3 {color:blue;} 
 h4 {color:blue;}
 h5 {color:blue;}
 h6 {color:blue;}
h1, h2, h3, h4, h5, h6 {color:blue;}

当有多个标签有相同属性时，可以抽出相同属性进行分组，不同的属性另外书写样式。可以节省css代码。

W Y L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 元素选择器

CSS 元素选择器CSS元素选择器其实就是标签选择器，例如 p{color:black;} 就是设置页面中的所有p标签的字体颜色为黑色。例子：<html> <head> <style> html {color:black;} h1 {color:blue;} h2 {color:red;} </sty...
复制链接

扫一扫