selector-UI元素状态伪类

结合CSS2.0和CSS3.0,UI元素状态伪类共有以下几个,仍然是结合实例来看.

代码　　　　　　　　　　　　效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>无标题页</title><style type="text/css">*{margin:5px;}</style>
</head>
<body><a href="HTMLPage.htm">超级链接</a><br /><a>超级链接</a><br /><input type="checkbox" checked="checked" value="1" />男<input type="checkbox" />女<br /><input type="text" value="默认都是enabled" /><br /><input type="text" value="disabled" disabled="disabled" /><br /><p>选中部分会高亮</p>
</body>
</html>
a:link
{color:Green;
}
E:link
仅能在a对象上使用.用于设置a元素未被访问时的样式.
对于无href的a对象无效.
a:visited
{background-color:Silver;
}
E:visited
仅能在a对象上使用.用于设置a元素访问过后的样式.
对于无href的a对象无效.
p:hover
{color:red;
}
E:hover
设置鼠标在对象上悬停时的样式.
p:active
{color:Green;
}
E:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式.
input:focus
{background-color:Green;
}
E:focus
设置元素在成为输入焦点时的样式.
input:checked
{height:40px;width:40px;
}
E:checked
设置元素被选中时的样式.
input:enabled
{color:Red;
}
E:enabled
设置用户界面中处于可用状态的E元素
input:disabled
{color:Red;
}
E:disabled
设置用户界面中处于不可用的E元素
p::selection
{color:Red;
}
E::selection
匹配E元素中被用户选中或处于高亮状态的部分

转载于:https://www.cnblogs.com/oneword/archive/2010/08/20/1805021.html

selector-UI元素状态伪类相关推荐

CSS3学习笔记（九）——UI元素状态伪类选择器 :checked
通过":checked"状态来自定义复选框效果 html <form action="#"> <div class="wrapper ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
目标伪类选择器元素状态伪类
目标伪类选择器: 举例说明一下他的用途,比如点击一个文字或是图标实现跳到顶部,这时候可以用的这个目标伪类选择器用于匹配当前激活的[锚点元素] 语法: 目标选择器 :target{} new docu ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
CSS 伪类: 什么是 CSS 伪类？CSS 伪类怎么分类？ CSS 伪类有哪些？以及分类对应的伪类
本章讲解的内容为 CSS 伪类 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) . 一: 什么是 CSS 伪类? 1. CSS 伪类是用来添加一些 ...
伪类、伪元素、锚伪类
伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果. 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信 ...
css3-属性选择器伪类:root :not() :first-of-type :first-child 伪元素 ::first-letter ::first-line ::selection等等
用户代理(User Agent,简称UA)是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等属性选择器语法 E[a ...

代码	效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>无标题页</title><style type="text/css">*{margin:5px;}</style> </head> <body><a href="HTMLPage.htm">超级链接</a><br /><a>超级链接</a><br /><input type="checkbox" checked="checked" value="1" />男<input type="checkbox" />女<br /><input type="text" value="默认都是enabled" /><br /><input type="text" value="disabled" disabled="disabled" /><br /><p>选中部分会高亮</p> </body> </html>
a:link {color:Green; }	E:link 仅能在a对象上使用.用于设置a元素未被访问时的样式. 对于无href的a对象无效.
a:visited {background-color:Silver; }	E:visited 仅能在a对象上使用.用于设置a元素访问过后的样式. 对于无href的a对象无效.
p:hover {color:red; }	E:hover 设置鼠标在对象上悬停时的样式.
p:active {color:Green; }	E:active 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式.
input:focus {background-color:Green; }	E:focus 设置元素在成为输入焦点时的样式.
input:checked {height:40px;width:40px; }	E:checked 设置元素被选中时的样式.
input:enabled {color:Red; }	E:enabled 设置用户界面中处于可用状态的E元素
input:disabled {color:Red; }	E:disabled 设置用户界面中处于不可用的E元素
p::selection {color:Red; }	E::selection 匹配E元素中被用户选中或处于高亮状态的部分

selector-UI元素状态伪类

selector-UI元素状态伪类相关推荐

最新文章

热门文章