CSS3学习笔记:选择器
1. 属性选择器
使用[att=val]、[att*=val]、[att^=val]、[att$=val]来分别代表选择属性的相等、包含、以……开头、以……结尾的元素。如:
[id="section1-2"]{background:red;}
[name="tool1"]{background:pink;}
[id*="section2"]{background:blue;}
[id$="1"]{background:pink;}
2. 结构性伪类选择器
所谓伪元素选择器,并不是指真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器。如:选择器:伪元素{属性:值}
或者:
选择器 类名:伪元素{属性:值}
在CSS中,主要有如下4种伪元素选择器:
a. first-line
p:first-line{color:#0000FF}
b. first-letter
p:first-letter{font-size:14px;color:red;}
c. before
li:before{content:*}
d. after
li:after{
content:”仅用于测试,切勿用于商业用途。”;
font-size:12px;
color:red;
}
e. Root
:root{
background-color:yellow;
}
f. Not
li:not(h1){
font-size:18px;
color:gold;
}
g. Empty
:empty{
background-color:yellow;
}
h. Target
:target{
background-color:blue;
}
i. First-child、last-child
li:first-child{
background-color:yellow;
}
li:last-child{
background-color:skyblue;
}
j. Nth-child、nth-last-child
li:nth-child(2){
color:green;
}
li:nth-last-child(2){
color:blue;
}
li:nth-child(odd){
color:green;
}
li:nth-last-child(even){
color:green;
}
k. Nth-of-type、nth-last-type
h2:nth-of-type(even){
background-color:skyblue;
}
l. 循环使用样式
li:nth-child(3n+1){
background-color:yellow;
}
li:nth-child(3n+2){
background-color:blue;
}
li:nth-child(3n+3){
background-color:green;
}
m. Only-child
li:only-child{
background-color:yellow;
}
3. UI元素状态伪类选择器
在CSS3中,共有11种UI元素状态伪类选择器,分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E::selection.input[type="text"]:hover{
background-color:gray;
}
input[type="text"]:active{
background-color:yellow;
}
input[type="text"]:focus{
background-color:pink;
}
p::selection{
background-color:red;
color:#FFF;
}
input[type="text"]:read-only{
background-color:gray;
}
input[type="text"]:read-write{
background-color:yellow;
}
4. 通用兄弟元素选择器
div~p{
background-color:#00FF00;
}