css基础教程之选择器（育知同创Web前端培训资源分享）
2.伪类选择器E:first-line/E::first-line设置对象内的第一行的样式 、E:first-letter/E::first-letter设置对象内的第一个字符的样式 。
比如有一段文本，没有给该文本加宽度，他会随着浏览器的的变化而变化，那我们怎么保证第一行文本永远跟别的文本的状态不一致呢！
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增选择器</title>
<style>
p:first-line{
line-height:28px;
color: red;
}
如果设置第一个字有特殊的状态，也有很方便的选择器那就是first-letter.
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增选择器</title>
<style>
p:first-line{
line-height:28px;
color: red;
}
p:first-letter{
color: yellow;
background:#ADFF2F;
font-size:30px;
}
</style>
</head>
<body>
<p>
七星瓢虫是鞘翅目瓢虫科的捕食性昆虫，它的身体像半个圆球，头黑黑的翅膀是橘色的。触角很短，不太明显，他的脚在大大的翅膀底下，他的口器既有咀嚼食物的能力，因为它的翅膀有七个黑色的圆点点所以人们叫它七星瓢虫 ，七星瓢虫为益虫，成虫可捕食麦蚜、棉蚜、槐蚜、桃蚜、介壳虫、壁虱等害虫，可大大减轻树木、瓜果及各种农作物遭受害虫的损害，被人们称为“活农药”，在我国各地广泛分布。在华北南部，俗称“花大姐”。其他的星瓢虫一生要经过卵、幼虫、蛹和成虫4个不同发育阶段。人工饲养七星瓢虫的成虫，室内的温度要控制在20－25℃之间，相对湿度在70%－80%，成虫产卵时要求温度较高，可在25℃饲养。但饲养幼虫以平均温度20℃左右为好。</p>
</body>
</html>
显示效果：
3.属性选择器
E[att]代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增选择器</title>
<style>
input{
margin:10px;
}
input[class]{
border:1pxsolid#000;
width:300px;
height:25px;
color:#f00;
outline:none;
}
</style>
</head>
<body>
<input type="text" class="text"/><br>
<input type="email" /><br>
<input type="tel" class="tel"/>
</body>
</html>
显示效果：
E[att="val"]代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增选择器</title>
<style>
input{
margin:10px;
width:300px;
height:25px;
outline:none;
}
input[type=text]{
border:1pxsolid#000;
color:#f00;
}
input[type=email]{
border:1pxsolid#0000FF;
color:#ADFF2F;
}
input[type=tel]{
border:1pxsolid#00FFFF;
color: deeppink;
}
</style>
</head>
<body>
<input type="text"/><br>
<input type="email" /><br>
<input type="tel"/>
</body>
</html>
显示效果：
4.UI伪类选择器 ：checked
案例一：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新增选择器</title>
<style>
*{
margin:0;
padding:0;
}
.checkbox{
width:89px;
height:55px;
margin:50pxauto;
}
.btn{
display:none;
}
.btn[type=checkbox] label{
display:block;
width:89px;
height:55px;
font-size:0;
background-image: url(a.jpg);
background-repeat:no-repeat;
}
.btn[type=checkbox]:checked label{
background-image: url(b.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="apple" class="btn">
<label for="apple">苹果</label>
</div>
</body>
</html>
显示效果：
案例二：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<ul>
<li>
<input type="checkbox" name="item" id="item1" />
<label for="item1">Friends</label>
<div class="options">
<p><a href="#">Find New Friends</a></p>
<p><a href="#">Poke A Friend</a></p>
<p><a href="#">Incinerate Existing Friends</a></p>
</div>
</li>
<li>
<input type="checkbox" name="item" id="item2" />
<label for="item2"> Videos</label>
<div class="options">
<p><a href="#">My Videos</a></p>
<p><a href="#">My Downloaded Videos</a></p>
<p><a href="#">My Well Dodgy Videos</a></p>
</div>
</li>
<li>
<input type="checkbox" name="item" id="item3" />
<label for="item3">Galleries</label>
<div class="options">
<p><a href="#">My Deviant Art</a></p>
<p><a href="#">Latest Dribbble Images</a></p>
<p><a href="#">Sample Flickr Stream</a></p>
<p><a href="#">Sample Picasa Stream</a></p>
</div>
</li>
</ul>
</body>
</html>
CSS代码：
*{
margin:0;
padding:0;
box-sizing:border-box;
}
a{text-decoration:none;}
body{
font-family:arial,sans-serif;
font-weight:normal;
font-size:12px;
background:#3f4348;
}
ul{
list-style:none;
width:300px;
margin:0auto;
}
ullilabel{
background:#575e63;
border-top:1pxsolid#878e98;
border-bottom:1pxsolid#33373d;
color:#fff;
display:block;
height:40px;
line-height:40px;
text-indent:20px;
width:300px;
}
uldivp{
height:30px;
line-height:30px;
text-indent:20px;
}
ulpa{
color:#999;
}
ulliinput[type='checkbox'] {
display:none;
}
.options{
display:none;
}
ulliinput[type='checkbox']:checked label .options{
display:block;
}
显示效果
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
