`
yatou_0209
  • 浏览: 37625 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

CSS 3 UI元素状态伪类选择器

阅读更多
接《css 3 选择器》
在css3选择器中,除了结构性选择器之外,还有一种UI元素状态伪类选择器,这些选择器的共同特征是:指定的样式只用当元素处于某种状态下才气作用,在默认的状态下不起作用。

在css 3 中共有11中UI伪类选择器,分别是:
E:hover;/*支持firefox、safari、Opera、ie8、chrome*/
E:active;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:focus; /*支持firefox、safari、Opera、ie8、chrome*/
E:enabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:disabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:read-only;/*支持firefox、Opera  不支持ie8、safari、chrome */
E:read-write/* 支持firefox、Opera  不支持ie8、safari、chrome*/ 
E:checked /*支持firefox、safari、Opera、chrome   不支持ie8*/
E::selection /* 支持firefox、safari、Opera、chrome   不支持ie8 */
E:default /*只支持firefox*/
E:indeterminate/*只支持Opera*/

逐个说明:
1.E:hover选择器用来指定当鼠标指针移动到元素上面时,元素所使用的样式。
2.E:active选择器用来指定元素被激活(鼠标在元素上按下还没有松开时)时使用的的样式。
3.E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。
4:E:enabled选择器用来指定当前元素处于可用状态时的样式
5:E:disabled选择器用来指定当前元素处于不可用状态时的样式
6.E:read-only选择器用来指定当元素处于只读状态时的样式,在ff下需要写成-moz-read-only的形式
7.E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式
8.E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式
9.E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。需要注意的是,即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态,使用E:default选择器设定的样式依然有效。
10.E:indeterminate选择器用来指定当页面打开时,如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。如果用户选中这组中的任何一个单选按钮,那么整组的单选按钮的样式被取消。
11.E::selection选择器用来指定当元素处于选中状态时的样式。这里需要注意的是:在ff下使用时,需要写成-moz-selection的形式。

通用兄弟元素选择器
<子元素> ~ <子元素之后的同级兄弟元素>{指定样式}
<style>
div ~p{
   background:red;
}
</style>
<div>
    <p>p元素为div的子元素</p>
</div>
<p>
   p元素为div的兄弟元素
</p>

说白了,就是同级的元素设置同样的样式。

css 3 选择器结束了。






分享到:
评论

相关推荐

    第39章 UI元素状态伪类选择器

    在本章中,我们将深入探讨UI元素状态伪类选择器这一关键CSS概念,它是构建响应式和交互式用户界面的核心工具。伪类选择器允许我们根据元素的不同状态来应用特定的样式,使得网页的视觉反馈更加直观和动态。 首先,...

    css3之UI元素状态伪类选择器实例演示

    CSS3引入了多种UI元素状态伪类选择器,这些选择器允许我们在不同的用户交互状态下改变元素的样式,从而使Web界面更加动态和用户友好。以下详细介绍和实例演示了几个常用的UI元素状态伪类选择器。 1. E:hover选择器 ...

    两种CSS3伪类选择器详细介绍

    css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...

    CSS3参考手册(css3语法使用查询手册)CHM版.rar

    CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...

    CSS3选择器总结CSS3选择器总结

    - UI元素状态伪类选择器:如:target, :enabled, :disabled, :checked。 这些CSS3选择器提高了开发者对页面布局和样式的控制能力,使得样式的应用更加精确和多样化。通过合理地使用CSS选择器,开发者可以编写出更加...

    css3 UI开关按钮特效.zip

    1. **伪类选择器**:`:checked`伪类是CSS3中用于选取已勾选的input[type=checkbox]元素的重要工具。通过这个选择器,我们可以改变按钮的状态,例如背景颜色、边框样式等。 2. **过渡效果**(Transition):CSS3的...

    第14章 CSS选择器[下].pdf

    二、UI伪类选择器:这些选择器针对用户界面元素的不同状态。 - :enabled 选择器选择那些启用状态的元素,例如表单输入。 - :disabled 选择器选择那些禁用状态的元素。 - :checked 选择器选择那些被勾选的单选按钮或...

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    纯css3 ui搜索框样式代码

    3. **伪类选择器**:`:hover`, `:focus`, `:active`等伪类选择器可以实现鼠标悬停、获取焦点和按下状态下的不同样式,增强用户体验。 4. **输入框占位符**:`placeholder`属性可以在输入框内显示提示文字,帮助用户...

    css选择器.docx

    - **UI元素状态伪类**:`:enabled`,`:disabled`,`:checked`,`:selection`。 - **否定伪类**:`:not(s)`,匹配不匹配`s`的选择器的元素。 - **动态伪类**:`:link`,`:visited`,`:active`,`:hover`,与基础链接伪类...

    UI留言评论css3样式.rar

    1. **选择器增强**:CSS3引入了更强大的选择器,如类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attr=value]`)和伪类选择器(`:hover`, `:active`, `:focus`, `:nth-child()`等),允许更精确地定位和...

    CSS3全屏双面板内容切换UI设计

    4. **伪类选择器**:使用`:hover`、`:active`和`:focus`等伪类选择器,可以为箭头按钮添加动态效果,提高用户交互体验。 5. **响应式设计**:考虑到不同设备的屏幕尺寸,CSS3的媒体查询(`media queries`)可以确保UI...

    css3网页模板MetroUI风格

    我们可以借助Font Awesome、Ionicons等字体图标库,结合CSS3的`content`属性和`before`、`after`伪元素来插入图标。 ### 3. CSS3动画与过渡 - **过渡(Transitions)**:通过设置`transition`属性,可以让元素在...

    css3实现Icon UI图标zip

    这涉及到CSS3的`:hover`伪类选择器,它可以让我们在鼠标指针悬停在某个元素上时应用特定的样式。例如: ```css .icon:hover { /* 添加悬停效果,如改变颜色、阴影等 */ } ``` 同时,信息提示框可能通过CSS3的`::...

    用CSS3将你的设计带入下个高度

    此外,CSS3还带来了伪类,例如结构性伪类和UI元素状态伪类。结构性伪类允许我们基于元素在文档树中的位置选择元素,比如选择第一个子元素、最后一个子元素等。UI元素状态伪类则涉及选择器如:enabled、:disabled或:...

    CSS3 UI响应导航.zip

    - **选择器**:CSS3引入了更强大的选择器,如类选择器、ID选择器、属性选择器等,使得我们可以更加精确地定位元素。 - **Flexbox布局**:Flexbox模型用于创建灵活的、响应式的布局,尤其适合处理导航栏元素的排列...

    【基于element ui的color选择器】基于element ui的color选择器项目源码

    【基于Element UI的Color选择器】是一个用于前端开发的组件,它基于流行的Vue.js框架和Element UI库。Element UI是一个为Vue.js设计的组件库,提供了丰富的UI元素和交互,适用于构建企业级的Web应用程序。在本项目中...

    纯CSS3超酷扁平风格后台面板UI设计

    例如,可以使用`:hover`、`:active`、`:focus`伪类来改变鼠标悬停、点击或获得焦点时的元素状态,或者使用`nth-child`、`nth-of-type`等伪类来针对特定的子元素应用样式。 其次,过渡和动画效果是CSS3中的亮点,...

    MS CSS and UI Mapping

    - **选择器**:CSS的选择器用于定位HTML或XML文档中的元素,如标签选择器(`&lt;tagname&gt;`),类选择器(`.classname`)和ID选择器(`#idname`)。 - **属性**:CSS属性定义了元素的样式,如颜色、字体、尺寸等,例如...

Global site tag (gtag.js) - Google Analytics