（整理）CCS中常用的选择器

Posted 2020-10-10 huangrui

**类选择器**
1、点号开始
2、包含字母、数字、连字符、下划线
3、点后面必须是字母开始
4、区分大小写
5、一个类选择器可以应用到多个标签
****



**ID选择器**（尽量不要用，留给JS）
****


**组合选择器/并集选择器**
****


#伪类选择器

元素名称：伪类名称

a：link（未访问）
a：vistied（已访问）
a：hover（鼠标悬停）
a：active（点击时）
顺序必须是L、v、h、a

选择子代选择器（精确）

：nth-child（x）
例子
ul li:nth-child(2)
{color:red;}
表示ul下的第二个li，字体为红色

：nth-child（xn）
其中n的取值是从0开始
例子
ul li:nth-child(2n)
{color:red;}


选择偶数项
ul li：nth-child（even）
{color：red；}

选择奇数项
ul li：nth-child（odd）
{color：red；}

选择div里类型为p的第三个p元素
例子
div p：nth-of-type(3){color:red}




：last-child
：nth-last-child
：onl-child
：onl-of-type








****

#后代选择器

父级元素名称+空格+子级元素名称{声明块}

例如
div p {color：red；}

*****
#子级选择器

父级元素名称+“>”+子级元素名称{声明块}

例如
div >p {color：red}

#属性选择器
input type=“text”
格式一：元素名称[属性名称+属性值]{声明块}

input[type=“text”]{color：red；}

设置placeholder提示信息的样式颜色
input：：-webkit-input-placeholder{color:red;}


选择以属性值开始的标签
元素名称[属性名称+^=+属性值]{声明块}
input[name^="si"]{color：green；}


选择以属性值结束的标签
元素名称[属性名称+$=+属性值]{声明块}
input[name$="chaun"]{color：green；}

选择包含属性值的标签
元素名称[属性名称*=+属性值]{声明块}
input[name*="chaun"]{colo：green；}