选择器

选择器作用：帮助你精准的选中想要的元素\找到特定的HTML页面元素

1.简单选择器

1.1 ID选择器（JavaScript使用）（不推荐使用）

选中的是对应id值的元素

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签

<p id="id名"></p>

元素的id值是唯一的，只能对应于文档中某一个具体的元素
用法基本和类选择器相同

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同的id对象出现，但是允许相同名字的class。
- 类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟张三李四李伟
- id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
  
  id选择器和类选择器最大的不同在于使用次数上

总结：

类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的JavaScript搭配使用。

例：

#test {
       color: coral;
    }

<p id="test">
    Lorem ipsum dolor sit amet.
</p>

1.2元素（标签）选择器（较多使用）

概念：

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

标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：

标签选择器可以把某一类标签全部选择出来 比如所有的p标签、div标签和所有的span标签

例：

p {
  color: blue;
  }

和p有关的元素都被选中

优点：

是能快速为页面中同类型的标签统一样式
缺点：

不能设计差异化样式

类选择器特殊用法-多类名

我们可以给标签指定多个类名，中间用空格隔开，从而达到更多的选择目的。

例：

    <span class="blue font100">G</span>

1.3类选择器（非常多使用）

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：

类名选择器

.类名 {
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
}

标签

<p class='类名'></p>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意：
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名.（自定义，我们自己命名的）
- 长名称或词组可以使用中横线来为选择器命名
- 不要纯数字、中文等命名，尽量使用英文字母来表示

只要是class类名后面的都会被选中，想删掉时就直接去掉元素中的类名即可 class后面可以应用多个类选择器，用空格隔开即可

1.4通配符选择器（不推荐使用）

*，选中所有元素都为相同样式（test1）

概念

通配符选择器用*（✳）号表示，✳就是选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法如下：

* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边框。

* {
	margin:0;        /*定义外边距*/
	padding:0;        /*定义内边距*/
}

注意：

会匹配所有的元素，降低页面响应速度，不建议随便使用

注：

不使用无具体语义定义的标签选择器div 、span

1.5 属性选择器(少用)

根据属性名和属性值选中元素（test2）

1.6 伪元素选择器（用法看test4）

before

after

2.CSS复合选择器

并且（不加任何元素直接写到一起）（test5）
后代选择器：后代元素 —— 空格（用的最多）（可以精准的选择我们想要的元素）（test6）
子元素选择器：子元素 —— > (把后代元素的空格改成">",只能选中子元素不能选子元素的子元素)（test7）
相邻兄弟元素 —— + (test8)
（后面出现的所有兄弟元素）兄弟元素 —— ~ (test9)

2.1 后代选择器（重点）

概念：

后代选择器又称为包含选择器
作用：

用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子

父级 子级{属性:属性值; 属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

2.2 子代（元素）选择器

作用：

子元素选择器只能选择作为某元素子元素（亲儿子）的元素（只选亲儿子）
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个“>”进行连接
语法：

.class>h3 {color: red; font-size: 14px;}

这里的子指的是亲儿子不包含孙子重孙子之类。

2.3 交集选择器

语法

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special
记忆技巧：

交集选择器是并且的意思，即...又...的意思

比如：   p.one  选择的是：类名为.one 的段落标签

用的比较少，不太建议使用

2.4 并集选择器（重点）

应用：
- 如果某些选择器定义的相同样式，就可以利用并集选择器，可以以让代码更简洁。
并集选择器（CSS选择器分组）是各个选择器通过“，”连接而成的，通常用于集体声明。
语法：

任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。
记忆技巧：

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

p,
span,
.div {
    color: red;
}

2.5 链接伪类选择器(重点)(多用)

伪类选择器:

类选择器是一个点比如.demo{}

而我们的伪类用 2个点就是冒号比如:link{}

作用：
- 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素
- 因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器

选中某些元素的某种状态（test3）(要写的话要按照下面的顺序)

1）a:link：超链接未访问时的状态

2）a:visited：超链接访问过的状态

3）a:hover：鼠标悬停状态

4）a:active：激活状态，鼠标按下状态

3.复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

标签：CSS04,伪类,标签,元素,选择器,id,属性
From： https://www.cnblogs.com/zjy1020/p/17253071.html

CSS04.选择器

选择器