伪类选择器以及否定伪类

1.伪类选择器

伪类专门表示元素的一种特殊状态。比如：访问过的超链接，普通的超链接，获取焦点的文本框等等。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

假设百度的链接已访问过。如下为默认的样式（访问过和未访问过的区别）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu111abc.com">未访问过的链接</a></body></html>

结果：
未访问过的颜色偏蓝色。

:link

表示普通的链接（没访问过的链接）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        /*         * 为未访问过的链接设置成绿色并设置大小         */        a:link{            color: greenyellow;        }    </style></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu123abc.com">未访问过的链接</a></body></html>

结果：
将未访问过的链接颜色设置成了绿色

疑问：当用link来为a标签设置其他属性时，访问过的和未访问过的链接结果就没有了区别，为什么呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        a:link{            background-color: greenyellow;        }    </style></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu123abc.com">未访问过的链接</a></body></html>

结果：a标签下都被设置了样式。而没有了访问与未访问的区别。

:visited

表示访问过的链接
注意：浏览器是通过历史纪录来判断一个链接是否被访问过。由于涉及用户的隐私问题，使用visted伪类只能设置字体的颜色。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        /*         * 为访问过的链接设置成红色         */        a:visited{            color: red;        }    </style></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu111abc.com">未访问过的链接</a></body></html>

结果：
将访问过的链接设置成红色。

:hover

表示鼠标移入的状态。
如下当鼠标移入时，颜色会变为红色。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        a:hover{            color: red;        }               p:hover{            background-color: greenyellow;        }          </style></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu111abc.com">未访问过的链接</a>    <p>我是一个段落</p></body></html>

:active

表示的是超链接被点击的状态。

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        a:active{            color: black;        }    </style></head><body>    <a href="http://www.baidu.com">访问过的链接</a>    <br/><br/>    <a href="http://www.baidu111abc.com">未访问过的链接</a>    <p>我是一个段落</p></body></html>

注意：

：hover和：active也可以为其他元素设置。
IE6中，不支持对超链接以外的元素设置：hover和：active。

:focus

获取焦点。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        /* 文本框获取焦点以后，修改背景颜色为黄色*/        input:focus {            background-color: greenyellow;        }    </style></head><body>    <!-- 使用input可以创建一个文本输入框-->    <input type="text"></body></html>

结果：当光标在文本框内时，获取到焦点，颜色为黄色。

::selection

选中的元素
注意：这个伪类在火狐浏览器中需要采用另外一种方式：-moz-selection

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        /* 为在p标签中选中的内容设置样式*/        /* 兼容大部分浏览器*/        p::selection {            background-color: greenyellow;        }               /* 兼容大部分浏览器*/        p::-moz-selection {            background-color: greenyellow;        }            </style></head><body>    <p>我是一个段落</p></body></html>

结果：用鼠标选中p中的'段落'内容，选中的内容改变了样式。

2. 否定伪类

:not(选择器)

作用：可以从已选中的元素中剔除出某些元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        /* 为所有的p元素设置背景颜色为黄色，除了class值为hello */        p:not(.hello){            background-color: yellowgreen;        }    </style></head><body>    <p>我是一个段落</p>    <p>我是一个段落</p>    <p class="hello">我是一个段落</p></body></html>

结果：为除过class值为hello的p元素设置了背景颜色。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。