CSS教程(二)- CSS选择器

1. 作用

  • 匹配文档中的某些元素为其应用样式。
  • 根据不同需求把不同的标签选出来。

2. 分类

  • 分类
    • 基础选择器
      • 包含 标签选择器、ID选择器、类选择器、通用选择器等
    • 复合选择器
      • 包含 后代选择器、子代选择器、伪类选择器等

1 标签选择器

  • 介绍

    • 又称为元素选择器,根据标签名匹配文档中所有该元素,为页面中某一类标签指定统一的CSS样式
  • 语法

    css 复制代码
    标签名{
        属性1: 属性值1;
        属性2: 属性值2;
        ...
    }
  • 示例

  • 说明

    • 选择器:指需设置样式的 HTML 元素。
    • 声明块包含一条或多条用分号分隔的声明。
    • 每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
    • 多条 CSS 声明用分号分隔,声明块用花括号括起来。
  • 优点

    • 能快速为页面中同类型的标签统一设置样式。
  • 缺点

    • 不能设计差异化样式,只能选择全部的当前标签。

2 ID选择器

  • 介绍

    • 根据元素的 id 属性值匹配文档中唯一的元素,id具有唯一性,不能重复使用。
    • 在 CSS 中 ID选择器以 # 来定义
  • 语法

    css 复制代码
      #id属性值{
          属性1: 属性值1;
          属性2: 属性值2;
          ...
      }
  • 示例

  • 注意

    • id属性值自定义,可以由数字、字母、下划线、- 组成,不能以数字开头;
    • 尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰表示。
  • 口诀

    • ++样式#定义,结构id调用,只能调用一次++

3 类选择器

  • 介绍

  • 想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

    • 根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用(简言之:用于查找或选取要设置样式的 HTML元素)
  • 语法

    css 复制代码
    .类名 {
        属性1: 属性值1;
        属性2: 属性值2;
        ... 	
    }
  • 示例

  • 说明

    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
    • 命名要有意义,尽量使别人一眼就知道这个类名的目的。
  • 口诀

    • 样式点定义,结构类调用
  • 特殊用法

    1. 类选择器与其他选择器结合使用

      css 复制代码
      a.c1{ }
      • 注意:标签与类选择器结合时,标签在前,类选择器在后
    2. class属性值可以写多个(多个类名之间必必须用 ++空格++ 分开),共同应用类选择器的样式

      css 复制代码
      <p class="c1 c2"></p>
  • 示例

4 通用选择器

  • 介绍

    • 通配符选择器使用 * 定义,它表示选取页面中所有元素(标签)。
  • 语法

    css 复制代码
    * {
          属性1: 属性值1;
          属性2: 属性值2;
          ...
    }
  • 说明

    • 通常在最开始对页面设置内边距与外边距的设置(默认body与页面会存在边距)。

      css 复制代码
      *{
          padding: 0;
          margin: 0;
      }
  • 示例

5 群组选择器

  • 介绍

    • 也称为并集选择器,可以使用多个不同的选择器为一组元素统一设置样式。
  • 语法

    css 复制代码
    selector1,selector2,selector3{	
          属性1: 属性值1;
          属性2: 属性值2;
          ...    
    }
  • 示例

6 后代选择器

  • 介绍

    • 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
  • 语法

    css 复制代码
    selector1 selector2{
    	属性1: 属性值1;
    	属性2: 属性值2;
    	...
    }
  • 说明

    • 匹配selector1中所有满足selector2的后代元素
    • selector1 与 selector2 可以是任意的基础选择器
  • 示例

7 子代选择器

  • 介绍

    • 匹配满足选择器的所有直接子元素,只能选择作为某元素的最近一级子元素
  • 语法

    css 复制代码
    selector1>selector2{
    	属性1: 属性值1;
    	属性2: 属性值2;
    	...    
    }
  • 说明

    • selector2 必须是 selector1 的亲子元素
  • 示例

8 伪类选择器

  • 介绍

    • 为元素的不同状态分别设置样式,必须与基础选择器结合使用。
  • 特点

    • 用冒号(:)表示,如::hover、:first-child、:last_child

1、链接伪类选择器

  • 分类

    css 复制代码
    :link 	     超链接访问前的状态
    :visited    超链接访问后的状态
    :hover	 鼠标滑过时的状态
    :active     鼠标点按不抬起时的状态(激活)
  • 示例

  • 注意

    1. 超链接如果需要为四种状态分别设置样式,则按照以下顺序【LVHA】声明

      css 复制代码
      :link
      :visited
      :hover
      :active
    2. 超链接常用设置 :

      css 复制代码
      a{
      	/*统一设置超链接默认样式(不分状态)*/
      }
      
      a:hover{
      	/*鼠标滑过时改样式*/
      }

2、焦点伪类选择器

  • :focus

    • 用于选取获得焦点的表单元素。
    • 一般情况 <input> 类表单元素才能获取
  • 示例

3、结构伪类选择器

  • 作用

    • 根据元素的结构关系查找元素
  • 选择器

    选择器 说明
    E:first-child 查找第1个E元素
    E:last-child 查找最后一个E元素
    E:nth-child(N) 查找第N个E元素(第1个元素N值为1)
  • :nth-child(公式)

    • 作用:根据元素的关系结构查找多个元素

      公式 功能
      2n 偶数标签
      2n+1; 2n-1 奇数标签
      5n 找到5的倍数的标签
      n+5 找到第5个以后的标签
      -n+5 找到第5个以前的标签
  • 示例

4、伪元素选择器

  • 作用

    • 创建虚拟 元素(伪元素),用来摆放装饰性的内容
  • 选择器

    选择器 说明
    E::before 在E元素里面最前面添加一个伪元素
    E::after 在E元素里面最后面添加一个伪元素
  • 注意

    • 必须设置 content: "" 属性,用来设置 伪元素的内容,如果无内容,则引号留白即可
    • 微元素必须是 行内 显示模式
    • 权重 标签选择器 相同。
  • 应用场景

    • 插入内容‌:使用::before和::after伪元素在元素的前后插入内容,如在段落前添加引用符号、图标装饰等‌
    • 分割符号‌:使用::before和::after伪元素在列表项之间添加分割线或其他符号,提高列表的可读性‌
    • 清除浮动‌:使用::after伪元素来清除浮动,保证容器正确包裹元素‌
    • 首行缩进‌:使用::first-line伪元素来设置元素内第一行的样式,如字体、颜色等‌
    • 首字母样式‌:使用::first-letter伪元素来设置元素内第一个字母的样式,如字体大小、颜色等‌
  • 示例


  • 总结
相关推荐
旧林8431 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq13 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架