高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
语法格式：选择器1 选择器2 ..... { 属性名N:属性值; }
描 述： 选择父选择器下面的子选择器，添加属性
注 意：
1、 选择器1 和选择器2之间有父子关系
2、 选择器可以有N个（注意：父子关系；多个选择器之间有一个空格）
这个其实就是嵌套你的选择属性，比如前者加上你的外面的父级后者加入要进行的子级
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<head> <meta charset="UTF-8"> <title>后代选择器</title> <style> u{ color: pink; } div u{ /*这个是选择div中的u标签进行改变*/ color: green; } </style> </head> <body> <!--高级选择器分为 后代选择器 子代选择器 并集选择器 交集选择器--> <p><u>老王开车去卖瓜</u></p> <div> 你家里的物品 <span> 有很多东西 <u>什么都有</u> </span> </div
<head> <meta charset="UTF-8"> <title>后代选择器</title> <style> .two{ /*这个是对所有的类是two的标签进行修改*/ color: brown; } .one .two{ /*仅仅对父类是one字类是two的标签进行修改*/ color:red; } </style> </head> <body> <p class="one"><u class="two">老王</u></p> <p class="two">老李</p> <p class="three">老张</p> </body>
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
<head> <meta charset="UTF-8"> <title>子代选择器</title> <style> .one >p{ /*选择第一个的p因为有大于号*/ color: red; } </style> </head> <body> <div class="one"> <p>111 <div><p>222</p></div> </p> </div> </body>
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
：选择器1,选择器2 ..... { 属性名N:属性值; }
描 述： 给多个选择器同时添加相同属性
注 意：
1、 多个选择器之间用逗号“，”分隔
<head> <meta charset="UTF-8"> <title>并集</title> <style> h3,a{ /*使用逗号对所有的进行需要进行设置的选择器进行设置*/ color: brown; } </style> </head> <body> <h3>这是一个奇幻的开头</h3> <a href="">真的吗</a> </body>
比如像百度首页使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器
错误代码：
<head> <meta charset="UTF-8"> <title>并集</title> <style> .class a{ /*像这种代码是没有做用的 因为必须这两个选择器是不同类型的*/ color: red; } </style> </head> <body> <h3 class="one">这是一个奇幻的开头</h3> <a href="">真的吗</a> </body>
并集选择器：
<style> h3.one{ /*并集选择器中间不能加空格*/ color: red; } </style> </head> <body> <h3 class="one">这是一个奇幻的开头</h3> <a href="">真的吗</a> </body>
属性选择器：
<!-- 属性选择器仅限于在表单控件中 -->
<head> <meta charset="UTF-8"> <title>属性选择器</title> <style> [for]{ color: aquamarine; } [for='username']{ color: brown; } [for=password]{ font-size: 20px; font-family: 楷体; } /*以...开头^ 其实就和正则的^符号差不多开头*/ [for^=user]{ /*对以user开头的标签进行操作*/ color: red; } /*包含某元素的标签*/ [for*=vip]{ /*找到属性含有vip的属性进行修改*/ color: olive; } [for*='our']{ color: red; } /*以....结尾 $*/ [for$='ip']{ /*找到以ip为结尾的标签的属性*/ color: yellow; } </style> </head> <body> <form action=""> <label for="lab">这是输入框</label> <input type="text"><br/> <label for="username">请输入用户名</label> <input type="text"><br/> <label for="password">请输入密码</label> <input type="password"><br/> <label for="yourevip">vip用户登陆区域</label> <input type="text"> </form> </body>
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器
语法格式：选择器:[参数] { 属性名N:属性值; }
参 数：
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
注 意：
1、默认[参数]，:link 省略
2、常用状态： hover 鼠标经过/移动到链接上时显示的颜色
<head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a:link{ /**/ color:red;} a:visited{ /*访问过后的颜色*/ color: black; } a:hover{ /*鼠标经过就是黄色的*/ color: yellow; } a:active{ /*鼠标摁着不松的状态*/ color: aqua; } </style> </head> <body> <a href="">这是一个选择器</a> <a href=""></a> </body>
再给大家介绍一种css3的选择器nth-child()：
<head> <meta charset="UTF-8"> <title>nth-child</title> <style> /*选中第一个元素*/ div, ul li:first-child{ /*对div中和ul中的第一行的li的字体进行修改*/ font-size: 77px; color: red; } /*选中最后一个元素*/ div,ul li:last-child{ /*对最后一行的元素进行设置*/ color:green; } /*选中当前指定的元素 数值从1开始*/ div,ul li:nth-child(2){ /*对指定的div的第二行 ul中的第二个li进行设置*/ font-size: 3px; } /*偶数*/ div,ul li:nth-child(2n){ /*对偶数行进行设置*/ font-size: 50px; color:white; } /*奇数*/ div,ul li:nth-child(2n-1){ color:darkgreen; } /*隔几换色 隔行换色 隔4换色 就是5n+1,隔3换色就是4n+1 */ div, ul li:nth-child(5n+1){ color:blueviolet; } </style> </head> <body> <div> 你是不是偷偷的喜欢我 </div> <ul> <li>要不要</li> <li>这样</li> <li>就这样</li> </ul> </body>
伪元素选择器：
<head> <meta charset="UTF-8"> <style> /*设置第一个首字母的样式*/ p:first-letter{ /*对p标签的第一个元素进行设置*/ color:red; font-size:30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ /*在p标签之前添加元素*/ content:'alex;' } /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ /*在p标签的最后面添加元素*/ content:'alex'; color:red; font-size: 40px; } </style> </head> <body> <p>这是一个伪元素的选择器</p> </body>