标签：通配符选择器   bottom   访问   解决   focus   eve   伪类   元素选择器   层次选择器   

基础选择器

元素选择器；类选择器；id选择器

通配符选择器

通配符选择器是解决兼容性的

格式：* +声明块

例：* {color：red；}

并集选择器

格式：元素或类或ID+“，”+元素或类或ID+声明块

例：h1,h2,h3{color:red;}

p,.container,#box{color:red;}

层次选择器

子集选择器

格式：父级元素名称+“>”+子级元素名称+声明块

例：article>footer{color:red;}

后代选择器

格式：祖先元素名称+“空格”+后代元素名称+声明块

例：div p{color:red;}

兄弟选择器

格式：兄弟元素A+兄弟元素B+声明块

例：div+p{color:red;}

兄弟选择器只能选中紧挨着元素A后面的第一个元素

通用选择器

格式：兄弟元素A+“~”+兄弟元素B+声明块

例：div~p{color:red;}

表示可以选择元素A后面任意位置的同级元素

伪类选择器

动态伪类选择器

1、未访问

格式：a:link+声明块

例：a:link{color:black;}

2、已访问

格式：a:visited+声明块

例：a:visited{color:green;}

3、悬停（当鼠标停留在链接上时的样式）

格式：a:hover+声明块

例：a:hover{color:deeppink;}

可以运用到其他标签，但：在移动端用不了

4、点击时

格式：a:active+声明块

例：a:active{color:deeppink;}

以上四个伪选择器按顺序编写，1，2可以互换顺序，3，4顺序不能动

焦点框（多用于输入框肯链接）

格式：a:focus+声明块

例：a:focus{color:red;}

以上5个伪选择器编写顺序为：

link,cisited,focus,hover,active

结构伪类选择器

格式：元素名称+“：nth-child(n)”+{声明块}

例：h1:nth-child(5){color:gray;}

括号中的n表示元素的位置

表示选中第5个h1元素，颜色为灰色

表示选中第5个元素，并且满足是h1的情况，才会应用样式

2n表示偶数，2n+1是奇数，n是从0开始的

如果要选择后5个：n+6(6表示从第6个开始到最后一共只有5个)

如果要选择前3个：-n+4

格式：元素名称+“：nth-of-type(n)”+{声明块}

例：h1:nth-of-type(5){color:gray;}

表示选中类别为h1的第5个h1

表示先筛选出所有的h1标签，然后在结果里选中第5个h1

格式：元素名称+“：first-child”+{声明块}

例：h1:first-child{color:gray;}

表示选中第1个h1元素

格式：元素名称+“：last-child”+{声明块}

例：h1:last-child{color:gray;}

表示选中最后1个h1元素

格式：元素名称+“：nth-child(odd)”+{声明块}

例：h1:nth-child(odd){color:gray;}

表示选中奇数项

odd也可以写成2n+1

格式：元素名称+“：nth-child(even)”+{声明块}

例：h1:nth-child(even){color:gray;}

表示选中偶数项

even也可以写成2n

否定伪类选择器

格式：元素名称+“：not(相应的选择条件)”+{声明块}

例：h1:not(:not-child(3)){color:grat;}

表示除第3个h1元素外，都应用样式

格式：元素名称+“：only-of-type”+{声明块}

例：body>h2:only-of-type{color:red;}

表示选择类型为h2的元素，并且body里只包含一个h2元素时样式才生效，包含多个h2元素样式不生效

格式：元素名称+“：only-child”+{声明块}

例：body>h2:only-child{color:red;}

表示选择类型为h2的元素，并且body元素里只有一个子元素，并且这个子元素是h2元素时才生效，body包含多个子元素，样式不生效

伪元素选择器

格式：元素名称+“：before”+{content:"加的内容"}

例：h1:before{content:"f51"}

表示在元素前面加内容

格式：元素名称+“：after”+{content:"加的内容"}

例：h1:after{content:"f51"}

表示在元素后面加内容

选中第一行：

p:first-link{color:颜色；}

选中第一个字：

P:first-letter{color:颜色；}

设置鼠标选中内容的背景色和字体颜色：

p:selection{ margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; ">color：颜色；}

CSS选择器

标签：通配符选择器   bottom   访问   解决   focus   eve   伪类   元素选择器   层次选择器   

原文地址：https://www.cnblogs.com/lp1995/p/9217238.html