CSS 3 选择器
CSS选择器是很基本的东西。在CSS3中，追加了三个属性选择器分别为
<style> /*id包含div的元素就会应用CSS效果*/ [id *= div]{ color: red; } /*id以div为首字符的元素会应用CSS效果*/ [id ^= div]{ color: green; } /*id以div为结束字符的元素会应用CSS效果*/ [id $= div]{ color: white; } /*id若结尾为数字，则需要注意加"\"*/ [id $= \1]{ color: black; } </style>
这样使得选择器有了通配符的概念
结构性伪类选择器
名字很拗口，所以先解释一下伪类的意思：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态失去时，它又会失去这个样式；所以叫伪类。
- 伪类选择器
:hover ; :link ; :active ; :target ; :focus(应用于拥有键盘输入焦点的元素
在CSS定义中
a:active必须被置于a:hover 之后才是有效的
a:hover必须被置于a:link和a:visited之后才是有效的
- 伪元素选择器
伪元素选择器的效果是需要通过添加一个实际的元素才能达到的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <style> /*first-line：第一行元素添加效果*/ p:first-line{ color: red; } /*first-letter：第一个字符添加效果*/ p:first-letter{ color: green; } /*before：在所选元素前插入内容*/ li:before{ content: "-before-"; } /*after：在所选元素后插入内容*/ li:after{ content: "-after-"; color: grey; } </style> </head> <body> <p>第一行<br/>第二行</p> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul> </body> </html>
效果：
在CSS3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
:root：指将样式绑在页面的根元素中，根元素是指文档中位于最顶层的结构元素；在页面中，就是指整个页面的html部分。:empty：指没有内容的部分:not(XXX)：排除XXX(应用场景：想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用当前这个样式):target：使用target选择器，只对页面中某个target元素指定样式。该样式只在用户点击页面中的超链接，而且并跳转到target元素后才起作用。
例子：
我们根据例子来理解上面的话
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*root覆盖了整个页面*/ :root{ background-color: grey; } /*下面的"*"是通配符，()包含的是想被排除的部分*/ div *:not(h1){ color: blueviolet; } /*empty*/ :empty{ background-color: wheat; } /*target*/ :target{ background-color: orange; } </style> </head> <body> <h3>:not</h3> <div> <h1>Hello?</h1> <h2>Hi!</h2> <p>nice to meet u</p> </div> <!--###########################################--> <h3>:empty</h3> <table> <tr> <td>some</td> <td>any</td> </tr> <tr> <td>where</td> <td></td> </tr> <tr> <td></td> <td>two</td> </tr> </table> <!--###########################################--> <h3>:target</h3> <a href="#a1">menu·1</a>| <a href="#a2">menu·2</a>| <a href="#a3">menu·3</a>| <div id="a1"> <h1>content·1</h1> </div> <div id="a2"> <h1>content·2</h1> </div> <div id="a3"> <h1>content·3</h1> </div> </body> </html>
效果：
关于root的小细节
如果使用了root，那body只给内容区域添加效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <style> :root{ background-color: grey; } body{ background-color: yellow; } </style> </head> <body> <div> <h1>Hello?</h1> <h2>Hi!</h2> <p>nice to meet u</p> </div> </body> </html>
效果：
如果没有使用root，那么body则是给整个页面添加效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <style> /*root覆盖了整个页面*/ :root{ background-color: grey; } </style> </head> <body> <div> <h1>Hello?</h1> <h2>Hi!</h2> <p>nice to meet u</p> </div> </body> </html>
效果：
