2019-04-15
伪类是CSS的内部类定义，可以直接在代码中使用。
超链接伪类
| 伪类 | 用途 |
|---|---|
| a:link | 设置a对象在未被访问前的样式表属性 |
| a:hover | 设置a对象在其鼠标悬停时的样式表属性 |
| a:active | 设置a对象在被用户激活（在鼠标单击与释放之间发生的事件）时的样式表属性 |
| a:visited | 设置a对象在其链接地址已被访问过时的样式表属性 |
<style type="text/css">
a:link {
color: #00ff00;
}
a:hover {
color: #FF0000;
}
a:active {
color: #0000ff;
}
a:visited {
color: #eee;
}
</style>
注： 适用于所有元素，将a替换成相应的标签即可
例：鼠标经过表格变色
<style type="text/css">
tr:hover{
background-color: chartreuse;
}
</style>
鼠标悬停样式
CSS的cursor属性可以定义鼠标悬停样式。
| 值 | 描述 |
|---|---|
| url | 需被使用的自定义光标的URL 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
before与after伪类
:before伪类在被选元素的前面插入内容。
:after伪类在被选元素的后面插入内容。
<style type="text/css">
a:before{
content:"请点击打开：";
}
a:after{
content: "("attr(href)")";
/*attr(href):获得href属性值*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sohu.com">搜狐</a><br />
<a href="http://www.163.com">网易</a><br />
</body>
结构化伪类 CSS3
根据文档的结构关系选取元素，具体包括：
:nth-child(n)伪类选择器
:nth-last-child(n)伪类选择器
:nth-of-type(n)伪类选择器
:nth-last-of-type(n)伪类选择器
:first-child伪类选择器
:last-child伪类选择器
:first-of-type伪类选择器
:last-of-type伪类选择器
:only-child伪类选择器
:only-of-type伪类选择器
:root伪类选择器
:empty伪类选择器
1. :nth-child(n)
选取父元素中的第n个子元素。
<style type="text/css">
li:nth-child(2){
color:red;
}
</style>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
li:nth-child(2) { color:red; }:更改在父元素中排第二的li的颜色，li: 要更改属性的标签
li:nth-child(2n) 2n表示选取所有偶数项，3n则表示选取3、6、9等项；2n+1选取所有奇数项
li:nth-child(even) even表示偶数项，odd表示奇数项
例：表格隔行变色
<style type="text/css">
tr:nth-child(2n){/*在表格父元素中的所有偶数行*/
background-color: aqua;
}
tr:nth-child(2n+1){/*在表格父元素中的所有奇数行*/
background-color: blueviolet;
}
</style>
2. :nth-last-child(n)
选择父元素中倒数第n个子元素。
3. :nth-of-type(n)
与:nth-child(n)区别：
使用li:nth-child(2)时，如果第2个元素不是li元素，选择器不起作用，不会做任何改变。
使用li:nth-of-type(2)时，选取第2个li元素，无论这个li元素实际是第几个元素。
4. :nth-last-of-type(n)
nth-of-type(n) 获取元素的顺序相反。
5. :last-child 与:first-child
选择父元素中第一个与最后一个子元素，若指定类型不是第一个或最后一个，则选择不到元素
6. :first-of-type和:last-of-type
选择父元素中第一个与最后一个指定类型的子元素
7. :only-child
如果父元素只有一个子元素且是指定类型的子元素，则选择这个子元素。
8. :only-of-type
如果父元素有子元素且只有一个指定类型的子元素，则选择这个子元素。
9. :root
选择根元素，即<html>标签。
<style type="text/css">
:root{
background-color:red;
}
</style>
10. :empty
选择没有任何内容的元素。
<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
}
div:empty{
background-color:red;
}
</style>
<body>
<div></div>
<div>hello</div>
</body>
目标伪类
:target-选取当前活动的目标元素。
否定伪类
:not-用排除法定位元素。
<style type='text/css'>
:target{
border:5px solid red;
}
img:not(:target){
border:5px solid green;
}
</style>
<body>
<p>
<a href="#m1">第一</a>
<a href="#m2">第二</a>
<a href="#m3">第三</a>
</p>
<img id="m1" src="images/001.jpg" />
<img id="m2" src="images/002.jpg" />
<img id="m3" src="images/003.jpg" />
</body>
网友评论