零基础CSS入门教程(3)——元素选择器

简介: 那么,我们该如何批量设定元素的样式呢,在CSS中,选择器就是造物主那神奇的手指头,选择器指向谁,谁就得被设置。其实,选择器是用来选择标签元素的,我们可以通过选择器,选中一批元素,然后统一设置他们的样式。代码如下注意,p后面的大括号,里面是编写CSS样式代码的。大括号内的样式代码,都会应用于p选择器选中的元素。效果如下由上面的例子可见,我们不用元素选择器,也能实现所有p标签文本蓝色的效果,那么使用元素选择器后,到底有什么好处呢。其实好处还是挺多的,听我来说说:代码变少了。之前要为每个p标签编写CSS代

本章目录

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.小结

元素选择器针对与,某一个元素功能很强大。

相关文章
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
38 1
|
2月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
47 1
|
5天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
42 3
|
20天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
29 2
|
22天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
22 0
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
85 1
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
93 0
|
1月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
18 0
|
前端开发 编解码