css选择器

通配符选择器

选中页面中所有标签，选择符：*

/* 选择页面中所有标签 */
*{.....}

标签选择器

通过标签书写样式，选择范围广，选择符：标签名

/* 选择所有div标签 */
div{.....}

ID选择器

id选择器具有唯一性，选择符：#

/* 选择所有id="test"的元素 */
#test{.....}

后代选择器

选择一个元素的后代元素，选择器之间用空格隔开，选择符：空格

/* 选择<div>元素内的所有<p>元素 */
div p{
   .....
}

子选择器

选择属于父级里边的子元素，不能包括孙子及其他关系元素，选择符：>

/* 选择所有父级是 <div> 元素的 <p> 元素 */
div > p{
   .....
}

兄弟选择器

除开自身以外的所有兄弟，选择符：~

/* 选择p元素之后的每一个div元素 */
p ~ div{
    .....  
}

 毗邻选择器

选择自己紧挨着下一个邻居，选择符：+

/* 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 */
div + p{
   .....
}

 

 属性选择器

根据标签属性选择元素

/* 选中div标签具有id属性的标签 */
div[id]{.....},

/* 选中div标签中具有class属性，并且属性值等于aaa的标签 */
div[ class = "aaa" ]{.....}

/* 选中div标签中具有class属性，并且属性值含有aaa的标签 */
div[ class ~= "aaa"]{.....}

/* 选中div标签中具有class属性，并且属性值以aaa开头的标签 */
div[ class ^= "aaa" ]{.....}

/* 选中div标签中具有class属性，并且属性值以a结尾的标签 */ 
div[ class$="a"]{.....}

/* 选中div标签中具有class属性，并且属性值里边包含s单词的标签  */
div[ class *= "s"]{.....}

状态类伪类选择器

 

伪类：一系列特殊的选择器

作用：用来选择不同的状态

语法：选择器:关键词{css样式}

• link：修饰没有被点击过的超链接
• visitied：修饰点击过的超链接
• active：修饰鼠标点击时获取焦点的超链接
• hover：鼠标悬停时的超链接

/* 默认样式 */
a:link{...}
/* 点击过的a标签样式 */
a:visited{...}
/* 点击时的a标签样式 */
a:active{...}
/* 鼠标悬停时a标签样式 */
a:hover{...}

 

注意：几种伪类选择器一起使用，一定要注意顺序书写：link -> visited -> hover -> active

结构类伪类选择器

伪类：一系列特殊的选择器

作用：用来选择不同的结构

语法：选择器:关键词{css样式}

• first-child：选择父元素里边的第一个子元素

• last-child：选择父元素里边的最后一个子元素

• only-child：选取父元素的唯一子元素

• nth-child(n)：选择父元素里边的第n个元素

• nth-last-child(n)：选择父元素里边倒数的第n个元素

• nth-of-type(n)：选择父元素内具有指定类元素的第n个元素

• first-of-type：选取父元素的特定类型的第一个子元素

• last-of-type：选取父元素的特定类型的最后一个子元素

• only-of-type：选取父元素的特定类型的唯一一个子元素

• root ：选择文档的根元素

• empty：选择无子元素的元素

• not(ele)：选择除 ele 元素以外的元素

• enabled：选择可用的表单元素

• disabled：选择禁用的表单元素

• checked：选择被选中的表单元素

• first-line：选择元素中的第一行

• first-letter：选择元素中的第一个字符

常用：first-child、last-child、nth-child(n)、nth-last-chil(n)、nth-of-type(n)、first-of-type、last-of-type

 

 注意！

　　1. nth-child(n)选择第n个元素并不指定元素类型，仅仅决定选择第n个子元素

　　2. nth-child(n)参数n代表自然数，从1开始取值；参数也可为：odd | even；还可以为表达式：2n-1.....

　　3.  nth-of-type(n)可以指定子元素类型

点击查看更多css选择器