常用CSS选择器

1.元素选择器：
作用：通过元素选择器可以选择页面中的所有指定元素
语法: 标签名{}

 

2.id选择器：
    -通过元素的id属性值选择唯一元素
    -语法：
        #id属性值{}   

 

3. 类选择器：
    - class属性和id属性类似，只不过class属性可以重复
    -拥有相同class属性值的元素，我们说他们是一组元素
    -一个元素可以有多个class属性值，多个值之间用空格隔开。  ！！！！！
    -通过元素的class属性值选中一组元素
    -语法：
        .class属性值{}

 

 4.选择器分组：
     -通过选择器分组可以同时选中多个选择器对应的元素。
     -语法：选择器1，选择器2，选择器N{} 
     -效果：同时选中了选择器1，2，N他们所指向的元素，实现了代码的复用。 

 

5.通配选择器：
    -他可以用来选中页面中的所有元素。(模糊选择)
    -语法： *{}

 

6.精准(复合)(交集)选择器：   ！！！！！！
    -作用：
        - 可以选中同时满足多个选择器的元素 (精准选择)
    -语法：
          选择器1选择器2选择器N{}  指定同时选择器1，2，N的元素    

7.后代选择器：
    -作用：
        -可以选择某一元素的所有子孙元素。
    -语法：
        祖先元素 后代元素{}    注：祖先元素与后代元素之间有一个空格。

8.子元素选择器：
    -作用：
        -选中指定父元素的指定子元素。  注：明确子元素与子孙元素的区别
    -语法：
        父元素 > 子元素  注：可在一个表达式中连续使用多个 > 明确查找关系

9.属性选择器：
    - 作用：可以根据元素中的属性或属性值来选取指定元素
    - 语法：
        [属性名] 选取含有指定属性的元素
    如：
        1.选中含有属性为title的p标签
        p[title] {
            background-color: yellow;
        }   
        2.选中title属性值为xxx的p标签，找出含指定属性值的元素标签
        p[title = 'xxx'] {
            background-color: yellow;
        }      
        3.选中title属性以xxx开头的p标签
        p[title ^= 'xxx'] {
            background-color: yellow;
        }
        4.选中title属性以xxx结尾的p标签
        p[title $= 'xxx'] {
            background-color: yellow;
        }       
        5.选中title属性值包含xxx的p标签
        p[title *= 'xxx'] {     title中包含指定内容'xxx'
            background-color: yellow;
        }          

10.兄弟选择器：
    -选中某一个标签后的紧邻着的兄弟节点，若不紧邻则没用，选择不中。 
    -标签1 + 标签2{}
    
    -选中某一个标签的后面的所有兄弟节点
    -语法：前一个标签 ~ 后面的所有标签

11.否定伪类：
    -作用：可以从已经选中的元素中剔除某些元素
    -语法：
        :not(选择器)
    -例如：
        p:not(.hello)  选中class属性不为hello的p标签