了解CSS3选择器,第 2部分: 基于状态,目标和否定伪类

分享于 

14分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

在这两个部分中,我讨论了新的CSS3 结构伪类根据它们在文档树或者它们与其他元素的关系中的位置,介绍了新的CSS3结构。 在本文中,我将回顾CSS3中引入的剩余伪类: 基于状态。目标和否定伪类。 但是在深入学习之前,请阅读部分 1中关于pseudo类和CSS3选择器的基础知识。

用户界面元素状态伪类

结构伪类依赖于元素位置的relative,状态基于元素的状态,如元素是活动的还是聚焦的。 你应该已经熟悉了状态伪类( 像 :link,:visited,:hover 和 :active )的概念,它在anchor中引入了锚( <> ) 元素。

在 CSS2.1, 中引入了 :focus 伪类,并扩展了基于超链接的状态选择器,以形成诸如输入和文本。 CSS3还提供了三个可以用于表单元素的用户界面状态的伪类: :disabled:enabled:checked

语法检查

所有 pseudo -classes的语法都很简单。 每个伪类 NAME 都以冒号开头:

:pseudo-class {}

选择器只能包含伪类,如前面的示例,将以元素( e ),类或者标识选择器为目标,将它的定位到元素,类或者id选择器如下:

e:pseudo-class {}
.class:pseudo-class {}
#id:pseudo-class {}

使用基于状态的伪类,仅当指定的状态在UI中为 true 时,浏览器才应用选择器。 在下面的示例中,只有当用户悬停在链接上时,指定的样式才会在屏幕上呈现。 所有其他链接状态都不会呈现这些样式。

a:hover {
 background-color: #ccc;
 text-decoration: none;
}

:已经禁用

禁用了 : 禁用的伪类别目标具有禁用属性的输入元素,这使输入元素无效,并且无法使用:

<input type="text" name="name" disabled/>

本示例使用HTML5中的布尔值禁用属性,但你也可以在以前版本的HTML中声明这里属性:

<input type="text" name="name" disabled="disabled"/>

对于两种方法,大多数浏览器都使用默认的禁用输入表示,其中字段边界与启用的输入相比略灰色,如图8 所示。

图 1禁用和启用表单输入的默认样式

但是,可以使用 :disabled 类覆盖这里默认样式,并获得如图8 显示的结果。

input:disabled {
 background-color: #ccc;
 border: 0;
 padding: 3px 2px;
}

Disabled Form Input with Unique Style

图 2使用独特样式禁用表单输入

如果你没有使用布尔值禁用属性,也可以使用属性选择器实现这里效果:

input[disabled="disabled"] {
 background-color: #ccc;
 border: 0;
 padding: 3px 2px;
}

你最终使用哪个选择器取决于你的项目。

:已经启用

启用 : 启用的伪类别针对输入的默认启用状态:

input:enabled {
 background-color: rgb(255, 255, 255);
 border: 1px solid rgb(125,104,99);
}

由于表单元素的默认状态已经启用,所以我不确定什么时候需要使用这里选择器。 元素选择器也可以工作,也许更好,具体取决于项目。 但是为了演示,考虑一个带有单选按钮的短表单,它包含允许用户在文本输入中输入自己的值的其他选项。 这里表单的HTML显示为 ,图 4显示了表单。

<form><legend>What's your favorite zombie movie?</legend><inputtype="radio"name="FavMovie"id="28Days"/><labelfor="28Days">28 Days
 Later</label><inputtype="radio"name="FavMovie"id="Army"/><labelfor="Army">Army of
 Darkness</label><inputtype="radio"name="FavMovie"id="Night"/><labelfor="Night">Night of the
 Living Dead</label><inputtype="radio"name="FavMovie"id="Reanim"/><labelfor="Reanim">Re-
 Animator</label><inputtype="radio"name="FavMovie"id="Shaun"/><labelfor="Shaun">Shaun of the
 Dead</label><inputtype="radio"name="FavMovie"id="Other"/><labelfor="Other">Other</label><inputtype="text"id="OtherEntry"disabled/><inputtype="submit"/></form>
图 3。禁用了其他选项的输入表单

Form with a Disabled Text Input Field

图 4带有禁用文本输入字段的表单

在HTML中,其他选项的文本输入设置为禁用,我将默认浏览器样式保留在适当位置。 但是,当用户选择其他单选按钮时,我希望启用已经禁用的输入。 可以使用小的JavaScript插件删除禁用的属性,并且样式稍微改变,以帮助通知用户输入字段可以接受输入,从而使它的更易于使用。 现在表单显示为图 5

input:enabled {
 background-color: rgb(255, 255, 204);
}

Selecting the other Option Enables the Input Field and Applies a Style

图 5选择另一个选项可以启用输入字段并应用样式

:已经检查

:检查类目标广播和选中的复选框输入。 这允许你通过选中的属性或者用户在UI中选择的用户来样式化由开发人员预选的元素。 :checked 伪类可以能在一个矩阵或者长列表单选按钮( 或者复选框) 中很有用,用户可以在它的中确定选择的选项。 为了简便起见,让我们看看如何将选中的单选按钮应用于单选按钮( 请参见图 6 )。

