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;
}
顯示效果
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
