详解CSS3中的属性选择符
作者:dudo 来源:dudo says 发布时间:2008-04-24 14:30:00
英文原文:
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
中文翻译:
http://www.dudo.org/article.asp?id=197
注:本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注]
在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox,Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待Internet Explorer尽快赶上来,那我们就可以尽情地使用CSS2.1中的选择符了。好在Internet Explorer在其第7个版本中已经在尽力追赶了,至少在某些扩展方面。
如果我们再向前看一点,在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用(IE8.0中也已经部分地支持了CSS3,dudo注),但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验,因此我认为了解一下CSS 3新增选择符是如何使用还是有益处的。
本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在CSS的第3个版本中出现,但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿,那么现在你应该再去看一下是不是已经出现了最新版本了。
这里我不打算去解释CSS选择符工作的基本原理。如果你想重要复习一下的话,最好从《细说CSS2.1中的选择符》开始。
首先,快速浏览一下CSS3中新增的选择符:
CSS3选择符语法概览:
选择符类型 | 表达式 | 描述 |
子串匹配的属性选择符 | E[att^="val"] | 匹配具有att属性、且值以val开头的E元素 |
子串匹配的属性选择符 | E[att$="val"] | 匹配具有att属性、且值以val结尾的E元素 |
子串匹配的属性选择符 | E[att*="val"] | 匹配具有att属性、且值中含有val的E元素 |
结构性伪类 | E:root | 匹配文档的根元素。在HTML中,根元素永远是HTML |
结构性伪类 | E:nth-child(n) | 匹配父元素中的第n个子元素E |
结构性伪类 | E:nth-last-child(n) | 匹配父元素中的倒数第n个结构子元素E |
结构性伪类 | E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
结构性伪类 | E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
结构性伪类 | E:last-child | 匹配父元素中最后一个E元素 |
结构性伪类 | E:first-of-type | 匹配同级兄弟元素中的第一个E元素 |
结构性伪类 | E:only-child | 匹配属于父元素中唯一子元素的E |
结构性伪类 | E:only-of-type | 匹配属于同类型中唯一兄弟元素的E |
结构性伪类 | E:empty | 匹配没有任何子元素(包括text节点)的元素E |
目标伪类 | E:target | 匹配相关URL指向的E元素 |
UI元素状态伪类 | E:enabled | 匹配所有用户界面(form表单)中处于可用状态的E元素 |
UI元素状态伪类 | E:disabled | 匹配所有用户界面(form表单)中处于不可用状态的E元素 |
UI元素状态伪类 | E:checked | 匹配所有用户界面(form表单)中处于选中状态的元素E |
UI元素状态伪类 | E::selection | 匹配E元素中被用户选中或处于高亮状态的部分 |
否定伪类 | E:not(s) | 匹配所有不匹配简单选择符s的元素E |
通用兄弟元素选择器 | E ~ F | 匹配E元素之后的F元素 |
如果对上面的描述还不是很清楚的,请不要担心。本文下面的部分将会对他们进行更加详细的讲解,并且提供例子来演示他们是怎么使用的。
猜你喜欢
- 使用SQL语句从电脑导入图片到数据库的方法,具体代码如下所示:--创建图片表CREATE TABLE W_PIC( ID INT
- 如何自动登陆京东?我们先来看一下京东的登陆页面,如下图所示:【插入图片,登陆页面】登陆框就是右面这一个框框了,但是目前我们遇到一个困呐,默认
- 有的时候,可能会遇到表格中出现重复的索引,在操作重复索引的时候可能要注意一些问题。一、判断索引是否重复a、Series索引重复判断s = S
- <?php function genpage(&$sql,$page_size=10) { global $pages,$su
- 在做NLP(自然语言处理)相关任务时,经常会遇到需要识别并提取省、城市、行政区的需求。虽然我们自己通过关键词表一个个查找也能实现提取目的,但
- 首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,
- 函数的迭代器函数的强大功能叫做迭代器,Python里面最具威力的功能之一。迭代器我们听起来会感觉非常陌生,在list、tuple都有用到它,
- 本文实例讲述了Python ORM编程。分享给大家供大家参考,具体如下:ORM编程ORM(object-relational mapping
- 我就废话不多说了,大家还是直接看代码吧!import matplotlib.pyplot as pltimport numpy as npf
- 这个翻滚代码没有使用什么marquee或者其它位移方法,而是每隔一秒把列表最顶端的那个li删掉,把这个li里面的内容插入到最底端新生成的li
- 一、查询某个字段重复 select * from User u whe
- 一、缺失值的处理方法由于各种各样的原因,真实世界中的许多数据集都包含缺失数据,这些数据经常被编码成空格、nans或者是其他的占位符。但是这样
- 最近对H1的讨论很多(在文章内容页中),大致有以下两种情况:H1应该用于文章的标题上H1应该用于站点的标题上相信大多数人都偏向第一种方式:用
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 在上一篇关于绘画Sankey桑葚图的文章里,已经介绍过大致的过程,本文主要解决如何自定义/修改 所想要的颜色, 如下所示一个桑葚图:想要修改
- 相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对“空格”不陌生。“空格”属于一类细节,很容易被忽略,但又比较影响效
- 1. 前言在执行一些 IO 密集型任务的时候,程序常常会因为等待 IO 而阻塞。比如在网络爬虫中,如果我们使用 requests 库来进行请
- 来自John Resig早年的文章,大致翻译了一下,以作备忘。 令人高兴的是,我想我终于可以说,“现在,JavaScript的Getters
- 1、类变量、实例变量概念类变量:类变量就是定义在类中,但是在函数体之外的变量。通常不使用self.变量名赋值的变量。类变量通常不作为类的实例
- ResNet沿用VGG完整的KaTeX parse error: Undefined control sequence: \time at