CSS中伪元素、伪类选择器

伪元素选择器

伪元素选择器只能针对CSS中已有的伪元素起作用。
CSS提供的伪元素选择器有如下几个：

:first-letter:对指定对象的第一个字符起作用。
:first-line:对指定对象的第一行内容起作用。
:before:与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
:after:与内容相关的属性结合使用，用于在指定对象内部的尾端增加内容。

下面代码示范用法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:first-letter</title><style type="text/css">span{display:block;}span:first-letter{color:yellow;font-size:20pt}span:first-line{color:#0f0;font-size:25pt}#clern:first-line{color:#f00;font-size:15pt;}section:first-letter{color:#00f;font-size:30pt;font-weight:blod;}/*指定向div元素内部的前端插入content属性对应的内容*/div>p:before{content:'努力奋斗';color:blue;font-size:30pt;background-color:gray;}</style>
</head>
<body><span>ABC<br>ZXC</span><section id="clern">其实我是一个程序员，<br>你是一个设计师，</section><br/><span id="clern">然而我们都是打工的，<br>老板还是一个。</span><div><p>才能活得精彩，</p><p>才能创造价值。</p></div>
</body>
</html>

所示效果如下：

其中关于div中的before和after处理运用到了内容相关的属性：content，content该属性的值可以是字符串，用于向指定元素之前或之后插入内容。此外，content还可使用url(url)格式的值，这种格式的值可用于插入图像。如：

<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>插入图片</title><style type="text/css">/*指定向div元素内部的尾端插入content属性对应的内容*/div>div:after{content:url("pic.jpg");}</style>
</head>

伪类选择器

伪类选择器主要用于对已有选择器做进一步的限制，对已有选择器能匹配的元素进一步的过滤。伪类选择器主要分为如下三类：

结构性伪类选择器
UI元素状态伪类选择器
其他伪类选择器

1.结构性伪类选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器主要有以下几个：

Selector:root：匹配文档的根元素。在HTML中根元素永远是<html…/>元素。
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 http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:first-letter</title><style type="text/css">li:first-child{border:1px soild black;}li:last-child{background-color:#aaa;}li:nth-child(2){color:#888;}li:nth-last-child(2){font-size:20pt;}span:only-child{color:#fff;font-size:25pt;}</style>
</head>
<body><ol><li>一名数学家</li><li>一名化学家</li><li>一名科学家</li><li>一名物理学家</li><li>一名哲学家</li></ol><ul><li id="a">他是一名数学家</li><li id="s">他是一名化学家</li><li id="d">他是一名科学家</li><li id="z">他是一名物理学家</li><li id="x">他是一名哲学家</li><li><span id="c">他是一名哲学家</span></li></ul>
</body>
</html>

效果如下：

此外，对于:nth-child和:nth-last-child两个伪类选择器，它们的功能还支持如下用法。

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.UI元素状态伪类选择器
UI元素状态选择器主要用于根据UI元素的状态进行筛选。UI元素状态选择器主要有如下几个：

Selector:link：匹配 Selector选择器且未被访问前的元素（通常只能是超链接）。
Selector:visited：匹配 Selector选择器且已被访问过的元素（通常只能是超链接）。
Selector:active：匹配 Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素。
Selector:hover：匹配 Selector选择器且处于鼠标悬停状态的元素。
Selector:focus：匹配 Selector选择器且已得到焦点的元素。
Selector:enabled：匹配 Selector选择器且当前处于可用状态的元素。
Selector:diabled：匹配 Selector选择器且当前处于不可用状态的元素。
Selector:read-only：匹配 Selector选择器且处于只读状态的元素。
Selector:read-write：匹配 Selector选择器且处于读写状态的元素。
Selector:required：匹配 Selector选择器且具有必填要求的元素。
Selector:optional：匹配 Selector选择器且无必填要求的元素。

下面代码示范用法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; 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;}:diabled{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>疯狂Java讲义</td><td>109</td></tr><tr><td>轻量级Java实战</td><td>108</td></tr><tr contentEditable="true"><td>疯狂C++讲义</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>

效果如下：

3.其他伪类选择器
: target伪类选择器
Selector:target：匹配符合Seletor选择器且必须是命名锚点目标的元素。
:not伪类选择器
Selector1:not(Selector2)：匹配符合Seletor1选择器，但不符合Selector2选择器的元素，相当于用Selector1减去Selector2。
下面代码示范用法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:not</title><style type="text/css">li:not(#z){color:#999;font-weight:bold;}</style>
</head>
<body>    <ul><li id="a">他是一名数学家</li><li id="s">他是一名化学家</li><li id="d">他是一名科学家</li><li id="z">他是一名物理学家</li><li id="x">他是一名哲学家</li><li id="c">他是一名哲学家</li></ul>
</body>
</html>

效果如下：

从运行结果来看，浏览器为除了id为z的所有<li…/>元素都设置了字体颜色、粗体字效果。

在脚本中修改显示样式

如果需要在脚本中动态控制页面的显示效果，使用脚本动态设置CSS样式也非常简单，按如下步骤可动态修改目标元素的CSS样式。

获取到需要设置CSS样式的目标元素，如可用getElementById()的方法。
修改目标元素的CSS样式。常用的方式有两种。
(1)修改行内CSS属性值：使用如“obj.style.属性名=属性值”的JavaScript代码即可。
(2)修改HTML元素的class属性值：使用如“obj.className=class选择器”的JavaScript代码即可。

随机改变页面的背景色
随机改变页面的背景色，只要生产一个随机的6位数，并将该值赋给body元素中的backgroundColor CSS属性即可。
下面代码示范用法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>随机改变页面背景色</title><script type="text/javascript">function changeBg(){//将背景色的值定义成空字符串var bgColor="";//循环6次，生产一个随机的6位数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>

运行效果是单击页面会随机改变页面的背景色。

动态增加立体效果

立体效果原来是通过为其增加4个边框实现的，其中左、上边框颜色稍浅，下、右颜色稍深。
下面代码示范用法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>随机改变页面背景色</title><script type="text/javascript">function chg(){document.getElementById("up").className="solid";}</script><style type="text/css">.solid{width:160px;padding:6pxtext-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>

效果如下：

单击页面上的“增加立体效果”按钮，页面会出现如图所示的效果。

字体与文本相关属性

字体相关属性

CSS为控制文本的字体提供了大量属性，主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下：

font：这是个复合属性，通常不建议使用该属性。
color：该属性用于控制字体颜色。
font-family：设置文字的字体。
font-size：设置文字的大小。
font-stretch：用于改变文字横向的拉伸。
font-style：设置文字的风格，是否采用斜体等。
font-weight：设置文字是否加粗，该属性的值表示加粗的程度。
text-decoration：用于控制文字是否有修饰线。
font-variant：用于设置文字的大写字母的格式。
text-transform：用于设置文字的大小写。
line-height：该属性用于设置字体的行高。
letter-spacing：用于设置字符之间的间隔。
word-spacing：用于设置单词之间的间隔。
text-shadow：用于设置文字是否有阴影效果，可添加多个阴影。

代码示范如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>字体相关属性</title>
</head>
<body>color:#888888:<span style="color:#888888">测试文字</span><br />color:red:<span style="color:red">测试文字</span><br /><span style="font-family:'隶书'">测试文字</span><br /><span style="font-size:20pt">测试文字</span><br /><span style="font-size:xx-large">测试文字</span><br /><span style="font-stretch:narrower">测试文字</span><br /><span style="font-stretch:wider">测试文字</span><br /><span style="font-style:italic">测试文字</span><br /><span style="text-decoration:blink">测试文字</span><br /><span style="text-decoration:underline">测试文字</span><br /><span style="text-decoration:line-through">测试文字</span><br /><span style="font-variant:small-caps">hello</span><br /><span style="text-transform:uppercase">hello</span><br /><span style="text-transform:capitalize">hello</span><br /><span style="line-height:30pt">测试文字</span><br /><span style="letter-spacing:15pt">hello world</span><br /><span style="letter-spacing:5pt">hello world</span><br /><span style="word-spacing:20pt">hello world</span><br /><span style="word-spacing:60pt">hello world</span><br />
</body>
</html>

效果如下：

CSS3支持的颜色表示方法

CSS3中常用的几种颜色表示方法如下：

用颜色名表示，如white（白色）、red（红色）等。这种方式简单易用，但能表示的颜色数量有限。
用十六进制的颜色值表示，这就是典型的三原色混合原理，例如#123456，其中前两位表示红光的值，中间两位表示绿光的值，后两位表示蓝光的值。
用rgb(r,g,b)函数表示，也是运用三原色混合原理。顺序也是红绿蓝的值。
用rgba(r,g,b,a)函数表示，还是运用三原色混合原理。只是多了一个a参数，用于指定该颜色的透明度，a参数可以是0~1之间的任意数。

文本相关属性

文本相关属性用于控制整个段、整个<div…/>元素内文本的显示效果。相关属性如下：

text-indent：用于设置段落文本的缩进，默认值为0。被另一个元素断开的元素不能应用本属性。
text-overflow：用于控制溢出文本的处理方法。该属性支持两个属性值，clip和ellipsis。
vertical-align：用于设置目标元素里内容的垂直对齐方式。
text-align：用于设置目标元素中文本的水平对齐方式。
direction：用于设置文本流入的方向，合法值有ltr（从左向右）和rtl（从右向左）。
white-space：用于设置目标元素对文本内容中空白的处理方式。
word-break：用于设置目标元素中文本内容的换行方式。
word-wrap：用于设置目标元素中文本内容的换行方式。

其中text-overflow属性的代码示例如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>文本相关属性</title><style>div{border:1px solid #000000;height:30px;width:200px;}</style>
</head>
<body><div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div><div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html

效果如下：

主要介绍CSS中字体和文本相关属性，通过这些属性可以控制字体颜色、字体大小、字体样式、字体阴影、文本对齐方式、文本缩进、文本溢出显示方式等。