css选择器

一、通配选择器：

*{

    font-size: 14px;

    color:rgba(255, 128, 0, 0.1)

}

二、元素选择器：

h2{

    font-size: 14px;

    color:rgba(255, 128, 0, 0.1)

}

三、类选择器：

.title{

    font-size: 14px;

    color:rgba(255, 128, 0, 0.1)

}

四、ID选择器：

#main-page{

    font-size: 14px;

    color:rgba(255, 128, 0, 0.1)

}

五、交集选择器（且）：

.title.warning{

    font-size: 20px;

    color:red;

}

六、并集选择器（或）：

.title,.warning{

    font-weight: bolder;

}

七、后代选择器：

ul li{

    color:red;

}

八、子代选择器：

ul>li{

    color:red;

}

九、兄弟选择器：

   1、只选择紧紧相邻的后一个兄弟元素

.title+.warning{

    color:red;

}

 2、只选择后面的所有兄弟

.title~.warning{

    color:red;

}

十、属性选择器：

1、属性为title

[title]{

    color: red;

}

2、属性为title 且title属性的值为sany

[title="sany"]{

    color: red;

}

3、属性为title 且title属性的值以sa开头

[title^="sa"]{

    color: red;

}

4、属性为title 且title属性的值以ny结尾

[title$="ny"]{

    color: red;

}

5、属性为title 且title属性的值包含an字串

[title*="an"]{

    color: red;

}

十一、动态伪类选择器：

1、没有访问过的链接

a:link{

    color:red;

}

2、访问过的链接

a:visited{

    color: green;

}

3、鼠标悬停

a:hover{

    color:red;

}

4、激活

a:active{

    color:yellow;

}

5、获取焦点

a:focus{

    color:yellow;

}

十二、结构伪类：

1、任何父元素下的第一个类为title的元素

.title:first-child{

    color:red;

}

2、任何父元素下的最后一个类为title的元素

.title:last-child{

    color:red;

}

3、任何父元素下的第3个类为title的元素

.title:nth-child(3){

    color:red;

}

4、任何父元素下的类为title的元素（选择奇数个）

.title:nth-child(odd){

    color:red;

}

5、任何父元素下的类为title的元素（选择偶数个）

.title:nth-child(even){

    color:red;

}

6、任何父元素下的类为title的元素（符合公示2n+1）

.title:nth-child(2n+1){

    color:red;

}

7、任何父元素下的第一个类为title的元素(忽略其他元素)

.title:first-of-type{

    color: red;

}

8、任何父元素下的最后一个类为title的元素(忽略其他元素)

.title:last-of-type{

    color: red;

}

9、任何父元素下的类为title的元素(忽略其他元素的情况下，符合公式2n+1)

.title:nth-of-type(2n+1){

    color: red;

}

10、任何父元素下的类为title的元素(忽略其他元素的情况下，为奇数)

.title:nth-of-type(odd){

    color: red;

}

11、任何父元素下的倒数第3个类为title的元素

.title:nth-last-child(3){

    color:red;

}

12、任何父元素下的倒数第3个类为title的元素(忽略其他元素)

.title:nth-last-of-type(3){

    color:red;

}

13、父元素下只有一个元素，名称为title

.title:only-child{

    color: red;

}

14、父元素下只有一个名称为title元素，可以有其他不符合条件的元素

.title:only-of-type{

    color: red;

}

15、类名为title的元素，内容为空（有空格都不算为空）

.title:empty{

    width: 100px;

    height: 100px;

}

16、跟元素(html)

:root{

    background-color: red;

}

17、否定（排除 满足括号内条件的元素）

div p>div:not(.waring){

    color:green;

}

div p:not(:first-child){

    color: red;

}

div p:not(:nth-child(2n+1)){

    color: red;

}

十三、伪元素选择器

1、选择文本的第一个字

div::first-letter{

    font-size: 32px;

}

2、选择文本的第一行

div::first-line{

    font-size: red;

}

3、选择文本的鼠标选中的文字

div::selection{

    color: red;

}

4、选择输入 的提示的文本

input::placeholder{

    color:lightgray;

}

5、目标元素之前

.title::before{

    content: "￥";

}

6、目标元素之后

.tittle::after{

    content: "(元)";

}