在内嵌式和外部css中，要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，这时需要用到CSS中的选择器。

选择器:选择要添加样式的 HTML 标签的一种方法、模式。

首先学习 css2.1 版本的七种选择器：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。
标签选择器:直接书写标签字母
通过标签名去选择标签元素。
书写方式：标签名。
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管
嵌套多深，都能被选中。
标签选择器特点:
优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
缺点：只能实现全选，不能对局部的标签添加特殊样式。
id 选择器：
• 通过标签上的 id 属性去选择标签。
• 书写方式：#id 属性值
• 选择范围：只能选中一个标签。
• id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
• 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
id 选择器特点：
缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。
类选择器：
• 通过标签的 class 属性去选择标签。
• 书写方式：.class属性值
• 选择范围：是页面中所有 class 属性值相同的标签。
• class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
类选择器特点：
特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中。
特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。
类选择器的特殊应用：
原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。

类选择器的优点：
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。
通配符选择器：

通过一个特殊符号选择页面内所有的标签。

书写方式：*
选择范围：包含 <html>标签在内的所有标签。
通配符特点和应用：
优点：可以实现全选，简化书写。
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
注意：实际上线的网站不允许使用 * 去清除默认内外边距。
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。
后代选择器：
由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器。高级选择器的组成部分是基础选择器。
通过标签之间存的嵌套关系(族谱关系) 去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式:空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后-个选择器确定选中的标签。
注意:后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。
后代选择器特点：

优点：减少 class 属性的定义使用，选择效率更高。
交集选择器：
• 通过一个标签之上满足所有的基础选择器的需求去选择标签。
• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
• 选择范围：
选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
• 比较常见的是标签与类的交集。

交集选择器更多写法：
• 交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
• IE6 不支持类名连续交集写法。
• 交集选择器可以作为其他高级选择器的组成部分。
并集选择器：
不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式:将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围:是所有的单独选择器选中的标签的并集集合。
并集选择器用途：
①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
 

CSS 选择器-认识并应用选择器的更多相关文章

  1. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  4. html中css三种常见的样式选择器 zz

    1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 <html><head><styletype="t ...

  5. 使用CSS的类名交集复合选择器

    首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接 ...

  6. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  7. css基础之 id和选择器

    id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. (1) id 选择器 id 选择器 ...

  8. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  9. css——样式表分类，选择器

    一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...

  10. css基础语法一（选择器与css导入方式）

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

随机推荐

  1. 力扣1143. 最长公共子序列（dp）

    给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共子序列 的长度.如果不存在 公共子序列 ,返回 0 . 一个字符串的 子序列 是指这样一个新的字符串:它是由原字符串在不改变字符 ...

  2. 本地部署一套k8s集群

    我这里准备三台本地vmware虚拟机,版本号centos7.9,一台master节点,一台node1,一台node2 kubeadm方式部署.Kubeadm 是一个 K8s 部署工具,提供 kubea ...

  3. 搭建ftp服务器的超详细步骤

    第一步:打开控制面板. 1.1选择程序这个选项. 1.2选择启用或关闭window功能 1.3勾选如图有红箭头的这几个选项. 第二步:搜索iis且将其打开 . 2.1点击网站,且点击添加网站 物理路径 ...

  4. 回溯-1-N皇后（Backtracking-1-N Queens）

    #include <stdio.h> #define N 4 enum bool {TRUE, FALSE}; void print_Q(int *Q) { int i; for (i = ...

  5. k8s_namespace

    namespace 可以认为namespaces是kubernetes集群中的虚拟化集群.在Kubernetes集群可以拥有多个命名空间,它们在逻辑上彼此隔离. 多数的Kubernetes中的集群默认 ...

  6. 4.docker安装mysql

    下载mysql镜像 打开docker镜像仓库 https://hub.docker.com 我们下载官方镜像,点击打开 可以看到tags有很多不通版本的mysql 比如我想安装5.7版本的就可以使用  ...

  7. 7. C语言科学计数法表示int

    c语言10的n次方写用e表示: 比如int a=10e2 表示10*10的2次方=1000: 注意:10e6, 代表10*10^6 不代表10^6. 10^6为1^6

  8. APP的文件数据直传腾讯云COS实践

    简介 本文主要介绍基于腾讯云对象存储COS,如何快速实现一个app的文件直传功能.您的服务器上只需要生成和管理访问密钥,无需关心细节,文件数据都存放在腾讯云 COS 上. 架构说明 对于app应用,把 ...

  9. ant Vue select 多条数据重复的问题

    1.问题描述:select实现下拉的功能,并且带前端搜索,但是后端给的数据没去重,对象中所有的参数值有保持一致,试了下,发现只要key值和value值不一致就不会报错: 2.解决:key值用index ...

  10. 大规模人脸分类—allgather操作(1)

     pytorch中 all_gather 操作是不进行梯度回传的.在计算图构建中如果需要经过all_gather操作后,仍需要将梯度回传给各个进程中的allgather前的对应变量,则需要重新继承to ...