一.伪元素选择器
1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式。
例如:
p::first-letter{font-size:50px;}
2. E:first-line/E::first-line 设置元素内的第一行的样式。
例如:
p::first-line{color:green;}
3. E:before/E::before在每个E元素的内容之前插入内容。用来和content属性一起使用。
例如:
a::before{
content:"点击";
color:green;
}
4. E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用。
例如:
a::after{
content:"诗句";
color:red;
}
a::after{
content:url(images/4.jpg);
color:red;
}
CSS3新增:
5. E::selection 设置对象被选择时的颜色。
例如:
p::selection{background:red;}
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
<p>
锦瑟———李商隐<br><br>
锦瑟无端五十弦,一弦一柱思华年。<br><br>
庄生晓梦迷蝴蝶,望帝春心托杜鹃。<br><br>
沧海月明珠有泪,蓝田日暖玉生烟。<br><br>
此情可待成追忆?只是当时已惘然。<br><br>
</p>
<a href="">搜索</a><br>
</body>
</html>
style2.css:
p::first-letter{font-size:50px;}
p::first-line{color:green;}
a::before{
content:"点击";
color:green;
}
a::after{
content:url(images/4.jpg);
color:red;
}
p::selection{background:red;}
二. 伪类选择器
1. 结构伪类选择器
1)E:first-child 父元素的第一个子元素E。
例如:
li:first-child{background:red;}
ul>li:first-child{color:red;}
td:first-child{color:red;}
CSS3新增:
2):root 选择文档的根元素。
例如:
:root{background:red;}
3)E:last-child 最后一个子元素E。
例如:
td:last-child{color:red;}//td的父元素中最后一个元素
4)E:only-child 仅有的一个子元素E。
例如:
li:only-child{color:red;}//li的父元素中只有一个li
5)E:only-of-type 只有一种类型的子元素。
例如:
p:only-of-type{color:green;}//p的父元素中只有一种类型的子元素
6)E:nth-child(n) 匹配父元素的第n个子元素E。
可以直接用数值:比如2
可以用奇数(odd)偶数(even)
可以用公式3n
例如:
tr:nth-child(2){color:red;}
7)E-nth-last-child(n) 匹配父元素的倒数第n个元素E。
例如:
tr:nth-last-child(2){color:red;}
tr:nth-last-child(odd){color:red;}
tr:nth-last-child(even){color:red;}
tr:nth-last-child(3n-1){color:red;}
8)E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
例如:
p:first-of-type{color:red;}//p元素同一级别中的第一个,在同一个父元素下几个p中的第一个
9)E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
例如:
p:last-of-type{color:green;}
10)E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
例如:
p:nth-of-type(2){color:green;}
11)E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
例如:
p:nth-last-of-type(2){color:red;}
12)E:empty 匹配没有任何子元素(包括text节点)的元素E。
例如:
div:empty{border: 1px solid; width:300px;height:200px; }//div中不能有任何内容
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
<ul>
<li>我是ul的子元素1</li>
<li>我是ul的子元素2
<ol>
<li>我是ul的孙元素1</li>
<li>我是ul的孙元素2</li>
<li>我是ul的孙元素3</li>
<li>我是ul的孙元素4</li>
<li>我是ul的孙元素5</li>
</ol>
</li>
<li>我是ul的子元素3
<ul>我只有一个子元素
<li>我是li元素的内容</li>
</ul>
</li>
<li>我是ul的子元素4</li>
</ul><hr>
<div>
<h2>我是标题1</h2>
<p>我是段落p1</p>
<p>我是段落p2</p>
<p>我是段落p3</p>
<p>我是段落p4</p>
<h3>我是标题2</h3>
<p>我是段落p5</p>
<p>我是段落p6</p>
<p>我是段落p7</p>
<p>我是段落p8</p>
</div>
<div id="div3"></div>
<div>
<p>
锦瑟———李商隐<br><br>
锦瑟无端五十弦,一弦一柱思华年。<br><br>
庄生晓梦迷蝴蝶,望帝春心托杜鹃。<br><br>
沧海月明珠有泪,蓝田日暖玉生烟。<br><br>
此情可待成追忆?只是当时已惘然。<br><br>
</p>
<a href="">搜索</a><br>
</div>
<table style="width:400px;height:80px;padding:15px">
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
<a href="#">搜索</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
style2.css:
/*:root{background:red;}*/
/*li:first-child{background:red;}*/
/*ul>li:first-child{color:red;}*/
/*p:first-child{color:red;}*/
/*td:last-child{color:red;}*/
/*li:only-child{color:red;}*/
/*p:only-of-type{color:green;}*/
/*tr:nth-child(2){color:red;}*/
/*tr:nth-last-child(3n-1){color:red;}*/
/*p:first-of-type{color:red;}*/
/*p:last-of-type{color:green;}*/
/*p:nth-of-type(2){color:green;}*/
/*p:nth-last-of-type(2){color:red;}*/
div:empty{border: 1px solid; width:300px;height:200px; }
2.UI伪类选择器及其他选择器
E:active 向被激活的元素添加样式。
例如:
a:active{background:green;} //当鼠标点击时就处于激活状态
E:hover 当鼠标悬浮在元素上方时,向元素添加样式。
例如:
a:hover{color:red;}
E:link 向未被访问的链接添加样式。
例如:
a:link{color:lightseagreen;}
E:visited 向已被访问的链接添加样式。
例如:
a:visited{color:yellow;}
E:focus 向拥有键盘输入焦点的元素添加样式。
例如:
input:focus{background:yellow;}
E:lang 向带有指定lang属性的元素添加样式
例如:
p:lang(en){color:red;}
CSS3新增:
input:checked 选择每个被选中的input元素。
例如:
input:checked{width:50px; height: 60px;}//被选中的时候添加样式
input:disabled 选择每个禁用的input元素。
例如:
input:disabled{background:gray;}//要将表单改成禁用的
input:enabled 选择每个启用的input元素。
例如:
input:enabled{background:green;}
#E:target 选择当前活动的锚点元素。
例如:
<style type="text/css">
a:target{color:green;}
</style>
:not(E) 选择E元素之外的每个元素。
例如:
:not(input){color:yellow;}
text2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style2.css" type="text/css">
<style type="text/css">
a:target{color:green;}
</style>
</head>
<body>
<a href="http://www.t" target="_blank">51自学网</a>
<fieldset>
<legend>注册用户</legend>
<p lang="en">
<input type="text" name="user" id="user" placeholder="账号" required="">
<label for="user">账号</label>
</p>
<p>
<input type="password" name="password" id="password" placeholder="密码">
<label for="password">密码</label>
</p>
<p>
<label for="tel">电话号码</label>
<input type="tel" disabled="" name="tel" id="tel" placeholder="电话">
</p>
<p>
<label for="email">电子邮件</label>
<input type="email" name="email" id="email" placeholder="电子邮箱">
</p>
<p>
<input type="radio" name="fwtk" value=""><span>同意服务条款:</span><br>
<input type="radio" name="fwtk" value=""><span>不同意服务条款:</span><br>
<a href="">阅读服务条款</a>
</p>
<button type="submit" value="注册" title="加入会员">注册用户</button>
</fieldset>
<a href="#">百度</a>
</body>
</html>
style2.css:
/*a:active{background:green;}*/
/*a:hover{color:red;}*/
/*a:visited{color:yellow;}*/
/*a:link{color:lightseagreen;}*/
/*p:lang(en){color:red;}*/
/*input:checked{width:50px; height: 60px;}*/
/*input:enabled{background:green;}*/
/*input:focus{background:yellow;}*/
/*input:disabled{background:gray;}*/
:not(input){color:yellow;}
other notes:
placeholder属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
placeholder属性适用于以下的<input>类型:text,search,url,telephone,email以及password。