选择器笔记

CSS选择器
选择器的定义
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

选择器的分类
基础选择器
1、标签选择器

该选择器是根据一个元素上的某个标签的属性的存在以选择元素的不同方式；或者根据一个有特定值的标签属性是否存在来选择。

结构：标签名{属性；属性；属性}

例：p:选中所有的p标签

    p{
      color: rgb(30, 200, 206);
    }

2、id选择器

该选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。

结构：#id名{属性名：属性值；属性名：属性值；}

例：

#box1{
      color: rgb(168, 29, 52);
    }

3、类选择器

该选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

结构： .类名{属性名：属性值；属性名：属性值；}

例：.

box2{
      color: blueviolet;
    }

4、通配符选择器

该选择器有名全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。

结构：*{属性名：属性值；属性名：属性值；}

例：

*{
      background-color: pink;
    }

包含选择器
1、子代选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

结构：.父代>子代{属性名：属性值；属性名：属性值}

例：

.a>li{
      background-color: pink;
    }

2、后代选择器

后代选择器——典型用单个空格（" "）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

结构：.标签 该标签的所有后代{属性名：属性值；}

例：.

a li{
      background-color: rgb(142, 19, 183);
    }

复合选择器
该选择器又称逗号选择器，是用逗号将需要设置属性的标签连接起来，然后一同给这些类型的标签添加属性。

结构：标签名，标签名，标签名{属性名：属性值；}

例：

div,p,span{
  color: pink;
    }

属性选择器
结构：标签名 [标签类型]{ 属性名：属性值；属性名：属性值；}

1、input[type^=“te”]{属性名：属性值； } 表示选择以te开头的所有类型的标签。

2、input[type$=“l”]{ 属性名：属性值；} 表示type值中以l结尾的值的标签。

3、input[type=“e”]{属性名：属性值； }* 表示type值里含有e的值的标签。例：
 

input[type^="te"]{
      background-color: yellow;
    }

    input[type$="l"]{
      background-color: green;
    }

    input[type*="e"]{
      background-color: blanchedalmond;
    }

伪类选择器
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

结构：锚元素：伪类名称{ 属性名：属性值；}

例：

a:hover{
      cursor: cell;
      font-size: 50px;
    }

:hover ------->鼠标悬停

cursor -------->鼠标样式

结构伪类选择器
结构：父元素 子元素：nth-child(n) ：表示父元素中的第几个元素。

例：

ul li:first-child{
      background-color: pink;
    }
    
  first-child  ：表示第一个孩子
  lat-child  ：表示最后一个孩子
  nth-child（n）  ：表示第几个孩子

child的值：n—>从0开始查找，选择所有的孩子；2n、even—>偶数;2n-1、odd—>奇数

nth-child(n):在子元素中从头开始编码，选择时先看nth-child，然后选择整体的第几个。
	ul li:nth-child(2){
      background-color: pink;
    }
nth-of-type(n):在li的子元素中从头开始编码，选择是先选择li中的第几个，再看nth-of-type
    ul li:nth-of-type(2){
      background-color: red;

伪元素选择器
结构：父元素 子元素::伪元素{属性名：属性值；}

ul li::before{
      /*content属性：在li小例中元素前面添加伪元素*/
      content: "~";
    }
    ul li::after{
      /*content属性：在li小例中元素后面添加伪元素*/
      content: "000";
    }

1input::placeholder -----> 表单提示词

::selection ----->表示选中时