跳至主要內容

选择器学习

辉哥大约 13 分钟html5666

CSS 选择器学习

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习路线&目的

  1. 掌握不同类型的选择器，有哪几类
  2. 各种选择器含义作用

选择器

CSS 选择器：

根据不同需求把 body 里面不同的标签选出来，选择标签以设置套用大括号{}内的样式

所有的选择器都是 选择器名 + {} 的形式

选择器分为基础选择器和复合选择器两个大类

基础选择器:

  1. 由单个选择器组成
  2. 包括：标签选择器、类选择器、id 选择器 和 通配符选择器

复合选择器：

  1. 复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
  2. 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  3. 复合选择器可以更准确、更高效的选择目标元素（目标标签）
  4. 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

基础选择器

标签选择器（选HTML里面的组件名字）

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

作用：标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。

语法格式案例

标签选择器
<head>
  <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

类选择器/class 选择器（选自己设置了名字的HTML组件）

使用类选择器，单独选一个或者某几个拥有该类的标签，可以将其（带该 class 类的标签）差异化修改为不同样式

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示

  1. 类选择器使用“.”（英文点号）进行标识，后面紧跟标签的 自定义 的 class 类名
  2. 长名称或词组可以使用中横线来为选择器命名，不要使用纯数字、中文等命名，尽量使用英文字母来表示
  3. 命名要有意义，尽量使别人一眼就知道这个类名的目的，规范见附件 Web 前端开发规范手册.doc

多类名选择器

  1. 在标签 class 属性中写 多个 类名，从而达到更多的选择目的，通过这些类名都可以选出这个标签
  2. 多个类名中间必须用空格分开
  3. 这个标签就可以 分别具有 这些类名的样式，组合效果
  4. 技巧：多个相同的样式的标签，设置为一个类，统一修改+节省代码+组合调用

语法格式案例

类选择器 + 多类名选择器
</head>
  <style>
    /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
    .red {
      color: red;
    }
    .star-sing {
      color: green;
    }
    .memeda {
      color: pink;
    }
    .font35 {
      font-size: 35px;
    }
    .box {
      width: 150px;
      height: 100px;
      font-size: 30px;
    }
    .bg{
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li class="red">冰雨</li>
    <li class="red">来生缘</li>
    <li>李香兰</li>
    <li class="memeda">生僻字</li>
    <li class="star-sing">江南style</li>
  </ul>
  <div class="red">我也想变红色</div>
  <!-- 多类名使用 -->
  <div class="box red font35 bg">刘德华</div>
</body>

id 选择器（选自己设置了id的HTML组件）

使用 id 选择器，可以将带该 id 标签修改为对应样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义

  1. id 属性只能在每个 HTML 文档中出现一次，不得重复
  2. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用
  3. 与 class 选择器类似，但 id 选择器的不同地方在于唯一性，一个标签一个 id，一个 id 一个标签

语法格式案例

id 选择器
<head>
  <style>
    /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
    #pink {
      color: pink;
    }
  </style>
</head>
<body>
  <div id="pink">迈克尔·杰克逊</div>
  <div>pink老师</div>
</body>

通配符选择器（所有的HTML元素）

通配符选择器不需要调用， 自动就给所有的元素使用样式 特殊情况下使用，如清除所有的元素标签的内外边距，统一更改颜色等等

语法格式案例

通配符选择器
<head>
  <style>
    /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    * {
      color: red;
    }
    /* * 这里清除内外边距 */
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div>我的</div>
  <span>我的</span>
  <ul>
    <li>还是我的</li>
  </ul>
</body>

基础选择器总结

选择器符号用法作用特征使用情况
标签选择器标签名p
{color:red;}		可以选出所有相同的HTML标签不能差异化选择，一选全选较多
类选择器.+
类名		.nav
{color:red;}		可以选出1个或者多个标签自定义需求选择非常多
id选择器#+
id名		#nav
{color:red;}		一次只能选出1个标签id属性只能在每个*.html文档中出现一次一般与js搭配使用
通配符选择器**
{color:red;}		选择页面内所有的标签全局，如果是引用样式表，引用到哪都全局特殊情况下用

复合选择器

后代选择器

  1. 后代选择器又称为包含选择器，css选择父元素里面所有子元素执行
  2. 写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
  3. 当标签发生嵌套时，内层标签就成为外层标签的后代。
  4. 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  5. 元素1 和 元素2 可以是任意基础选择器

元素1 元素2 { 样式声明 }
/* 例如 /
ul li { 样式声明 }
/ 即选择 ul 里面所有的 li标签元素 */

语法格式案例

后代选择器

<head>
  <style>
    /* 我想要把ol里面的小li选出来改为pink */

    ol li {
    /* ol为父，li为子，子为后代，选择了后代执行css */
      color: pink;
    }

    /* 中国 山东 济南 蓝翔 */
    ol li a {
      color: red;
    }

    .nav li a {
      color: yellow;
    }
  </style>
