二、基础选择器

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

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 选择器设置样式。

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

相关推荐
y先森4 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森9 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy9 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
IT女孩儿10 小时前
CSS查缺补漏(补充上一条)
前端·css
想自律的露西西★13 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
彪82514 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
旧林84314 小时前
第八章 利用CSS制作导航菜单
前端·css
asleep70116 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网1 天前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普1 天前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5