后代选择器
<style type="text/css">
/*后代选择器 外层+空格+内层 div的所有后代中找p标签，设置字体颜色为红色。使用比较频繁*/
div p{
color:red;
}
/*div下的div内所有的p标签*/
div div p{
color:green;
}
/*指定div下的所有的div内的所有的p*/
.test div p{
color:blue;
}
</style>
子代选择器
<style type="text/css">
/*子代选择器,仅作用于所有子元素，外层div紧跟内层p的所有元素 外层+>+内层*/
div>p{
color: red;
}
/*z指定标签下的子元素*/
.test>p{
color:blue;
}
</style>
交集选择器
<title>交集选择器</title>
<style type="text/css">
/*标签+类或者id*/
/*有多个h1和多个class,当一个标签具有两种特性时除叠加相同样式外，再设置其他样式*/
h1{
color: red;
}
.test{
font-size: 100px;
}
h1.test{
background-color: blue;
}
</style>
并集选择器
<style type="text/css">
/*并集,同时设置，多个选择器逗号隔开*/
a,h4{
color:red;
/*去掉下划线*/
text-decoration: none;
}
/*网页布局一般不用通用选择器 */
*{
}
属性选择器
<style type="text/css">
/* 根据属性查找label里的for属性*/
label[for]{
color: red;}
/*根据属性和值查找*/
/*通常在表单控件中使用*/
label[for='pwd']{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<form>
<label for="user">用户名</label>
<input type="text" name="" id="user">
<label for="pwd">密码</label>
<input type="password" name="" id="pwd">
</form>
伪类选择器
<title>伪类选择器</title>
<style type="text/css">
/*一般用在a标签上*/
/*link 没有被访问*/
.t1 a:link{}
/*访问过后*/
.t2 a:visited{}
/*悬停*/
.t3 a:hover{}
/*点击时*/
a:active {}
/*输入时的样式*/
input:focus {
outline: none;
background-color: #eee;
}
/*选中第一个li*/
div ul li:first-child{}
/*最后一个*/
div ul li:last-child{}
/*从1开始，选第几个*/
div ul li:nth-child(3){}
/*从0开始，n选所有*/
div ul li:nth-child(n){}
/*选偶数*/
div ul li:nth-child(2n){}
/*奇数*/
div ul li:nth-child(2n-1){}
/*间隔3*/
div ul li:nth-child(4n+1){
color:red;
}
</style>
</head>
<body>
<div class="box">
<ul type="circle">
<li class="t1">
1
<a href="#">张三</a>
</li>
<li class="t2">
<a href="#">李四</a>
</li>
<li class="t3">
<a href="#">王五</a>
</li>
<li>
<a href="#">老王</a>
</li>
<li>
5
<input type="text">
</li>
</ul>
伪元素选择器
<title>伪元素选择器</title>
<style type="text/css">
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容content 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'xiaoming';
}
/*在....之后添加content， 使用非常频繁 结合content,通常与布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}