CSS中4种常用选择器

燕穗子博客

已于 2022-04-10 08:43:24 修改

阅读量772

点赞数 4

分类专栏： CSS 文章标签： javascript 开发语言 vscode java

于 2022-04-09 21:17:31 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124068303

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

1:元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例子：p{},h1{},h3{}

2:id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例子：#p1{}

3:class选择器

作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用

语法：.class属性值{}

例子：.p2{}

4:通配选择器

作用：选中页面中的所有元素

语法：*{}

<!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>选择器</title>
    <style>
      /* 需求一：标题变红色 */
      h1 {
        color: red;
      }

      /* 需求二：将第一句诗变绿色 */
      #p1 {
        color: green;
      }
   
      /* 需求三：将第二句诗也变绿色 */
      .p2 {
        color: green;
      }
      .a2{font-size: 22px;}
    
      /* 需求四：给所有的标签字体变为24px */
      *{font-size: 24px;}

    </style>
  </head>
  <body>
    <h1>登高</h1>
    <h3>杜甫</h3>
    <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
    <p class="p2 a2">无边落木萧萧下，不尽长江滚滚来。</p>
    <p>万里悲秋常作客，百年多病独登台。</p>
    <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
  </body>
</html>

燕穗子博客

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中4种常用选择器

1:元素选择器作用：根据标签名来选中指定的元素语法：标签名{}例子：p{},h1{},h3{}2:id选择器作用：根据元素的id属性值选中一个元素语法：#id属性值{}例子：#p1{}3:class选择器作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用语法：.class属性值{}例子：.p2{}4:通配选择器作用：选中页面中的所有元素语法：*{}<!DOCTYPE html><html lang=
复制链接

扫一扫