选择器分类

Posted 2020-11-20 m5397

层次选择器

　　子集选择器：action>section:

　　后代选择器：body section:

　　兄弟选择器：A+B:

　　通用选择器：A~B：

 

动态伪类选择器

　　未访问：a:link　　已访问：a:visited

　　悬停：a:hover 　　点击时：a:active

　　焦点框（多用于框的链接）：a:fouce

 

结构伪类选择器

　　section:nth-child(n)

　　代表选中第n个元素判断是否为section,是则执行代码否则不执行

　　section:nth-of-type(n)

　　代表选中第五个section

　　first-child:首个　　last-child:最后

否定伪类选择器

　　h1:not(:nth-child(3))：选中除了第三个h1元素的其他h1元素

　　body>h2:only-of-type:表示选择类型为h2元素，并且body里包含一个h2元素时样式才生效，包含多个则不生效

　　body>h2:only-child:表示选择类型为h2元素，并且body元素只有一个子元素时h2时样式才生效，包含多个子元素时不生效

伪元素选择器

　　h1:before　　表示在元素前面加内容

　　h1:after　　 表示在元素后面加内容

　　p:first-letter　　第一个单字

　　p:first-line　　第一行

　　p:seletion{background-color:aquamarine;}　　鼠标选中内容