分类：
基本选择器
- 标签选择器：可以选中所有同名标签元素，不管标签在哪儿，只要在该页面中，均能被选择到。所以一般用于共性设置，不是特性设置。
View Codep{ color: red; font-size: 20px; }网页字体大小一般为12px或者16px
- id选择器#对应id
View Code
#second_span{ color:blue; }标签id在同一个页面中唯一，任何标签都可以设置id，命名规范：以字母开头，可以有数字、下划线、中横线，严格区分大小写。css中尽量不用id设置样式
- 类选择器
View Code
/*类选择器*/ .title{ color:yellowgreen; font-size: 16px; }任何标签都可以加类属性，类可以重复。同一个标签可以同时属于多个类，不通类名中间用空格隔开。属性冲突最后一个生效。一定要有公共类的概念，每个类要尽量的小，供多个标签使用。
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <style type="text/css"> .color{ color:green; } .underline{ text-decoration: underline; } .size{ font-size: 40px; } </style> </head> <body> <div> <p class="size color">段落1</p> <p class="lv2 color underline">段落2</p> <p class="size underline">段落2</p> </div> </body> </html>
高级选择器
后代选择器
根据标签嵌套关系进行选择
<style type="text/css"> <!--后代标签--> div p{ color:yellow; } div div p{ color:gray; } .container div{ color:red; } </style>
子代选择器
用大于符号选择，仅选择下一代标签，不会选择后代所有标签
/*--子代标签--*/ .container >p{ color:yellowgreen; }
交集选择器
作用于两个样式交集的对象上
h3{ width:200px; color:red; } .active{ font-size:30px; } /*交集选择器*/ h3.active{ background-color:yellow; }
并集选择器
同一个样式作用于多个标签上，用逗号分隔。
/*通过并集选择器同时设置多个标签样式*/ a,h6{ font-size: 20px; color:#666; text-decoration:none; }
属性选择器
属性选择器通常使用在表单控件中，使用比较频繁
/*查找具有for属性的label标签*/ label[for]{ color:red; font-size:30px; } label[for="pwd"]{ color:green; } /*查找所有tetle属性等于hello的标签*/ [title="hello"]{ color:green; } /*所有title属性以hello开头的元素*/ [title^="hello"] { color:green; } /*所有title属性以hello结尾的元素*/ [title$="hello"]{ color:green; } /*所有title属性包含(字符串)title的元素*/ [title*="title"]{ color:green; } /*所有title属性中（多个值或以空格分开）包含title的元素*/ [title~="title"]{ color:green; }
~开头$结尾，*字符串包含~多值包含
伪类选择器之a标签
<style type="text/css"> /*后代选择器:.box ul*/ /*交际选择器:li.item1*/ /*没有被访问的标签样式*/ .box ul li.item1 a:link{ color:green; } /*被访问后的a标签的样式*/ .box ul li.item2 a:visited{ color:yellow; } /*鼠标悬浮于a链接上的样式*/ .box ul li.item3 a:hover{ color:red; } /*点击时a标签的样式*/ .box ul li.item4 a:active{ color:red; } </style>
<body> <div class="box"> <ul> <li class="item1"><a href="#">没有被访问的标签样式</a></li> <li class="item2"><a href="#">被访问后的a标签的样式</a></li> <li class="item3"><a href="#">鼠标悬浮于a链接上的样式</a></li> <li class="item4"><a href="#">点击时a标签的样式</a></li> </ul> </div> </body>
伪类选择器二
<style type="text/css"> /*选中第一个元素*/ div ul li:first-child{ font-size:25px; color:red; } /*选中第3个元素，从1开始*/ div ul li:nth-child(3){ font-size:25px; color:green; } /*选中最后一个元素*/ div ul li:last-child{ font-size:25px; color:red; } /*n表示选中所有的，从0开始，0表示没有被选中*/ div ul li:nth-child(n){ font-size:25px; color:red; } /*选中所有偶数标签*/ div ul li:nth-child(2n){ font-size:25px; color:red; } /*选中所有基数标签*/ div ul li:nth-child(2n-1){ font-size:25px; color:red; } /*相隔多个后选中，如相隔3个选中*/ /*隔m换一，则(m+1)n+1*/ div ul li:nth-child(4n+1){ font-size:25px; color:red; } </style>
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> p.p1:first-letter{ font-size:48px; } p.p2:before{ content:"----"; color:red; } p.p3:after{ content:"#####"; color:green; } </style> </head> <body> <div class="box"> <p class="p1">文本首字母设置特殊样式</p> <p class="p2">用于在元素的前面插入新内容</p> <p class="p3">在元素内容后面插入新的内容</p> </div> </body> </html>
后期用于清除浮动