(1)标签选择器: body、div、p、ul等等
(2)通用选择器: *(用来选取所有元素)
(3)id选择器: #idName
(4)类选择器: .className
(5)后代选择器/包含选择器:(连接符为空格)
div p //指作为div元素后代的所有p元素,允许有隔代关系(6)子元素选择器(连接符为 >) div > p //仅指作为div元素子元素的p元素,仅有父子关系(7)群组选择器(连接符为,)
div,p //几个元素样式属性一样时使用
(8)相邻兄弟选择器(连接符为 +)div + p //指都作为div兄弟元素的p元素,两者有共同父元素,但是div不会受样式影响
(9)伪类选择器(向某些选择器添加特殊的效果)
伪元素的语法:
selector:default-element{property:value;}
CSS 类也可以与伪元素配合使用:
selector.class:default-element{property:value;}
:first-line{} /* 用于向文本首行设置特殊样式,只能用于块级元素 */
:first-letter{} /* 用于向文本的首字母设置特殊样式 */
:before{} /* 用于向元素前插入内容 */
:after{} /* 用于向元素后插入内容 */
:link{} /* 向未被访问的链接添加样式 */
:visited{} /* 向已访问的链接添加样式 */
:hover{} /* 当鼠标悬停在元素上方时,向元素添加样式 */
:active{} /* 向被激活的元素添加样式 */
:focus{} /* 向获取焦点后的元素添加样式 */
:first-child{} /* p:first-child选取的是p元素父元素的第一个子p元素,而不是此p元素的第一个子元素 */
:last-child{} /* 选取此父元素的最后一个子元素 */
:nth-child(n){} /* 选取此父元素的第n个子元素,索引从1开始,n为表达式时索引从0开始 */
:empty{} /* 选取没有任何内容的元素 */
:enabled{} /* 选取处于可用状态的元素,一般用于input、select和textarea */
:disabled{} /* 选取处于禁用状态的元素,一般用于input、select和textarea */
:checked{} /* 选取处于被选中状态的元素,一般用于input和textarea */
(10)属性选择器(对带有指定属性的HTML元素设置样式)
[attr] /* 选取带有指定属性的元素 */
[attr = value] /* 选取带有指定属性和值的元素 */
[attr ~= 'value'] /* 选取属性值中包含指定value的元素,value为单独存在的单词,不能包含在其他单词中 */
[attr *= 'value'] /* 选取属性值中包含指定词汇的元素 */
[attr |= 'value'] /* 选取带有以指定值开头,或者等于该值的元素 */
[attr ^= 'value'] /* 选取属性值以value开头的所有元素 */
[attr $= 'value'] /* 选取属性值以value结尾的所有元素 */