Css3学习笔记（一）：选择器篇

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;
}