级联样式单与css选择器（下）
1.伪元素选择器
css提供的伪类选择器有如下几个：
- :first-letter:该选择器对应的css样式对指定对象内的第一个字符起作用
- :first-line:该选择器对应的css样式对指定对象内的第一行内容起作用
- :before:该选择器与内容相关的属性结合使用，用于在指定对象的前端插入内容
- :after:该选择器与内容相关的属性结合使用，用于在指定对象的尾端插入内容
1.1 :first-letter伪元素选择器
:first-letter仅对块元素起作用（如:<div><p><section>等），如果想对行内元素（如：<span>等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:first-letter</title>
<style type="text/css">
span{
display:block;
}
.class:first-letter{
color:#f00;
font-size:20pt;
}
#id:first-letter{
color:#00f;
font-size:30pt;
font-weight:bold;
}
p:first-letter{
color:yellow;
font-size:40pt;
font-weight:bold;
}
</style>
</head>
<body>
<span class="class">其实我是一个程序员</span>
<section id="id">其实我是一个程序员</section>
<section id="id">其实我是一个程序员</section>
<p>其实我是一个程序员</p>
</body>
</html>
1.2 :first-line伪元素选择器
:first-line仅对块元素起作用（如:<div><p><section>等），如果想对行内元素（如：<span>等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。用法同:first-letter,不在举例说明。
1.3 :before伪元素选择器
:before和 :after两个伪元素选择器需要与内容相关属性：content属性相结合使用。
content属性：该属性值可以是字符串或者url等，该属性用于向指定元素之前或者之后插入内容
下面代码介绍 :before选择器和 content属性的组合使用，例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:before</title>
<style type="text/css">
/*指定向div元素内部的前端插入content属性对应的内容*/
div>div:before{
content:"crazy:";
color:blue;
font-weight:bold;
background-color:gray;
}
</style>
</head>
<body>
<div>
<div>before before before</div>
<div>before before before</div>
<div>before before before</div>
</div>
</body>
</html>
1.4 :after伪元素选择器
:after选择器与 :before选择器的用法完全相同，只不过是 :after选择器将内容插到指定元素之后。不在举例说明。
2.CSS3新增的伪类选择器
2.1结构性伪类选择器
- Selector:first-child:匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素
- Selector:last-child:匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素
- Selector:nth-child(n):匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素
- Selector:nth-last-child(n):匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素
- Selector:only-child:匹配符合Selector选择器，而且必须是其父元素的唯一子节点的元素
代码举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>child</title>
<style type="text/css">
li:first-child{
border:1px solid black;
}
li:last-child{
background-color:blue;
}
li:nth-child(odd){
color:red;
}
li:nth-last-child(2){
font-weight:bold;
}
span:only-child{
font-size:30pt;
font-family:"隶书"
}
</style>
</head>
<body>
<div>
<ol>
<li>其实我是一个程序员</li>
<li>其实我是一个程序员</li>
<li>其实我是一个程序员</li>
<li>其实我是一个程序员</li>
<li>其实我是一个程序员</li>
</ol>
<ul>
<li id="java">其实我是一个程序员</li>
<li id="javaee">其实我是一个程序员</li>
<li id="ajax">其实我是一个程序员</li>
<li id="xml">其实我是一个程序员</li>
<li id="ejb">其实我是一个程序员</li>
<li><span>其实我是一个程序员</span></li>
</ul>
<span>其实我是一个程序员</span>
</div>
</body>
</html>
- Selector:nth-child(odd/even):匹配符合Selector选择器，而且必须是其父元素的第奇数个或者第偶数个子节点的元素
- Selector:nth-last-child(odd/even):匹配符合Selector选择器，而且必须是其父元素的倒数第奇数个或者第偶数个子节点的元素
- Selector:nth-child(xn+y):匹配符合Selector选择器，而且必须是其父元素的第 xn+y 个子节点的元素
- Selector:nth-last-child(xn+y):匹配符合Selector选择器，而且必须是其父元素的倒数第 xn+y 个子节点的元素
用法同上，不在举例说明。
2.2UI元素状态伪类选择器
- Selector:link：匹配Selector选择器且未被访问前的元素（通常只能是超链接）
- Selector:visited:匹配Selector选择器且已被访问过的元素（通常只能是超链接）
- Selector:active:匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素
- Selector:hover:匹配Selector选择器且处于鼠标悬停状态的元素
- Selector:focus:匹配Selector选择器且已经得到焦点的元素
- Selector:enabled:匹配Selector选择器且当前处于可用状态的元素
- Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素
- Selector:checked:匹配Selector选择器且当前处于选中状态的元素
翻译：link:链接 visited:访问 active:积极地 hover:悬停 enabled:启用 disabled:已禁用的 checked:选中的
代码举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UI元素的伪类选择器</title>
<style type="text/css">
td{
border:1px solid black;
padding:4px;
}
tr:hover{
background-color:#aaa;
}
input:active{
background-color:blue;
}
:focus{
text-decoration:underline;
}
:enabled{
font-family:"黑体";
font-weight:bold;
font-size:14pt;
}
:disabled{
font-family:"隶书";
font-size:14pt;
}
:checked{
outline:red solid 5px;
}
:default{
outline:#bbb solid 5px;
}
</style>
</head>
<body>
<table style="width:400px;border-collapse:collapse;">
<tr>
<td>其实我是一个程序员</td>
<td>109</td>
</tr>
<tr>
<td>其实我是一个程序员</td>
<td>108</td>
</tr>
<tr>
<td>其实我是一个程序员</td>
<td>108</td>
</tr>
</table>
<button disabled>不可用的按钮</button>
<input type="text" disabled value="不可用的文本">
<button>可用的按钮</button>
<input type="text" value="可用的文本">
男:<input type="radio" value="male" name="gender">
女:<input type="radio" value="female" name="gender">
未知:<input type="radio" checked value="unknown" name="gender">
</body>
</html>
2.3 :not伪类选择器
:not伪类选择器就是用两个选择器做减法，Selector1:not(Selector2)：匹配符合 Selector1选择器，但不符合 Selector2的元素，相当于用 Selector1减去 Selector2
代码举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:not</title>
<style>
li:not(#ajax){
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<ul>
<li id="java">其实我是一个程序员</li>
<li id="javaee">其实我是一个程序员</li>
<li id="ajax">其实我是一个程序员</li>
<li id="xml">其实我是一个程序员</li>
<li id="android">其实我是一个程序员</li>
</ul>
</body>
</html>
3.在脚本中修改显示样式
如果需要在脚本中动态控制页面的显示效果，需要使用脚本动态设置CSS样式，步骤如下：
- 获取到需要设置CSS样式的目标元素，可以使用
getElementById()的方法 - 修改目标元素的class样式，常用的方法有如下两种：
> 修改行内CSS属性值：使用obj.style.属性名=属性值的js代码即可
> 修改HTML元素的class属性值：使用obj.className=class的JS脚本即可
例1：随机改变页面背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>随机改变页面背景颜色</title>
<script type="text/javascript">
function changeBg()
{
var bgColor="";
for(var i=0;i<6;i++)
{
bgColor+=""+Math.round(Math.random()*9);
}
document.body.style.backgroundColor="#"+bgColor;
}
document.onclick=changeBg;
</script>
</head>
<body>其实我是一个程序员</body>
</html>
例2：动态增加立体效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>立体效果</title>
<script type="text/javascript">
function chg()
{
document.getElementById("up").className="solid";
}
//document.onclick=changeBg;
</script>
<style>
.solid{
width:160px;
padding:6px;
text-align:center;
border-right:#222 4px solid;
border-top:#ddd 4px solid;
border-left:#ddd 4px solid;
border-bottom:#222 4px solid;
background-color:#ccc;
}
</style>
</head>
<body>
<input type="button" onclick='chg();' value="增加立体效果" />
<div id="up">有立体效果的层</div>
</body>
</html>
扫一扫
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
