css3属性选择器
CSS3选择器
一、基本选择器
1.通用选择器(通配符)
*{margin:0; padding:0;}
2.标签选择器(元素选择符)
a{text-decoration:none;}
3.id选择器
4.class选择器
.footer{color:blue;}
5.群组选择器
h1,h2,h3,h4,h5,h6{font-weight:100;}
二、层次选择器(关系选择器)
1.E F 后代选择器
匹配E元素下所有的子元素F
eg: .box a{color:red;}
匹配.box下所有子元素a
2.E>F 子选择器
匹配E元素下第一级子元素F
eg: .box>a{color:red;}
匹配.box下第一级子元素a
3.E+F 相邻兄弟选择器
匹配E元素后紧邻的F元素(有且仅有一个)
eg: .box+h1{color:blue;}
匹配.box后紧邻的h1元素
4.E~F 通用兄弟选择器
匹配E元素后所有的F元素(有可能匹配到多个)
eg: .box~h1{color:blue;}
匹配.box后所有的h1元素
◆ 伪类选择器
三、动态伪类选择器
- E:link 超链接没有被访问过时的状态
- E:visited 超链接访问过后的状态
- E:hover 鼠标滑过(鼠标悬停在E上)时的状态
- E:active 鼠标按下(E元素被激活)时的状态
- E:focus 光标聚焦时触发的状态
eg: input:focus{border:2px solid red;}
四、结构性伪类选择器
- :first-child 匹配某个父元素下第一个子元素
eg: ul li:first-child{color:red;}
匹配ul下第一个子元素li
- :last-child 匹配某个父元素下最后一个子元素
eg: ul li:last-child{color:blue;}
匹配ul下最后一个子元素li
注:a) :first-child <=> :nth-child(1) 都是匹配父元素下第一个子元素
b) :last-child <=> :nth-last-child(1)
都是匹配父元素下最后一个子元素
- :nth-child(n) 匹配父元素下第n个子元素
eg: ul li:nth-child(4){color:pink;}
匹配ul下第4个子元素li
- :nth-child(2n) <=> :nth-child(even)
匹配父元素下第偶数个子元素
- :nth-child(2n+1) <=> :nth-child(odd)
匹配父元素下第奇数个子元素
- :nth-last-child(n) 匹配父元素下从后往前找的第n个子元素
eg: ul li:nth-last-child(2){color:blue;}
匹配ul下倒数第2个li
- :first-of-type 匹配某个父元素下指定类型的第一个子元素
eg: ul li:first-of-type{color:red;}
匹配ul下li这种类型的子元素中的第一个
- :last-of-type 匹配某个父元素下指定类型的最后一个子元素
eg: ul li:last-of-type{color:blue;}
匹配ul下li这种类型的子元素中的最后一个
- :nth-of-type(n) 匹配父元素下指定类型的第n个子元素
eg: ul li:nth-of-type(3){color:pink;}
匹配ul下li这种类型的子元素中的第3个
- :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素
eg: ul li:nth-last-of-type(3){color:purple;}
匹配ul下li这种类型的子元素中的倒数第三个
- :only-child 匹配父元素下唯一一个子元素
- :only-of-type 匹配父元素下指定类型的唯一一个子元素
- :empty 匹配内容为空的元素(空格,回车换行符都不能有)
- :root 匹配根元素html
五、UI状态伪类选择器
- E:checked 匹配选中状态的单选或复选按钮
eg: input:checked+label{color:red;}
匹配选中状态的input元素后面紧邻的label元素
- E:disabled 匹配禁用状态的表单元素
eg: input:disabled{background:red;}
- E:enabled 匹配启用状态的表单元素
eg: input:enabled{border:2px solid green;}
六、目标伪类选择器
语法: E:target 匹配锚点链接连接到的那个元素
eg: p:target{display:block;}
当锚点链接连接到p元素时显示
七、语言伪类选择器
语法: E:lang(val) 匹配含有lang属性,并且值为val的E元素
eg: html:lang(en){font-family:"楷体";}
八、否定伪类选择器
语法:E:not(F) 匹配不满足条件F的E元素
eg: li:not([class="lis"]){background:pink;}
匹配不满足条件class名为lis的li元素
九、属性选择器
- E[attr] 匹配含有attr属性的E元素
eg: a[title]{text-decoration:none;}
匹配含有title属性的a元素
- E[attr=val] 匹配含有attr属性并且值为val的E元素
eg: a[title="千锋教育"]{color:red;}
匹配含有title属性并且值为千锋教育的a元素
- E[attr^=val] 匹配含有attr属性并且值以val开头的E元素
eg: a[href^="http"]{color:gray;}
匹配含有href属性,并且值以http开头的a元素
- E[attr$=val] 匹配含有attr属性并且值以val结尾的E元素
eg: a[href$="com"]{background:orange;}
匹配含有href属性,并且值以com结尾的a元素
- E[attr|=val] 匹配含有attr属性并且值以val-开头或值为val的E元素
eg: a[class|="link"]{color:blue;}
匹配含有class属性,并且值以link-开头,或值为link的a元素
- E[attr*=val] 匹配含有attr属性,并且属性值中含有val的E元素
eg: a[title*="教育"]{color:red;}
匹配含有title属性,并且属性值中含有教育两个字的a元素
- E[attr~=val] 匹配含有attr属性,并且属性值中含有val这个词的E元素
eg: a[title~="教育"]{color:green;}
匹配含有title属性,并且属性值中含有教育这个词的a元素