CSS选择器

结构性伪类选择器：

a:link{color:#FF0000;text-decoration:none}

a:visited{color:#FF0000;text-decoration:none}

a:hover{color:#FF0000;text-decoration:none}

a:active{color:#FF0000;text-decoration:none}

伪元素选择器：

first-line(为某个元素的第一行文字使用样式）

fist-letter(某个元素的首字母或第一个字）

before(在某个元素之前插入一些内容）

元素：before{content:插入文字}

元素：before{content:url(test.wav)}

after(在某个元素之后插入一些内容）

root选择器：将样式绑定到页面的根元素中（即文档树中最顶层结构的元素）

:root{background-color:yellow}

not选择器用来排除此元素下面的子结构元素。

body *:not(h1){background-color:yellow}

empty选择器：指定当元素内容为空白时使用的元素。

target选择器：对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，当用户点击了超链接并且跳转到target元素后起作用。

first-child选择器与last-child选择器：指定第一个子元素与最后一个子元素的样式。

nth-child与nth-last-child选择器：对指定序号的子元素使用样式。

nth-child(n){}

nth-last-child(n){}倒数第几个

对所有第奇数个子元素或第偶数个子元素使用样式：

nth-child(odd){}

nth-child(even){}

nth-last-child(odd){}倒数第几个

nth-last-child(even)

注意：“h2:nth-child(odd)”这句话的含义是当div元素中的第奇数个元素如果是h2子元素的时候使用样式。

nth-of-type与nth-last-of-type选择器：只针对同类型的子元素进行计算。

h2:nth-of-type(odd){}

h2:nth–of-type(even){}

循环使用样式：

li:nth-child(4n+1){}

li:nth-child(4n+2){}

li:nth-child(4n+3){}

li:nth-child(4n+3){}

4组一个循环。

only-child选择器：指定当某个父元素中只有一个子元素时才使用的样式。only-of-type同理。

UI元素状态伪类选择器

示例：

input[type="text"]:hover{
background-color: greenyellow;
}
input[type="text"]:focus{
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
input[type="text"]:read-only{
background-color: gray;
}
input[type="text"]:read-write{
background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
background-color: gray;
}
input[type="text"]:-moz-read-write{
background-color: greenyellow;
}
input[type="checkbox"]:checked {
outline:2px solid blue;
}
input[type="checkbox"]:-moz-checked {
outline:2px solid blue;
}
input[type="checkbox"]:default {
outline:2px solid  blue;
}

//E::selection选择器
p::selection{
background:red;
color:#FFF;
}
p::-moz-selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
input[type="text"]::-moz-selection{
background:gray;
color:#FFF;
}
td::selection{
background:green;
color:#FFF;
}
td::-moz-selection{
background:green;
color:#FFF;
}

E:read-only（当元素处于只读状态时的样式）

E：read-write(当元素处于非只读状态时的样式）

在firefox中要写成：“-moz-read-only”,”-moz-read-write”;

E:default选择器：指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。

通用元素选择器：指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。：

<子元素> ~<子元素之后的同级兄弟元素>{//指定样式}

使用选择器在页面中插入内容

h1:before{
content: counter(mycounter)'.';
color:blue;
font-size:42px;
}
h1{
counter-increment: mycounter;
}
h1:before{
content: counter(mycounter,upper-alpha)'.';
color:blue;
font-size:42px;
}

//编号嵌套
h1:before{
content: counter(mycounter) '. ';
}
h1{
counter-increment: mycounter;
//如果第二个标题需要重新编号则需要加上此句。
counter-reset: subcounter;
}
h2:before{
content: counter(subcounter) '. ';
}
h2{
counter-increment: subcounter;
margin-left: 40px;
}

多层嵌套
h1:before{
content: counter(mycounter) '. ';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content:  counter(mycounter) '-' counter(subcounter) '. ';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
margin-left: 40px;
}
h3:before{
content:counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter)'. ';
}
h3{
counter-increment: subsubcounter;
margin-left: 40px;
}

//在字符串两端添加嵌套文字符号
1:before{
content: open-quote;
}
h1:after{
content: close-quote;
}
h1{
quotes:"（" "）";
}