这里示例的HTML包含一个带有布尔checked属性的单选按钮:

<form><legend>Do you want text notifications of the zombie apocalypse?</legend><inputtype="radio"name="notify"id="yes"checked/><labelfor="yes">Yes</label><inputtype="radio"name="notify"id="no"/><labelfor="no">No</label><inputtype="submit"/></form>

下面是针对选定单选按钮的CSS:

input:checked {
 border: 1px solid rgb(255, 0, 0);
}

如果其他选择器可以与这些伪类一起使用,我可以通过结合:使用属性选择器检查来更加具体:

input[type="radio"]:checked {
 border: 1px solid rgb(255, 0, 0);
}

Opera Rendering of a Preselected Radio Button

图 6.预先选择的单选按钮的Opera 呈现

不幸的是,大多数浏览器限制广播样式和复选框输入。 在这些情况下,使用:选中选择器specified指定的样式将不显示。 使用浏览器时,只有 Opera/OS X 交付的结果显示为 ,坦率地说,这只是丑陋的,可能会让用户感到困惑。

但是,你可以使用:checked伪类和相邻的兄弟组合 combinator,为选中的单选按钮设置标签文本。 下面是 CSS。你可以在图 7中看到结果。

input:checked+label {
 background-color: rgb(255, 255, 204);color: rgb(255, 0, 0);}

Label Styled by Combining :checked with a Sibling Selector

图 7通过组合使用的标签:选中了一个兄弟选择器

目标伪类

CSS3还包括一些新的伪类,这些类不是结构或者状态。 :目标类选择带有id的元素,该id使用标识符链接到该元素。 fragment 标识符出现在URL的末尾,用一个哈希标记( # ),后跟一个锚号( <> ) NAME 或者元素 by。

例如,在长篇文章中,我可以能希望包含一个链接到文章章节主要内容的内容 table。 ( 请参见图 8。 ) 要设置这个,我需要为作为目标的内容的fragment 标识符分配 ids:

<h2id="rotnruin">Rot &amp; Ruin</h2><p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris...</p><h2id="romero">Romero Zombies</h2><p>Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe.. .<p>

然后,我需要链接到这些 id:

<ul><li><ahref="#rotnruin">Rot &amp; Ruin</a></li><li><ahref="#romero">Romero Zombies</a></li>. . .</ul>

A Table of Contents with Links to Main Sections

图 8.包含主节链接的内容的table

如果使用HTML结构,可以在用户跳转到内容链接的table 时使用不同的外观样式来样式化h2元素。 下面是 CSS,结果显示为图 9

h2:target {
 background: rgb(125,104,99);border: 0;color: rgb(255, 255, 255);padding-left: 10px;}

Heading that is the Target of the Referring Link

图 9标题是引用链接的目标

Negation伪类

Referred pseudo 类,: 不是( x ) 目标元素,它是由在括号中指定的选择器( x ) 所匹配的selector。 非( x )的语法实际上允许指定所有类型的选择器,从简单元素。id或者类选择器到组合符和其他伪类。

例如,你可以为不是分段元素的子级的所有链接指定样式,对于没有分配 class="intro"的所有段落或者输入元素:

:not(section) a {}
p:not(.intro) {}
input:not([type="submit"]) {}

为什么使用伪类?

很容易查看这些伪类( 以及部件 1中所覆盖的内容。),并想知道为什么要使用它们来更直观的选择( arguably )。 答案与你处理的项目相联系。

有时,CMS会限制对标记的访问,这意味着你不能添加id或者类。 对于某些遗留系统,true 也是相同的。 有时这些伪类有意义的情况会出现。

理解这些选择器的目的至少是对我来说,并不是选择一个并独立使用它。 相反,它是关于构建一个可以用于任何情况或者项目的选项。

浏览器支持和处理

部分 1所述,所有现代浏览器,包括 IE 10和 9,支持CSS3伪类( )。 如果你的目标是提供一个提供有限或者buggy的CSS3选择器支持的老浏览器版本,那么你需要使用像 Selectivizr这样。

值得一提的是,CSS3选择器的浏览器处理相对于其他选择器而言,是相对 和 CSS测试创建者。

.网络带宽资源控制

这两部分涵盖了CSS3伪类的基础,但是你还可以进行更多的实验。 我推荐以下在线资源来提供更多关于什么是可能的想法:

另外,我非常强烈地推荐了gillenwater的,Stunning的CSS3。 在本书中,你获得了大量实际的伪类示例,以及大量它的他奇异的iseries信息和资源。

这篇文章是由Emily写的。 Emily是standardista变体的自由网页设计师,这意味着她对语义标记 andCSS。可用性和易访问性等事情变得非常。 作为她的一部分,她在博客上写了网页设计,博客不限制,作为for的作者作者。 她也是一家用于网络标准,的客户编写者,.NET 杂志和混合在线。

about对社区建筑和知识共享非常爱爱所有的网站。 她创建并管理了新的墨西哥用户组的Webuquerque,并且是ExpressionEngine客户机的主持人。 美国 Emily Emily,Emily,Control,Voices,InterLab,,Emily,Emily,Emily。

找到 Emily:


STA  PAR    Select  classes  CSS3  
相关文章