CSS常用选择器

zhangeer

已于 2022-10-24 13:49:51 修改

阅读量88

点赞数

分类专栏： CSS HTML 文章标签： css 前端 javascript 1024程序员节

于 2022-10-10 20:49:23 首次发布

本文链接：https://blog.csdn.net/zhangeer/article/details/127252162

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1、元素选择器(标签选择器)

2、id选择器 (id属性值不可以重复使用)

3、class选择器（用法跟id选择器是一样的，只不过它可以复用）

4、通配选择器

5.代码演示

6.运行结果

1、元素选择器(标签选择器)

语法：标签名{}

作用：选中对应标签包裹的内容

例子：h1{},h2{},p{},div{},span{}

2、id选择器 (id属性值不可以重复使用)

语法：#id属性值{}

作用：选中对应的id属性值的内容

例子：#p1{},#pp{},#abc{}

3、class选择器（用法跟id选择器是一样的，只不过它可以复用）

语法：.class属性值{}

作用：选中对应class属性值的内容

例子：.pp{},.p1{}

4、通配选择器

语法：*{}

作用：选中页面中所有的标签

5.代码演示

<!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;
      }
      /* 需求二：将第一句诗变绿色——id选择器*/
      #p1 {
        color: green;
      }      
      /* 需求三：将第二,三句诗变粉色——class选择器*/
      .p2 {
        color: pink;
      }
      /* 需求四：给所有的标签字体变为24px——通配选择器*/
      *{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>登高</h1>
      <h3>杜甫</h3>
      <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
      <p class="p2">无边落木萧萧下，不尽长江滚滚来。</p>
      <p class="p2">万里悲秋常作客，百年多病独登台。</p>
      <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
    </div>
  </body>
</html>