css3学习系列之选择器（一）

CSS3中的属性选择器

[att*=val]属性选择器：[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式。
[att^=val]属性选择器：选择值以val指定的字符串开头的att属性使用这个样式。
[att$=val]属性选择器：选择值以val指定的字符串结尾的att属性使用这个样式。

属性选择器的例子：利用[att$=avl]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after {
            content: "Web网页";
            color: red;
        }

        a[href$=jpg]:after {
            content: "JPG图像文件";
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="http://www.baidu.com/">HTML5和CSS3</a></li>
    <li><a href="http://www.baidu.com.html">CSS3</a></li>
    <li><a href="photo.jpg">图像素材</a></li>
</ul>
</body>
</html>

css中的伪类选择器及伪元素

1、伪类选择器

伪类选择器是css中已经定义好的选择器，不能随便起名，在css中我们最常用的伪类选择器是使用在a元素上的几种选择器，如下：

a:link{color:#FF0000;text-decoration:none}/*未访问时的状态*/

a:visited{color:#00FF00;text-decoration:none}/*已访问过的状态*/

a:hover{color:#FF00FF;text-decoration:none}/*鼠标移上去的状态*/

a:active{color:#0000FF;text-decoration:none}/*鼠标按下去时的状态*/

2、伪元素选择器

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，使用方法如下：

选择器: 伪元素{属性: 值}

在css中，主要有四个伪元素选择器：

first-line伪元素选择器：用于为某个元素中的第一行文字使用样式。例如：使p元素第一行文字设置为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-line伪元素使用实例</title>
    <style>
       p:first-line{color: #0000FF}
    </style>
</head>
<body>
  <p>段落中的第一行。<br/> 段落中的第二行</p>
</body>
</html>

first-letter伪元素选择器：用于为元素中的文字的首字母（欧美文字）或第一个字（中文或日文）使用样式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-letter伪元素使用实例</title>
    <style>
        p:first-letter {
            color: #0000FF
        }
    </style>
</head>
<body>
<p>this is an english text.</p>
<p>这是一段中文文字。</p>
</body>
</html>

before伪选择器：用于在某个元素之前插入一些内容。
after伪元素选择器：用于在某个元素之后插入一些内容。

3、root选择器

root选择器将样式绑定到页面的根元素中，如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>root选择器</title>
    <style>
        :root {
            background-color: yellow;
        }

        body {
            background-color:limegreen;
        }
    </style>
</head>
<body>
<p>this is an english text.</p>
<p>这是一段中文文字。</p>
</body>
</html>



注意：在使用样式指定root元素与body元素的背景时，根据不同的指定条件，背景色的范围会有所变化，比如上面这个示例，如果采取如下所示样式，不使用root选择器来指定root元素的背景色，值指定body元素的背景色，则整个页面的就全部变成绿色了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>root选择器</title>
    <style>
        body {
            background-color:limegreen;
        }
    </style>
</head>
<body>
<p>this is an english text.</p>
<p>这是一段中文文字。</p>
</body>
</html>

4、not选择器

如果想对某个结果元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>root选择器</title>
    <style>
        body *:not(h1) {
            background-color:limegreen;
        }
    </style>
</head>
<body>
<h1>this is an english text.</h1>
<p>这是一段中文文字。</p>
</body>
</html>

5、empty选择器

使用empty选择器来指定当元素内容伪空白时使用的样式，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>empty选择器</title>
    <style>
        :empty {
            background-color: limegreen;
        }
    </style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td></td>
    </tr>
</table>
</body>
</html>

6、target选择器

使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target选择器</title>
    <style>
        :target {
            background-color: limegreen;
        }
    </style>
</head>
<body>
<p id="menu">
    <a href="#text1">示例文字1</a>|
    <a href="#text2">示例文字2</a>|
    <a href="#text3">示例文字3</a>|
    <a href="#text4">示例文字4</a>|
    <a href="#text5">示例文字5</a>
</p>
<div id="text1">
    <h2>示例文字1</h2>
    <p>...此处略去</p>
</div>
<div id="text2">
    <h2>示例文字2</h2>
    <p>...此处略去</p>
</div>
<div id="text3">
    <h2>示例文字3</h2>
    <p>...此处略去</p>
</div>
<div id="text4">
    <h2>示例文字4</h2>
    <p>...此处略去</p>
</div>
<div id="text5">
    <h2>示例文字5</h2>
    <p>...此处略去</p>
</div>
</body>
</html>