css基礎教程之選擇器（育知同創Web前端培訓資源分享）

2023-04-15 21:01:47 1

2.偽類選擇器E:first-line/E::first-line設置對象內的第一行的樣式、E:first-letter/E::first-letter設置對象內的第一個字符的樣式。

比如有一段文本，沒有給該文本加寬度，他會隨著瀏覽器的的變化而變化，那我們怎麼保證第一行文本永遠跟別的文本的狀態不一致呢！

代碼：

CSS3新增選擇器
p:first-line{
line-height:28px;
color: red;
}
如果設置第一個字有特殊的狀態，也有很方便的選擇器那就是first-letter.
代碼：
CSS3新增選擇器
p:first-line{
line-height:28px;
color: red;
}
p:first-letter{
color: yellow;
background:#ADFF2F;
font-size:30px;
}
七星瓢蟲是鞘翅目瓢蟲科的捕食性昆蟲，它的身體像半個圓球，頭黑黑的翅膀是橘色的。觸角很短，不太明顯，他的腳在大大的翅膀底下，他的口器既有咀嚼食物的能力，因為它的翅膀有七個黑色的圓點點所以人們叫它七星瓢蟲，七星瓢蟲為益蟲，成蟲可捕食麥蚜、棉蚜、槐蚜、桃蚜、介殼蟲、壁蝨等害蟲，可大大減輕樹木、瓜果及各種農作物遭受害蟲的損害，被人們稱為「活農藥」，在我國各地廣泛分布。在華北南部，俗稱「花大姐」。其他的星瓢蟲一生要經過卵、幼蟲、蛹和成蟲4個不同發育階段。人工飼養七星瓢蟲的成蟲，室內的溫度要控制在20－25℃之間，相對溼度在70%－80%，成蟲產卵時要求溫度較高，可在25℃飼養。但飼養幼蟲以平均溫度20℃左右為好。
顯示效果：
3.屬性選擇器
E[att]代碼：
CSS3新增選擇器
input{
margin:10px;
}
input[class]{
border:1pxsolid#000;
width:300px;
height:25px;
color:#f00;
outline:none;
}
顯示效果：
E[att="val"]代碼：
CSS3新增選擇器
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;
}
顯示效果：
4.UI偽類選擇器：checked
案例一：
新增選擇器
*{
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;
}
蘋果
顯示效果：
案例二：
HTML代碼：
下拉菜單
Friends
Find New Friends
Poke A Friend
Incinerate Existing Friends
Videos
My Videos
My Downloaded Videos
My Well Dodgy Videos
Galleries
My Deviant Art
Latest Dribbble Images
Sample Flickr Stream
Sample Picasa Stream
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;
}
顯示效果
,