本章目录
1.任务目标
那么,我们该如何批量设定元素的样式呢,在CSS中,选择器就是造物主那神奇的手指头,选择器指向谁,谁就得被设置。
其实,选择器是用来选择标签元素的,我们可以通过选择器,选中一批元素,然后统一设置他们的样式。
2.元素选择器
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 我们用p元素选择器 */ p{ color: aquamarine } </style> </head> <body> <p>无边落木萧萧下</p> <p>不尽长江滚滚来</p> <div>君不见黄河之水天上来</div>、 <br> <span>奔流到海不复回</span> </html>
注意,p后面的大括号,里面是编写CSS样式代码的。大括号内的样式代码,都会应用于p选择器选中的元素。
效果如下
3.元素选择器的优点
由上面的例子可见,我们不用元素选择器,也能实现所有p标签文本蓝色的效果,那么使用元素选择器后,到底有什么好处呢。
其实好处还是挺多的,听我来说说:
代码变少了。之前要为每个p标签编写CSS代码,现在只需要在头部写一行。
更好维护了。之前如果要修改颜色,需要把每个p标签style内的代码进行修改,现在只需要修改头部这一处。
代码更清晰。之前CSS和HTML代码其实是混在一起的,不好区分。使用选择器后,CSS代码全部集中于头部,很明显更好区分,更加清晰了。
4.小结
元素选择器针对与,某一个元素功能很强大。