CSS的伪类选择器（二）

最新推荐文章于 2024-09-02 00:04:08 发布

qq_41593847

最新推荐文章于 2024-09-02 00:04:08 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/qq_41593847/article/details/95041628

版权

UI元素状态伪类选择器

UI元素状态伪类选择器用于根据UI元素的状态进行筛选。常用的有如下几个：

Selector:link ：匹配 Selector 选择器且未被访问前的元素（通常只能是超链接）。
Selector:visited ：匹配 Selector 选择器且已被访问过的元素（通常只能是超链接）。
Selector:active ：匹配 Selector 选择器且处于被用户激活（在鼠标点击与释放之间）状态的元素。
Selector:hover ：匹配 Selector 选择器且处于鼠标悬停状态的元素。
Selector:focus ：匹配 Selector 选择器且已得到焦点的元素。
Selector:enabled ：匹配 Selector 选择器且当前处于可用状态的元素。
Selector:disabled ：匹配 Selector 选择器且当前处于不可用状态的元素。
Selector:checked ：匹配 Selector 选择器且当前处于选中状态的元素。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<style type="text/css">
			td{
				border:1px solid black;
				padding:4px;
			}
			/*为处于鼠标悬停状态的表格行定义css样式*/
			tr:hover{
				background-color:#aaa;
			}
			/*为处于激活状态的input元素定义css样式*/
			input:active{
				background-color:blue;
			}
			/*为得到焦点的任意元素定义css样式*/
			:focus{
				text-decoration:underline;
			}
			/*为可用的任意元素定义css样式*/
			:enabled{
				font-family:"黑体";
				font-weight:bold;
				font-size:14pt;
			}
			/*为不可用的任意元素定义css样式*/
			:disabled{
				font-family:"隶书";
				font-size:14pt;
			}
			/*为处于勾选状态的任意元素定义css样式*/
			:checked{
				outline:red solid 5px;
			}
			/*为页面打开时处于勾选状态的任意元素定义css样式*/
			:default{
				outline:#bbb solid 5px;
			}
		</style>
	</head>
	<body>
		<table style="width:400px;border-collapse:collapse">
			<tr>
				<td>讲义</td><td>109</td>
			</tr>
			<tr>
				<td>企业实战</td><td>108</td>
			</tr>
			<tr contentEditable="ture">
				<td>android讲义</td><td>108</td>
			</tr>
		</table>
		<br/>
		<button disabled>不可用按钮</button>
		<input type="text" disabled value="不可用文本框"/>	
		<button>可用按钮</button>
		<input type="text" value="可用文本框"/>	
		男：<input type="radio" value="male" name="gender"/>	
		女：<input type="radio" value="female" name="gender"/>	
		未知：<input type="radio" checked value="unknown" name="gender"/>	
	</body>
</html>

其他伪类选择器

Selector1:not(Selector2) ：匹配符合 Selector1 选择器，但不符合 Selector2 选择器的元素，相当于用Selector1 减去Selector2 。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
	    <style type="text/css">
		    li:not(#ajax){
					color:#999;
					font-weight:bold;
			}
		</style>
		<body>
			<ul>
				<li id="java">java</li>
				<li id="ajax">Ajax</li>
				<li id="xml">XML</li>
				<li id="ejb">java EE</li>
				<li><span id="android">Android</span></li>
		    </ul>
		</body>
</html>