</head>
<body>
  <ol>
    变态写法
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>
  <ul>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li><a href="#">不会变化的</a></li>
  </ul>
  <ul class="nav">
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li><a href="#">a标签变化了</a></li>
    <li><a href="#">a标签变化了</a></li>
    <li><a href="#">a标签变化了</a></li>
    <li><a href="#">a标签变化了</a></li>
  </ul>
</body>

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素 即选择某父元素里面的所有直接一级后代

  1. 元素1 是父级，元素2 是子级，最终选择的是元素2
  2. 元素1 和 元素2 中间用 大于号 > 隔开
  3. 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

元素1 > 元素2 { 样式声明 }
/* 例如 /
div > p { 样式声明 }
/ 选择 div 里面所有最近一级 p 标签元素 */

语法格式案例

子选择器

<head>
  <style>
    .nav>a {
    /* nav这个类所在的div标签为父，a标签为子， */
      color: red;
    }
  </style>
</head>

<body>
  <div class="nav">
    /* 第一层a标签，直接一级子级，生效 */
    <a href="#">我是儿子</a>
      <p>
      /* 第二层a标签，次级子级，不生效 */
      <a href="#">我是孙子</a>
      </p>
  </div>
</body>

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明 并集选择器是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分

  1. 元素1 和 元素2 中间用逗号隔开
  2. 逗号可以理解为和的意思
  3. 并集选择器通常用于集体声明

元素1,元素2 { 样式声明 }
/* 例如 /
ul,div { 样式声明 }
/ 选择 ul 和 div标签元素 */

语法格式案例

并集选择器

<head>
  <style>
    /* 要求1: 请把熊大和熊二改为粉色 */
    /* div,
    p {
        color: pink;
    } */

    /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
    div,
    p,
    .pig li {
        color: pink;
    }

    /* 约定的语法规范,我们并集选择器喜欢竖着写，一行就是一个标签对象 */
    /* 一定要注意,最后一个选择器 不需要加逗号 */
  </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果 伪类选择器书写最大的特点是用冒号 : 表示 伪类选择器很多，有链接伪类、结构伪类等

链接伪类选择器

给链接添加特殊效果，或选择第1个，第n个元素，比如 :hover 、 :first-child

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

语法格式案例

伪类选择器
<head>
  <style>
    /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
    a:link {
      color: #333;
      text-decoration: none;
    }

    /*2. a:visited 选择点击过的(访问过的)链接 */
    a:visited {
      color: orange;
    }

    /*3. a:hover 选择鼠标经过的那个链接 */
    a:hover {
      color: skyblue;
    }

    /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
    a:active {
      color: green;
    }
  </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

语法格式案例

链接伪类选择器
<head>
  <style>
  
    body {
      color: red;

    }

    a {
      color: #333;
      text-decoration: none;
    }

    a:hover {
      color: #369;
      text-decoration: underline;
    }
  </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素应用

语法格式案例

链接伪类选择器
<head>
  <style>
    /* // 把获得光标的input表单元素选取出来 */
    input:focus {
      background-color: pink;
      color: red;
    }
  </style>
</head>

<body>
  <input type="text" value="光标进入变成输入状态">
  <input type="text">
  <input type="text">
</body>

复合选择器总结

选择器符号用法作用特征使用情况
后代选择器空格.nav空格a选择后代元素可以是后代每一级较多
子选择器>.nav>p只选子一级元素最近一级，
直接一级		较少
并集选择器,.nav,.header选择需要设置为相同样式的元素可以用于集体样式声明较多
链接伪类选择器:a{}和
a:hover{}		选择不同状态的链接以设置样式链接样式效果修改相关较多
:focus
伪类选择器		:input:focus选择获得光标的表单以设置样式表单样式效果修改相关较少

选择器总结

所有的选择器都是 选择器名 + {} 的形式

基础选择器总结

选择器符号用法作用特征使用情况
标签选择器标签名p
{color:red;}		可以选出所有相同的HTML标签不能差异化选择，一选全选较多
类选择器.+
类名		.nav
{color:red;}		可以选出1个或者多个标签自定义需求选择非常多
id选择器#+
id名		#nav
{color:red;}		一次只能选出1个标签id属性只能在每个*.html文档中出现一次一般与js搭配使用
通配符选择器**
{color:red;}		选择页面内所有的标签全局，如果是引用样式表，引用到哪都全局特殊情况下用

复合选择器总结

选择器符号用法作用特征使用情况
后代选择器空格.nav空格a选择后代元素可以是后代每一级较多
子选择器>.nav>p只选子一级元素最近一级，
直接一级		较少
并集选择器,.nav,.header选择需要设置为相同样式的元素可以用于集体样式声明较多
链接伪类选择器:a{}和
a:hover{}		选择不同状态的链接以设置样式链接样式效果修改相关较多
:focus
伪类选择器		:input:focus选择获得光标的表单以设置样式表单样式效果修改相关较少
power by VuePressThemeHope
Copyright © 2025 辉哥