CSS选择器

        CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。

     选择器的大致结构如下：

选择器{
    属性:值;
    属性2:值;
}

注意：写代码时不要乱加空格！！！！！！！！！

一、基本选择器

1、元素选择器：

用元素名称做选择（*表示全部元素）
 

*{
        color:red;
}

div{
        color:red;
​​​​​​​}

...

2、属性选择器

选择div[id]有id属性的div元素
选择div[id=xx] 有id属性，且id属性值为xx的div元素
选择div[id*=xx] 有id属性，且id属性值包含xx的div元素
选择div[id^=xx] 有id属性，且id属性值以xx开头的div元素
选择div[id$=xx]有id属性，且id属性值以xx结尾的div元素
 

div[id$=xx]{
    color:purple;
    background:greenyellow;  
}  

3、id选择器

通过元素的唯一标识符（ID）选择 HTML 元素。
ID 选择器以 # 开头，后面跟着 ID 名称。
 

#xx{
    color:purple;
    background:greenyellow;
}

4、class选择器（类选择器）

类选择器以 . 开头，后面跟着类别名称。
 

.text{
  background:yellow;
}

特殊：组合选择器：组合选择器由两个或多个简单选择器组合而成，它们描述了元素之间的关系。

5、包含选择器（也叫后代选择器）（强调包含关系）

div p{
  background:yellow;
}

选择div元素内所有p元素

6、子选择器（强调直接的父子）

通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如,ul>li选择器将选择所有<ul>元素的直接子元素中的<li>元素。
 

ul>li{
    color:red;
}

        注意：后代选择器与子选择器比较：子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。

7、兄弟选择器

选择某一个指定元素的后面的所有兄弟结点。

h1~p{
    color:red;
}

h1后的p元素变红色

8、选择器组合
 

p,
div,
span{
    color:red;
}

二、伪元素选择器

选择元素的特定部分修改样式。

1、首字母(::first-letter)          只能用于块级元素
 

::first-letter{
        color:red;
}

2、首行(::first-line)          只能用于块级元素
 

::first-line{
        color:red;
}

3、前面插入(::before)

div::before{
        content:"hello";
        color:red;
}

div前插入红色字体的hello

4、后面插入(::after)

同理....

三、伪类选择器

1、结构性伪类选择器

p:nth-child(){
}
括号里可以是数字n     n从1开始    
可以是英文单词   odd奇数,even偶数 
括号里可以是表达式5n+2       n从1开始
找第一个:      nth-child(1) = first-child
找最后一个:     last-child =nth-last-child(1)    
倒着数:        nth-last-child()    
只认数字，如果类型刚好符合(例子中为p)，则被选中 ；若类型不为p则不执行

p:nth-of-type(){
}   
括号里可以是数字n        n从1开始    
可以是英文单词     odd奇数,even偶数    
括号里可以是表达式5n+2       n从1开始    
找第一个               first-of-type = nth-of-type(1)    
找最后一个           last-of-type = nth-last-of-type(1)    
倒着数:       nth-last-of-type()
既认数字也认类型，找同类型下的第n个元素    

2、UI状态伪类元素选择器

:hover         鼠标悬停
:focus          焦点状态
:checked     选中状态

3、其他伪类选择器

:not()         否定伪类选择器

div:not(.text){
    color:red
}

div元素中除了text类，其他的元素颜色变红

四、选择器优先级

    选择器的优先级规则    
1、选择器写的越长(越精确)，优先级越高    
2、优先级高低         id选择器>class选择器>元素选择器    
3、同级别长度下，css代码按照顺序执行，后边的效果会把前边的覆盖    
4、注意：以上规则适用大部分场景，特殊场景不适用需要自行测试！！！