css基础教程之选择器(育知同创Web前端培训资源分享)

2.伪类选择器E:first-line/E::first-line设置对象内的第一行的样式 、E:first-letter/E::first-letter设置对象内的第一个字符的样式 。

css基础教程之选择器(育知同创Web前端培训资源分享)(1)

比如有一段文本,没有给该文本加宽度,他会随着浏览器的的变化而变化,那我们怎么保证第一行文本永远跟别的文本的状态不一致呢!

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3新增选择器</title>

<style>

p:first-line{

line-height:28px;

color: red;

}

css基础教程之选择器(育知同创Web前端培训资源分享)(2)

如果设置第一个字有特殊的状态,也有很方便的选择器那就是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>

显示效果:

css基础教程之选择器(育知同创Web前端培训资源分享)(3)

3.属性选择器

css基础教程之选择器(育知同创Web前端培训资源分享)(4)

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>

显示效果:

css基础教程之选择器(育知同创Web前端培训资源分享)(5)

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>

显示效果:

css基础教程之选择器(育知同创Web前端培训资源分享)(6)

4.UI伪类选择器 :checked

css基础教程之选择器(育知同创Web前端培训资源分享)(7)

案例一:

<!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>

显示效果:

css基础教程之选择器(育知同创Web前端培训资源分享)(8)

案例二:

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;

}

显示效果

css基础教程之选择器(育知同创Web前端培训资源分享)(9)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页