从零开始学HTML&&CSS&&JavaScript(五)——UI元素状态伪类选择器

UI元素状态伪类选择器

  • UI元素状态伪类选择器

UI元素状态伪类选择器

有如下伪类选择器

➢Selector:link: 匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
➢Selector:visited: 匹配Selector选择器且已被访问过的元素(通常只能是超链接)。
➢Selectoractive: 匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间
的事件)状态的元素。
➢Selector:hover:匹配Selector选择器且处于鼠标悬停状态的元素。
➢Selector:focus: 匹配Selector选择器且已得到焦点的元素。
➢Selector:enabled: 匹配Selector选择器且当前处于可用状态的元素。
➢Selector:disabled: 匹配Selector选择器且当前处于不可用状态的元素。
➢Selector:checked: 匹配Selector选择器且当前处于选中状态的元素。
➢Selector:default: 匹配Selector选择器且页面打开时处于选中状态( 即使当前没有
被选中亦可)的元素。
➢Selector:read-only: 匹配Selector选择器且处于只读状态的元素。
➢Selector:read-write: 匹配Selector选择器且处于读写状态的元素。
➢Selector:selection: 匹配Selector 选择器的元素中当前被选中的内容。

代码如下:


<html>
	<head>
		<meta 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;
		}
		/*为页面打开时处于勾选状态的任意元素定义CSsS样式*/
		:default{
			outline : #bbb solid 5px;
		}
		style>
	head>
	<body>
		<table style="width: 400px; border -collapse :collapse">
		<tr>
		<td>疯狂Java讲义td><td>109td>
		tr>
		<tr>
		<td>轻量级Java EE企业应用实战td><td>89td>
		tr>
		
		<td>疯狂Android讲义td><td>89td>
		tr>
		table>
		<button disabled>不可用的按钮button>
		<input type="text" disabled value="不可用的文本框"/><br />
		<button>可用的按钮button><br />
		<input type="text" value="可用的文本框"/><br />
		男: <input type="radio" value="male" name="gender"/><br />
		女: <input type="radio" value="female" name="gender"/><br />
		未知: <input type=" radio" checked value="unknown" name="gender" />
	body>
html>

整个的页面啊现实效果如下,具体的效果大家可以把代码复制出来自己看
从零开始学HTML&&CSS&&JavaScript(五)——UI元素状态伪类选择器_第1张图片

你可能感兴趣的:(前端基础)