选择符/选择器深入了解全面的选择器学习：

一、什么是选择器/选择符？

在 CSS 中，选择器是一种模式，通过选择器，我们可以选择到相应的元素。对齐添加样式。

二、选择器/选择符分类

序号	大类	示例	说明
①	通配选择器（全局选择器）	*	指的是所有标签元素不要轻易使用这个选择器，比较消耗性能，那我们是怎么初始化边距的？？？
②	元素选择器	p	指的是某个标签元素
③	class类型选择器	.classname	指的是class名为classname的元素，可以是多个
④	id选择器	#idname	指的是class名为idsname的元素，只可以是一个，因为id是唯一的，即使误操作也只能选择到第一个元素
⑤	属性选择器	略	简单属性选择器，具体属性值选择器，部分属性选择器，开始子串属性值选择器，结束子串属性值选择器，任意子串属性值选择器，语言属性选择器
⑥	伪类与为元素选择略		伪类：通过选择器可以选择到一类元素，可能是0个，1个，多个，伪元素：通过选择器可以选择到一个元素，例如：after ：before ：first-letter ：first-line

⑦

组合选择器

略

组合选择器就是多个选择器组合使用，是前面几种选择器的联合使用

简单组合选择器：后代选择器，子选择器，相邻兄弟选择器，后续选择器

复杂组合选择器：这个很多，具体学习

2.1 通配符选择器/全局选择器

符号： * 就是一个星号，代表的是所有的标签，通常用来初始化，但是耗能比较大，不推荐使用

代码：

    *{
      margin: 0;
      padding: 0;
    }

通配符使用在组合选择器，

代码：

    div * p {
      color: red;
      /* 组合选择器（后代选择器） div * p 
      指的是div标签下的  所有标签 下的p标签 的文本都设置为红色
      */
    }

2.2 元素选择器

符号： tagname 就是标签的名称

代码：

    p {
      color: red;
      /* 
      指的是所有p元素 的文本都设置为红色
      */
    }

2.3 class类名选择器

符号： .classname 就是圆点与类名

代码：

  <style>
    .red {
      color: red;
      /* 
      指的是所有class名为red的元素 的文本都设置为红色
      */
    }
  </style>
</head>

<body>
  <div style="border: 1px solid black;   width: 200px;">
    <p>pppp，不变色</p>
    <p class="red">pppp红色</p>
    <p>pppp</p>
    <div class="red">aaaaa红色</div>
  </div>
</body>

结果：

2.4 id名选择器

符号： #idname 就是 #号与id名

代码：

 <style>
    #red {
      color: red;
      /* 
      指的是id名为red的元素 的文本都设置为红色
      */
    }
  </style>
</head>

<body>
  <div style="border: 1px solid black;   width: 200px;">
    <p>pppp，不变色</p>
    <p id="red">pppp红色</p>
    <p>pppp</p>
  </div>
</body>

结果：

2.5 属性选择器

① 简单属性选择器：元素名[属性名]

例如： a[rel]{color:red;} 说明：存在rel属性的a元素

例如： p[class]{color:red;} 说明：存在属性class的p元素

②具体属性选择器：元素名[属性名="属性值"]

例如： a[rel="home"]{color:red;} 说明：存在rel属性,且属性值为home的a元素

例如： input[type="text"]{}

例如：input[type="button"]{}

③部分属性值选择器：元素名[属性名~="属性值（的部分内容）"] 一个属性的值可能存在以空格分开的多个值

例如： p[class~="red"] 说明：class属性的值里面，包含有red p元素就会被选上，这里等价于 .red 类型选择器

例如：a[rel~="home"] 说明：rel属性的值里面，包含有home ,那么这个a元素就会被选上

代码：

  <style>
    p[class~="red"] {
      color: red;
      /* 
      指的是class属性中属性值包含red的元素 的文本都设置为红色
      */
    }
  </style>
</head>

<body>
  <div style="border: 1px solid black;   width: 200px;">
    <p>pppp</p>
    <p id="red">pppp</p>
    <p class="red">pppp变色</p>
    <p class="red1 red2">pppp，不包含red，不变色</p>
    <p class="red2  red">pppp，包含red变色</p>
    <p class="red2">pppp不变</p>
  </div>
</body>

结果：

④开始子串属性值选择器：元素名[属性名~="属性值的开头部分字符串）"]

例如： a[href^="/blog"] 说明：属性href的属性值的开头的字符串为/blog 的a元素

例如：img[title^="figure"] 说明：title属性的属性值的开头的字符串为/figure 的img元素

⑤结束子串属性值选择器：元素名[属性名~="属性值的结尾部分字符串）"]

例如： a[href$=".pdf"] 说明：属性href的属性值的结尾的字符串为.pdf 的a元素

例如：img[src$=".gif"] 说明：src属性的属性值的结尾的字符串为.gif 的img元素

⑥ 任意子串属性值选择器：元素名[属性名~="属性值的任意部分字符串）"]

例如： a[href*="jingdong.com"] 说明：属性href的属性值的结尾的字符串为.jingdong.com的a元素

例如：img[src*="/img"] 说明：src属性的属性值的任意的字符串为/img 的img元素

⑦ 语言属性选择器：

例如：html[lang |="en"] 选择到语言为英文的html页面

2.5 伪类/伪元素选择器

见另外一篇文章： 伪类/伪元素选择符/选择器深入了解

伪类：通过选择器可以选择到一类元素，可能是0个，1个，多个，

伪元素：通过选择器可以选择到一个元素，例如：after ：before ：first-letter ：first-line

2.6 组合选择器选择器

见另外一篇文章：组合选择器深入了解

组合选择器就是多个选择器组合使用，是前面几种选择器的联合使用

简单组合选择器：后代选择器，子选择器，相邻兄弟选择器，后续选择器

复杂组合选择器：这个很多，具体学习