复合选择器 · CSS

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确的目标元素标签。 [toc] ## 1. 交集选择器交集选择器是并且的意思，交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如下： ```css p.one {...} 选择的是：类名为 .one 的段落标签。 ``` 用的相对来说比较少，不太建议使用。 <br/> ## 2. 并集选择器并集选择器是各个选择器通过**逗号**连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。语法如下： ```css .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。 ``` <br/> ## 3. 后代选择器后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用**空格**分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。语法如下： ```css .class h3 {...}; 子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。 ``` <br/> ## 4. 子元素选择器子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个```> ```进行连接，注意，符号左右两侧各保留一个空格。语法如下： ```css .demo > h3 {color: red;} 说明 h3 必须.demo的亲儿子。 ``` 必须是亲儿子，不能是孙子、重孙子之类。 <br/> ## 5. 伪类选择器伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，可以选择第1个，第n个元素。 <br/> ### 5.1 链接伪类选择器 * ```:link /*未访问的链接 */``` * ```:visited /*已访问的链接 */``` * ```:hover /* 鼠标移动到链接上 */``` * ```:active / *选定的链接 */``` 注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。 ```css a { /* a是标签选择器所有的链接 */ font-weight: 700; font-size: 16px; color: gray; } a:hover { /* :hover 是链接伪类选择器鼠标经过 */ color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */ } ``` <br/> ### 5.2 位置伪类选择器 :first-child、:last-child 、 :nth-child(n)、:nth-last-child(n) 具体用法查看CSS手册。 ### 5.3 目标伪类选择器 :target，具体用法查看手册。 ### 5.4 属性选择器类似于 div[class^=font]，具体用法查看手册。 ### 5.5 伪元素选择器 1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2. E::first-line 文本第一行； 3. E::selection 可改变选中文本的样式； 4. E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。 **`html\伪元素选择器.html`** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span::before { content: "楚乔是"; /* 添加的内容默认为行内元素 */ } span::after { content: "的"; } </style> </head> <body> <span>燕洵</span> </body> </html> ``` * E:after、E:before 在旧版本里是伪元素，CSS3的规范里`:`用来表示伪类，`::`用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。 * `:` 与 `::`区别在于区分伪类和伪元素之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，但实际上是css样式展现的行为，因此被称为伪元素。在html页面中是无法对伪元素的结构进行审查的。