9、选择器详解
9.1 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [id*=div]{/*选中id中有div字样的*/ color:lime; } [id^=div]{/*选中id中开头是div字样的*/ color: #FF0000; } [id$=y]{/*选中id中结尾是div字样的*/ color: fuchsia; } </style> <!--css样式表放在前面和后面效果是相同的，只不过在前面的是只渲染一次的 css放在后面引入的话页面需要渲染两次--> </head> <body> <div id="mydiv1">这是一段话测试</div> <div id="div2">这是一段话测试</div> <div id="div3">这是一段话测试</div> <div id="div4">这是一段话测试</div> <div id="my">这是一段话测试</div> </body> </html>
9.2 结构性伪类选择器
9.3.1 伪类选择器概述
9.3.2 伪元素选择器概述
9.3 选择器root、not、empty、target