网络编程
位置:首页>> 网络编程>> 网页设计>> 用CSS3将你的设计带入下个高度[译](3)

用CSS3将你的设计带入下个高度[译](3)

作者:神采飞扬 来源:前端观察 发布时间:2009-06-22 13:03:00 

标签:设计,css3,hack,工具

伪类

或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的:

  • :nth-child(n)
    让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或oddeven 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组,你可以简单的这样使用:
    :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/

  • :nth-last-child(n)
    与上个选择器的思想同样,但是从后面匹配元素(倒序),比如,为了指定一个div里面的最后两个段落,我们可以使用下面的选择器:
    div p:nth-last-child(-n+2)

  • :last-child
    匹配一个父节点下的最后一个子元素,等同于
    :nth-last-child(1)

  • :checked
    匹配选择的元素,比如复选框

  • :empty
    匹配空元素(没有子元素)。

  • :not(s)
    匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
    p:not([class*="lead"]) { color: black; }

Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:

#primary .text p:last-child {
    margin: 0;
    }

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, nly-child, :root, :empty, :target, :checked, :enabled:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

扩展阅读

0
投稿

猜你喜欢

  •  在sql语句中,如果查找某个文本字段值为空的可以用select * from 表 where 字段=''但是如果
  • 这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美
  • 在Transact-SQL语句中,我们主要使用OpenDataSource函数、OPENROWSET 函数,关于函数的详细说明,请参考SQL
  • 是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。
  • 每个浏览器都有自己的默认样式,这是一段预定义的CSS,用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/re
  • jxdawei的blog:http://www.iwcn.net/本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合
  • 使用cookie来判断来访者身份,是否是首次登陆, asp代码实例如下:< %@ LANGUAGE=&q
  • 在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。关键在于keyup
  • 如果说哪个开源程序不需要介绍大家就认识,那一定是phpMyAdmin,一款流行的MySQL数据库的Web管理界面。MySQL是全球最流行的W
  • WAP站点,这似乎是一个有点落伍的东西。在诞生之初,它很简陋,只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今,绝大部
  • 这个代码不是很完善,能实现基本的功能;另外有个问题,就是divOpenWin层的定位问题:发现如果其属性设置成display:none,那么
  • 代码如下:ADODB.Connection 错误 '800a0e7a' 未找到提供程序。该程序可能未正确安装。 /连接“网站
  • “到底是什么将艺术和设计分开的?”这样一个话题听起来费解,长时间以来, 也已经被讨论过无数次。艺术家和设计师都是通过共通的知识和素养来创造视
  • 本文介绍了4个asp数据库管理中常用到的access数据库操作程序,一般的网站管理后台都提供了这个功能,方便管理员对数据库数据的管理维护。1
  • 在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。
  • 问题:如何用ASP实现点击数统计?比如我要实现某篇文章被浏览一次就增加一个点击数,该怎么做?回答:就是说,比如,你的页面是:shownews
  • 1.11 – 添加缎带修饰网页局部模块中右上角的蓝色缎带修饰是这个网站界面设计中的一个亮点,只要合理的运用CSS、PNG透明图片和绝对定位属
  • 用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的 SELECT语句,另外一种就是更新语句,也叫做数据操作语句。言外之 意
  • Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们
  • 最近,随着数据库的日益庞大,本来两个差不多的数据库,我开始发现我的数据库查询起来越来越比我朋友网站的慢了,经过初步对照,问题好像出在访问记录
手机版 网络编程 asp之家 www.aspxhome.com