二、基础选择器

选择器用来选择页面中的标签,方便设置我们需要的样式,比较简单的选择器有以下四类

1. 标签选择器

标签 选择器可以通过标签名找到页面中所有的同类的标签,去设置样式。

写法:标签名{css 属性名:属性值;}

比如我们选中了 p 标签,那么页面中所有的 p 标签都会设置同样的样式,而不是单独某一个,不管嵌套关系有多复杂,都能找到对应的 p 标签。

HTML 复制代码
<!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 {
        font-size: 25px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>基础</p>
      <div>
        <p>基础选择</p>
        <div>
          <span>
            <h3>选择器</h3>
          </span>
          <ul>
            <li>
              <p>选择</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

2. 类选择器

几乎所有标签上都会有 class 属性,其属性值就是类名。类名也遵循命名规范,可以由数字、字母、下划线、中划线组成,但不能是数字或中划线开头。

一个标签可以同时有多个类名,类名间用空格隔开即可。

类选择器 是通过类名找到页面中所有带有这个类名的标签,然后设置样式,类名是可以重复的,一个类选择器可以同时选中多个标签。

写法:.类名{css 属性名:属性值;}

HTML 复制代码
<!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>
      .font {
        border: 2px solid #000;
        font-size: 25px;
      }
      .choose {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <p class="font">基础选择</p>
        <div>
          <span>
            <h3 class="font choose">选择器</h3>
          </span>
          <ul>
            <li class="choose">
              <p>选择</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

3. id 选择器

顾名思义,id 选择器 就是通过id找到页面中带有这个 id 属性值的标签,设置样式。但一个标签上只能有一个 id 属性值,一个 Id 选择器也只能选中一个标签( id 属性值在一个页面是唯一的 ),就类似于我们的身份证号码,不可重复。

写法:#id名{css 属性名:属性值;}

id 选择器通常配合 js 使用。

HTML 复制代码
<!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>
      #font {
        color: red;
        font-size: 25px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <p id="font">基础选择</p>
      <div>标签</div>
    </div>
  </body>
</html>

4. 通配符选择器

写法:*{css 属性名:属性值;}

通配符标签,给页面中所有的标签设置样式,一般会用于去除标签默认的外边距、内边距。在开发中很少使用,只有在特殊情况下才会用到。

HTML 复制代码
<!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>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <p>基础选择器</p>
      <div>标签</div>
      <div>通配符选择器</div>
    </div>
  </body>
</html>

5. 类选择器与 id 选择器的区别

  • 类名相当于姓名,可以重复,即一个标签可以同时有多个类名
  • id 属性值相当于身份证号码,是唯一的,即一个标签只能有一个 id 属性值
  • 类选择器以 . 开头,id 选择器以 # 开头

实际开发中,类选择器使用的会比较多,id 一般会配合 js 使用,非必要不要使用 id 选择器设置样式。

实际开发中也可以将一些公共代码放到公共的类中,这样可以减少代码冗余。

相关推荐
黎金安11 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=12 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程14 小时前
【前端基础】CSS基础
前端·css
Justinc.15 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge15 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_15 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891115 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死18 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚1111 天前
css实现div被图片撑开
前端·css
@蒙面大虾1 天前
CSS综合练习——懒羊羊网页设计
前端·css