一、CSS伪类选择器
-
伪类专门用来表示元素的一种的特殊的状态。
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
-
:link：为未访问过的链接设置样式 -
:visited：访问过的链接- 浏览器是通过历史记录来判断一个链接是否访问过
-
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
-
:hover：表示鼠标移入的状态 -
:active：超链接被点击的状态:hover和:active也可以为除了超链接以外的其他元素设置样式
*以上4个伪类优先级是一样的，但写时有顺序
:link和:visited写在:hover和:active的前面:hover写在:active的前面
-
input:focus：文本框获取焦点以后，修改背景颜色 -
p::selection：对p标签中选中内容使用样式
-
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a:link { color: yellowgreen } a:visited { color: red } a:hover { color: blue } a:active { color: black } input:focus { background-color: deepskyblue; } p::selection { background-color: paleturquoise; } </style> </head> <body> <a href="http://www.baidu.com">访问过的链接</a> <br> <a href="http://www.baidu123.com">未访问过的链接</a> <input type='text'> <p>我是一个段落</p> </body> </html>
二、伪元素
- 使用伪元素来表示元素中的一些特殊的位置
-
:first-letter：为p中第一个字符来设置样式<style> p:first-letter{ font-size: 50px; color:red; } </style>
-
:first-line：为p中第一行设置样式<style> p:first-line{ background-color:yellow; } </style>
-
:before：表示元素最前边的部分。:after：表示元素最前边的部分。一般before和after都需要结合content样式一起使用，通过content可以向before或after的位置添加一些内容
<style> p:before{ content: "在最前面。"; color: cyan; } p:after{ content:"最后面"; color:orange; } </style>
三、属性选择器
-
（补充）
title属性：- 可以给任何标签指定
- 当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-
[属性名]：选取含有指定属性的元素
[属性名="属性值"]：选取含有指定属性值的元素
[属性名^="属性值"]：选取属性值以指定内容开头的元素
[属性名$=”属性值”]：选取属性值以指定内容结尾的元素[属性名*=“属性值”]：选取属性值以包含指定内容的元素素
-
例子：
<style> p[title="我是个title"]{ color:red; } p[title^="ab"]{ color: greenyellow; } p[title$="ab"]{ color: blueviolet; } p[title*='a']{ background-color: yellow; } </style><body> <p title="我是个title">我是一个段落</p> <p title="abcd">我是另一个段落</p> <p title="ccab">我是另一个段落</p> </body>
四、子元素的伪类
-
:first-child：选中第一个子元素 -
:last-child：选中最后一个子元素 -
:nth-child(参数)：可以选中任意位置的子元素- 该选择器后边可以指定一个参数，指定要选中第几个子元素
even表示偶数位置的子元素，odd表示奇数位置的子元素
-
:first-of-type
:last-of-type
:nth-of-type- 和
:first-child这些非常的类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列
- 和
-
例子：（child系列）
- 若第一个和最后一个子元素都是p标签的则选中
<style> p:first-child{ background-color: yellow; } p:last-child{ background-color: antiquewhite; } </style><body> <p>我是一个p标签1</p> <p>我是一个p标签2</p> <p>我是一个p标签3</p> </body>
-
当最后一个子元素不是p时，不选中
<body> <p>我是一个p标签1</p> <p>我是一个p标签2</p> <p>我是一个p标签3</p> <span>我是span</span> </body>
-
第一个p标签是body中的第一个子元素
div中的p标签是div中的第一个子元素
<style> p:first-child{ background-color: yellow; } </style><body> <p>我是一个p标签1</p> <p>我是一个p标签2</p> <p>我是一个p标签3</p> <div> <p>我是div中的p标签</p> </div> </body>
-
例子（type系列）
-
type只看元素在当前标签中的排列位置
<style> p:first-of-type{ background-color: yellow; } p:last-of-type{ background-color: lavender; } </style><body> <p>我是一个p标签1</p> <p>我是一个p标签2</p> <p>我是一个p标签3</p> <span>我是span</span> <div> <p>我是div中的p标签</p> </div> </body>
-
五、兄弟元素选择器
-
后一个+前一个：后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素<style> /*为span后的一个p元素设置一个背景颜色为黄色*/ span+p { background-color: yellow; } </style><body> <p>我是一个p标签1</p> <p>我是一个p标签2</p> <span>我是span</span> <p>我是一个p标签3</p> <p>我是一个p标签4</p> </body>
-
前一个~后边所有：选中后边的所有兄弟元素<style> span~p{ background-color: blue; } </style>
六、否定伪类
-
:not(选择器)；
作用：可以从已选中的元素中剔除出某些元素语法。<style> /*为所有的p元素设置一个背景颜色为黄色，除了c1ass值为hel1o的否定伪类*/ p:not(.hello){ background-color: yellow; } </style><body> <p>我是一个p标签1</p> <p class="hello">我是一个p标签2</p> <p>我是一个p标签3</p> </body>