伪类选择器
选择符 | 版本 | 描述 |
---|---|---|
E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
E:active | CSS1/2 | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 |
E:focus | CSS1/2 | 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。 |
E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
E:root | CSS3 | 匹配E元素在文档的根元素。 |
E:first-child | CSS2 | 匹配父元素的第一个子元素E。 |
E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
E:first-of-type | CSS3 | 匹配同类型中的第一个同级兄弟元素E。 |
E:last-of-type | CSS3 | 匹配同类型中的最后一个同级兄弟元素E。 |
E:only-of-type | CSS3 | 匹配同类型中的唯一的一个同级兄弟元素E。 |
E:nth-of-type(n) | CSS3 | 匹配同类型中的第n个同级兄弟元素E。 |
E:nth-last-of-type(n) | CSS3 | 匹配同类型中的倒数第n个同级兄弟元素E。 |
E:empty | CSS3 | 匹配没有任何子元素(包括text节点)的元素E。 |
E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
E:target | CSS3 | 匹配相关URL指向的E元素。 |
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button{
width: 180px;
height: 50px;
border:1px solid #ff6700;
background: #fff;
font-size:20px;
cursor:pointer;
}
/*伪类选择器*/
button:hover{
background: #ff6700;
color:#fff;
}
a{
/* 去除文本装饰 */
text-decoration: none;
}
/*链接未访问时*/
a:link{
color:#f00;
}
/*链接被访问过*/
a:visited{
color:#0f0;
}
a:hover{
color:#f00;
/* 显示下划线 */
text-decoration: underline;
}
.menu li:nth-child(1){
background: #CCCCCC;
}
.menu li:last-child{
background: #ff0000;
}
/*选则偶数行元素*/
table tr:nth-child(2n){
background: #00f;
}
/*选中奇数行*/
tr:nth-child(2n+1){
background: #f00;;
}
/*选中除了最后一个其他元素*/
li:not(:last-child){
border-bottom:5px solid #0000FF
}
/*选中禁用的元素*/
input[type=text]:disabled{
background: #ff0;
}
</style>
</head>
<body>
<a href="http://www.softeem.com">点我试试</a>
<button>点我试试</button>
<div>
<ul class="menu">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
</ul>
</div>
<input type="text" value="hello" disabled><br>
<input type="text" value="hello" ><br>
<input type="text" value="hello" ><br>
<table>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
</tr>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
</tr>
</table>
</body>
</html>
伪对象选择器
选择符 | 版本 | 描述 |
---|---|---|
E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。 |
E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。 |
E:before/E::before | CSS2/3 | 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 |
E:after/E::after | CSS2/3 | 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 |
E::placeholder | CSS3 | 设置对象文字占位符的样式。 |
E::selection | CSS3 | 设置对象被选择时的颜色。 |
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
}
li{
height: 50px;
}
/* 伪对象选择器 */
li::before{
content: url(../img/QQ.png);
}
li::after{
content: "1000元";
}
/*私有前缀(特定浏览器支持) 选中输入框的placeholder属性*/
::-webkit-input-placeholder{
color:#f00;
}
/* mozella firefox内核 */
::-moz-placeholder{
color:#f00;
}
.box{
height: 300px;
width:300px;
overflow-y: scroll;
}
/*伪对象设置滚动条样式*/
::-webkit-scrollbar{
width:10px;
background: #CCCCCC;
border-radius: 5px;
}
/*伪对象设置滚动条滑块样式*/
::-webkit-scrollbar-thumb{
width:10px;
background: #FF6700;
border-radius: 5px;
}
</style>
</head>
<body>
联系我们
<ul>
<li>王小姐</li>
<li>苍小姐</li>
<li>博小姐</li>
<li>刘小姐</li>
<li>李小姐</li>
</ul>
<input type="text" placeholder="请输入用户名">
<div class="box">
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
<p>good good study ,day day up</p>
</div>
</body>
</html>