9、选择器详解
9.1 属性选择器
CSS3 属性选择器，在 CSS3 中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
<!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 结构性伪类选择器
CSS3 结构性伪类选择器，包含伪类选择器和伪元素选择器，在伪元素选择器中包含 first-line、first-letter、before、after。
9.2.1 伪类选择器概述
9.2.2 伪元素选择器概述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-line{ color:crimson; } /*first-line第一行*/ p:first-letter{ color:deepskyblue; } li:before{ content:"---"; } /*first-letter*/ li:after{ content:"对列表做一个解释"; font-size: 10px; color:darkgrey; } </style> </head> <body> <p>这是第一行的内容<br/>这里是第二行的内容</p> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </body> </html>
9.3 选择器root、not、empty、target
CSS3 选择器 root、not、empty 和 target，主要掌握 root 选择器是绑定到页面的根元素中，如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，可以使用 not，使用 empty 选择器来指定当元素中内容为空白时使用的样式。
在CSS3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*root是对根元素进行样式更改， 即对最根本的html标签进行更改*/ :root { background-color: darkgrey; } /*如果root有设定，那么body就不再是占据整个页面大小的了，只占据 他该占据的内容*/ body { background-color: green; } /*not用来排除某一个标签内部的某一内容*/ div *:not(h1) { color: darkmagenta; } /*只写:empty的话是给所有空白元素加样式*/ :empty { } /*可以灵活应用，老师上课讲的是:empty*/ td:empty { background-color: #FF0000; } /*target属性代表在链接跳转后跳转到的链接div的样式 点击不同的链接时，之前更改过的链接的样式会还原到原来的样子*/ :target{ background-color: orange; } </style> </head> <body> <div> <h2>你好吗？</h2> <h1>这里是标题</h1> <p>这里是一个p标签</p> </div> <table border="1px"> <tr> <td>表格1</td> <td>表格2</td> </tr> <tr> <td></td> <td>表格4</td> </tr> </table> <a href="#a1">菜单1</a> <a href="#a2">菜单2</a> <a href="#a3">菜单3</a> <a href="#a4">菜单4</a> <div id="a1"> <h1>菜单1</h1> <p>菜单1内容</p> </div> <div id="a2"> <h1>菜单2</h1> <p>菜单2内容</p> </div> <div id="a3"> <h1>菜单3</h1> <p>菜单3内容</p> </div> <div id="a4"> <h1>菜单4</h1> <p>菜单4内容</p> </div> </body> </html>
10.1 选择器：first-child、last-child、nth-child 和 nth-last-child
first-child、last-child、nth-child 和 nth-last-child，利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li:first-child{ background-color: yellow; } li:last-child{ background-color: blue; } li:nth-child(3){ background-color: firebrick; } /*last-child倒数第几个孩子*/ li:nth-last-child(2){ background-color: darkgreen; } /*odd是奇数的孩子 even是偶数的孩子 */ li:nth-child(odd){ background-color: fuchsia; } </style> </head> <body> <h2>列表</h2> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> </ul> </body> </html>
10.2 选择器：nth-of-type 和 nth-last-of-type
nth-of-type 和 nth-last-of-type，使用这两个选择器，可以避免一些问题的发生。
使用这两个选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按类别选子孩子</title> <style> h2:nth-of-type(odd){ background-color: #FF0000; } /*h2前面还可以加div进行多一级选择，多类选择器可以混合使用，如下*/ /*div h2:nth-of-type(odd){*/ /*background-color: #FF0000;*/ /*}*/ h2:nth-last-of-type(odd){ background-color: aqua; } /*h2前面还可以加div进行多一级选择，多类选择器可以混合使用*/ </style> </head> <body> <div> <h2>文章标题</h2> <p>文章正文</p> <h2>文章标题</h2> <p>文章正文</p> <h2>文章标题</h2> <p>文章正文</p> <h2>文章标题</h2> <p>文章正文</p> <h2>文章标题</h2> <p>文章正文</p> <h2>文章标题</h2> <p>文章正文</p> </div> </body> </html>
10.3 only-child 选择器
使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。
nth-child()使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li:nth-child(4n+1){ background-color: darkviolet; } li:nth-child(4n+2){ background-color: darkgreen; } li:nth-child(4n+3){ background-color: firebrick; } li:nth-child(4n+4){ background-color: aqua; } /*4n和4n+4效果是一样的 li:nth-child(4n){ background-color: aqua; }*/ </style> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul> </body> </html>
使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*li:nth-child(1){*/ /*background-color: aqua;*/ /*}*/ li:only-child{ background-color: #FF0000; } </style> </head> <body> <ul> <li>列表1</li> </ul> <ul> <li>列表1</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul> </body> </html>
11.1 CSS3 选择器 hover、focus、active 和 checked
在 CSS3 的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器，例如 hover、focus、active 和 checked 等
在CSS的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下才起作用，在默认状态下不起作用。
在CSS3中，共有17种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:disabled、E:read-only、E:checked、E:default、E:indeterminate、E:selection、E:invalid、E:valid、E:required、E:optional、E:in-range、
输入框示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*hover是在鼠标放上去的时候有的颜色*/ input[type="text"]:hover{ background-color: darkviolet; } /*focus是鼠标按下的状态有的颜色*/ input[type="text"]:focus{ background-color: aqua; } /*active是指输入框被激活后的状态*/ input[type="text"]:active{ background-color: darkgoldenrod; } </style> </head> <body> <input type="text" name="name"> <input type="text" name="age"> </body> </html>
checkbox示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <style> input[type="checkbox"]:checked{ /*background-color: #FF0000;*/ /*不知道为什么google浏览器的复选框显示有问题 火狐浏览器显示的没有问题*/ outline: gold solid 1px; } </style> </head> <body> <input type="checkbox">阅读 <input type="checkbox">旅游 <input type="checkbox">看电影 <input type="checkbox">上网 </body> </html>
11.2 enabled和disabled
除了结构性伪类选择器外，还有一种 UI 元素状态伪类选择器，例如：enabled 和 disabled 等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>enabled.disabled</title> <style> input[type="text"]:enabled{ background-color: gold; } input[type="text"]:disabled{ background-color: fuchsia; } </style> </head> <body> <script> function radio_change(){ var radio1 = document.getElementById("radio1"); var radio2 = document.getElementById("radio2"); var text = document.getElementById("text"); if(radio1.checked){ text.disabled = ""; /*text.disable = false这样写也可以*/ }else{ text.value = ""; text.disabled = "disabled" } } </script> <input type="radio" id="radio1" name="radio" onchange="radio_change()">可用 <input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用 <input type="text" id="text" disabled> <!--disabled属性只要在input中写了，那么标签将必不可用， 不论其内部的值为什么值，只能通过js修改为可用状态--> </body> </html>
11.3 通用兄弟元素选择器
除了结构性伪类选择器外，还有一种 UI 元素状态伪类选择器，例如：通用兄弟元素选择器等
关于选择器，最后一个介绍的是通用兄弟元素选择器，他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*同级兄弟选择器指的是波浪线两侧的元素是同级*/ /*父元素之下的情况下选中波浪线之后的元素*/ /*这里的div是里div*/ div ~ p{ background-color: fuchsia; } </style> </head> <body> <div> <div><!--指的是在这里这个div--> <p>p元素为小div的元素</p> <p>p元素为小div的元素</p> </div> <p>p元素为大div的元素</p> <p>p元素为大div的元素</p> <p>p元素为大div的元素</p> </div> </body> </html>