高级选择器分为：
-
后代选择器
-
子代选择器
-
并集选择器
-
交集选择器
-
属性选择器
-
伪类选择器
-
伪元素选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
.container p{ color: red; } .container .item p{ color: yellow; }
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
/*并集选择器*/ h3,a{ color: #008000; text-decoration: none; }
比如像百度首页使用并集选择器。
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 } /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class='active'></h4>这样的标签。
那么
h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集选择器 */ h4.active{ background: #00BFFF; }
它表示两者选中之后元素共有的特性。
属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
/*根据属性查找*/ /*[for]{ color: red; }*/ /*找到for属性的等于username的元素 字体颜色设为红色*/ /*[for='username']{ color: yellow; }*/ /*以....开头 ^*/ /*[for^='user']{ color: #008000; }*/ /*以....结尾 $*/ /*[for$='vvip']{ color: red; }*/ /*包含某元素的标签*/ /*[for*="vip"]{ color: #00BFFF; }*/ /**/ /*指定单词的属性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标摁住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; }
css3的选择器nth-child()
/*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色 隔行换色 隔4换色 就是5n+1,隔3换色就是4n+1 */ div ul li:nth-child(5n+1){ font-size: 50px; color: red; }
伪元素选择器
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; }
form表单简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册百度账号</title> <style> .reg{ width: 400px; color: black; background-color: #0000cc; } a{ text-decoration: none; } label[for='username']{ color: yellow; } </style> </head> <body> <!-- 与服务器进行交互；HTTP协议；请求方式：get/post--> <form action="http://www.baidu.com" method="get" target="_blank"> <!-- 表单控件-->
<p class="user"> <label for="username">用户名：</label> <input type="text" name="username" placeholder="请输入应户名"> </p>
<p class="phoneNumber"> <label for="phoneNumber">手机号：</label> <input type="number" name="phoneNumber" placeholder="可用于登录和召回密码"> </p>
<p class="pwd"> <label for="pwd">密码：</label> <input type="password" name="pwd" placeholder="请设置登录密码"> </p>
<p class="code"> <label for="code">验证码</label> <input type="number" name="code" placeholder="请输入验证码"> <input type="submit" value="获取短信验证码"> </p>
<p> 首次注册：<input type="radio" name="time" value="first" checked> 已有账号：<input type="radio" name="time" value="nofirst"> </p>
<p> <input type="checkbox" name="love" value="eat">阅读并接受 <a href="">《百度用户协议》</a> 及 <a href="">《百度隐私权保护声明》</a>
</p>
<p class="register"> <input class="reg" type="submit" value="注册" width="400px"> <input type="reset"> </p>
<p> <a href="">如需帮助，请点击人工客服</a> </p>
</form> </body> </html>