基本选择器

基本选择器又分为通用选择器、标签选择器、类选择器和ID选择器。

通用选择器

通用选择器是针对作用域范围内的所有元素的选择器。

* { 
   color: red; 
}

标签选择器

标签选择器是针对一类元素的选择器。

div { 
   height: 50px; width: 200px; 
   background-color: wheat; 
}

类选择器

类选择器是针对“class”标签的选择器。

.top { 
    background-color: pink; 
}

ID选择器

ID选择器是针对“id”标签的选择器。

#top { 
    background-color: pink; 
}

复合选择器

多元选择器选择器1，选择器2{属性：值}

后代选择器 E F {属性：值} 匹配所有E元素的子元素F的所有内容，包括孙子和曾孙子等等的标签。

子元素选择器 E > F {属性：值} 直接寻找上一级级别 E 中下一级元素 F 所包含内容，只匹配相邻级别的选择器关系，对孙子选择器不进行匹配操作。

相邻元素选择器 E + F {属性：值} 匹配所有紧邻E元素之后的元素F所有内容 1、E和F元素必须是平辈关系 2、E元素和F元素必须紧挨着，中间不包括任何元素 3、E元素必须要在F元素的上方，否则无效

伪类选择器

伪类选择器是为了给超级链接的不同状态设置样式

:link 未访问状态
:visited 已被访问状态
:hover 鼠标悬浮状态
:active 鼠标放在元素上，点击的一瞬间

属性选择器

优先级从上到下依次递减，优先判断底层的条件

[attr]{                //具有attr属性的元素
}
[attr = "val"]{        //所有attr属性值等于val的元素
}
[attr ^= "val"]{       //所有attr属性值以val开头的元素
}
[attr $= "val"]{       //所有attr属性值以val结尾的元素
}
[attr *= "val"]{       //所有attr属性值包含val的元素
}

CSS选择器|青训营笔记