CSS选择器

一、全局选择器

可以和任何元素匹配，优先级最低，一般做样式初始化

二、元素选择器

元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：b、div、p、a、ul、li、body、img等元素符号）。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

参考代码片段：

div{
    width:80px;
    height:90px;
}

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

温馨提示：

1.所有的标签都可以是选择器

2.无论这个标签藏得多深，一定能够被选择上

3.选择的所有，而不是一个

• 三、class选择器

1. class选择器（类型选择器）：是最常见和易于理解的。该选择器通过绑定HTML元素上已设置的class标签进行设置对应的CSS样式。

   以 .（class选择符前缀）加上对应的class名称组合成选择器的元素符号。

   例如，要选择页面上class属性为hello的元素：

class属性的特点

1.类选择器可以被多种标签使用

2.类名不能以数字开头，可以由下划线、字母、数字组成

3.同一个标签可以使用多个类选择器。用空格隔开

四、id选择器

id选择器​：该选择器通过绑定HTML元素上已设置的唯一 ​id​ 标签进行设置对应的CSS样式。

​id选择器​可以为标有特定​id​的HTML元素指定​特定的样式​。 

​HTML元素​以id属性来设置​id选择器​,​CSS​中id选择器以​"#"​来定义。

 因为HTML页面中id标签的唯一性（不允许同时存在两个相同的id），所以id选择器的复用性相对较低，因此较为建议使用class选择器

参考代码片段：

#hello{
    width:80px;
    height:90px;
}

 注意：

• id 属性在文档内必须是​唯一​的。
• ​不要​使用​数字​开头的 id 属性！在某些浏览器中可能出问题。

五、后代选择器

​后代选择器​： 选中某个父级下对应的​所有子级​，并针对该子级设置CSS样式。

​后代标签​只要是当前标签里面的​任意一个标签​都行不一定非要亲儿子

• 后代选择器设置的CSS样式​不会影响​到父级。
• 父级和子级之间需要用​空格隔开​。
• 后代选择器可以存在​多层级父级​，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

  实例： 

 

 语法解释：

在​后代选择器​中，规则左边的选择器一端包括两个或多个用​空格分隔​的选择器。选择器之间的空格是一种​结合符​（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须​从右向左​读选择器。

六、子元素选择器

子元素选择器​： 子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。

• ​后代选择器​可以跨层级影响，而​子元素选择器​要求父元素和子元素一定为​上下级​关系，中间如果隔着其他元素则会失效。
• 父元素和子元素之间需要用 ​> ​​(子结合符)​ 隔开。

七、相邻选择器

如果需要选择​紧接​在​另一个元素后​的元素，而且二者有​相同​的​父元素​，可以使用​相邻兄弟选择器​（Adjacent sibling selector）。

相邻选择器​： 选中对应元素的下一个兄弟元素。

• 所涉及的相邻兄弟元素必须是该元素的​同级元素​。
• 所涉及的相邻兄弟元素必须是​相邻兄弟元素​，中间若有其他元素隔开也将导致失效。
• 元素A和对应的相邻兄弟元素之间需要用 ​+​  隔开。

八、属性选择器

属性选择器​： 检索HTML页面中符合所设置的​属性​条件的​元素​。根据元素的​属性​和​属性值​来匹配​元素​。

​属性选择器​：通过​[ ]​设置被选元素的属性条件。其中包含​属性名称​，后跟​可选条件​以匹配属性的值。

属性选择器​分两类：

• 存在和值属性选择器 (匹配精确的属性值)   

       1. [attr]: 包含​attr​属性的​所有元素​

       2. [attr=val]：选择属性​attr​被​赋值为val​的​所有元素​

       3. [attr~=vall]:​仅选择​属性​attr​中，属性值​包含val​的所有元素             

• 子串值属性选择器 (伪正则选择器)

       1. [attr|=val]:选择​attr​属性的值是​val​或值​以val-开头​的元素

       2. [attr^=val]:选择attr属性的值​以val开头(包括val​)的元素

       3. [attr$=val]:选择attr属性的值​以val结尾（包括val）​元素

       4. [attr*=val]:选择attr属性的值中​包含字符串val​的元素

属性选择器的使用方式比较多样性，大家可以在代码试运行小题中尽情体验。

1、属性选择器的基础用法

存在和值属性选择器​：可以匹配精确的属性值

  参考代码片段：

 1.  设置页面上所有含有id属性的div元素

 div[id]{
    color:red;
 }

 2. 设置页面上所有含有href属性并且属性值为https://www.woaixuexi.cn的a元素

  a[href="https://www.woaixuexi.cn"]{
     color:red;
  }

 

 3.设置页面上所有含有class属性并且属性值的词列表的某个词等于woaixuexi的div元素。(适用于针对设置了多个class名称的元素使用)

  div[class~="woaixuexi"]{ 
     color:red;
  }

2、属性选择器的进阶用法

除了基础的属性选择器外，接下来将给大家介绍一些特殊的属性选择器用法。

​子串值属性选择器​： 伪正则选择器

 参考代码片段：

 设置页面上所有含有class属性并且属性值中以woaixuexi开头的div元素

div[class^="woaixuexi"]{
    color:red;
}

 设置页面上所有含有class属性并且属性值中以woaixuexi结尾的div元素

div[class$="woaixuexi"]{
    color:red;
}

 设置页面上所有含有class属性并且属性值中包含woaixuexi的div元素

div[class*="woaixuexi"]{
    color:red;
}

设置页面上所有含有class属性并且属性值等于woaixuexi或者以woaixuexi开头的div元素

div[class|="woaixuexi"]{
    color:red;
}

九、选择器优先级

优先级从高到低：行内样式>ID选择器>类选择器>元素选择器

十、选择器分组

选择器分组​：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而造成不必要的冗余。

 ​选择器分组​通过​ , （逗号）​将需要复用同一套样式的多个元素进行分隔。

参考代码片段：

/***选择器分组写法***/
a,p,div{
    color:red;
}

/***原始写法***/
a{color:red}
p{color:red}
div{color:red}

 注意：两种写法，同样实现了，将 a元素，p元素和div元素的CSS样式进行更改，但是用原始写法，代码就很冗余，用选择器分组写法明显简洁许多，所以推荐使用​选择器分组写法​。