详解CSS3中的属性选择符(5)
作者:dudo 来源:dudo says 发布时间:2008-04-24 14:30:00
:empty伪类
:empty伪类指向没有任何子元素的元素。其中包括text节点,因此下面的示例只有第一行是空元素。
<p></p>
<p>text</p>
<p><em></em></p>
下面的规则只匹配第一行的p元素:
p:empty { background
:#ff0 }
:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。
否定伪类
否定伪类写成:not(s),参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如,下面的CSS将会指向所有不是p的元素:
:not(p) { border:1px solid #ccc; }
否定伪类目前只有基于Mozilla的浏览器支持。
::selection伪类
::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。
下面的规则会使选中的文本颜色变为红色:
::select { color:#f00; }
::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况,因此Safari还需要一点改进。基于Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。
通用兄弟元素选择器
通用兄弟元素选择器通过两个简单选择符通过波浪号(~)分隔组成。它匹配第二个简单选择符中所匹配的元素,而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素,但是第二个元素不一定必须紧跟在第一个元素之后。这条CSS规则将会匹配所有p元素之后ul元素:
p ~ ul { background:#ff0; }
通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。
亟需更好的浏览器支持
部分CSS 3选择符已经被广泛支持。但是,大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它,你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。
[附件]CSS3选择符在现在浏览器(Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27)中的支持程度(dudo验证,请指正!)
_________________IE 7________IE8________FF2_________FF3______Opera9.27
E[foo^="bar"]______Y__________Y__________Y__________Y__________Y
E[foo$="bar"] ______Y__________Y__________Y__________Y__________Y
E[foo*="bar"] ______Y__________Y__________Y__________Y__________Y
E:root____________ N__________N__________Y__________Y__________Y
E:nth-child()_______ N__________N__________N__________N__________N
E:nth-last-child()____ N__________N__________N__________N__________N
E:nth-of-type()_____ N__________N__________N__________N__________N
E:nth-last-of-type()__ N__________N__________N__________N__________N
E:last-child_________ N__________N__________Y__________Y__________N
E:first-of-type______ N__________N__________N__________N__________N
E:only-child________ N__________N__________Y__________Y__________Y
E:only-of-type______N__________N__________N__________N__________N
E:empty__________ N__________N__________Y__________Y__________N
E:target___________N__________N__________Y__________Y__________N
E:enabled_________ N__________N__________Y__________Y__________Y
E:disabled_________ N__________N__________Y__________Y__________Y
E:checked_________N__________N__________N__________N__________Y
::selection_________N__________N__________N__________N__________N
not()_____________N__________N__________Y__________Y__________Y
E ~ F_____________Y__________Y__________Y__________Y__________Y


猜你喜欢
- 本文将介绍如何使用公司运行服务器进行开发调试,以及使用远程服务器python解释器,整理了对应的配置流程。进入配置页面Pycharm菜单栏,
- 前言最近整理图片发现,好多图片都非常相似,于是写如下代码去删除,有两种方法:注:第一种方法只对于连续图片(例一个视频里截下的图片)准确率也较
- 1、顺序表介绍顺序表是最简单的一种线性结构,逻辑上相邻的数据在计算机内的存储位置也是相邻的,可以快速定位第几个元素,中间不允许有空,所以插入
- 简介canvas 是HTML5 提供的一种新标签,它可以支持 JavaScript 在上面绘画,控制每一个像素,它经常被用来制作小游戏,接下
- 在前文说过,如果想要更好的做接口测试,我们要利用自己的代码基础与代码优势,所以该章节不会再介绍商业化的、通用的接口测试工具,重点介绍如何通过
- 本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下实现代码:<!DOCTYPE html><h
- 可试试下面这个方法,但要保证在FORM中使用的Input Name都和数据库中使用的是一样的:upfiles.asp<% &
- 本文以YOLOv5-6.1版本为例一、Add1.在common.py后加入如下代码# 结合BiFPN 设置可学习参数 学习不同分支的权重#
- 本文实例讲述了python读写ini配置文件方法。分享给大家供大家参考。具体实现方法如下:import ConfigParserimport
- sys模块 与 os包一样,也是对系统资源进行调用。功能同样也是非常丰富,接下来我们会对 sys模块的一些简单且常用的函数进行介绍,主要针对
- 使用python3调用wxpy模块,监控linux日志并定时发送消息给群组或好友,具体代码如下所示:#!/usr/bin/env pytho
- 最近用到了mysql5.7的json字段的检索查询,发现挺好用的,记录一下笔记我们有一个日志表,里面的data字段是保存不同对象的json数
- 值得庆幸的是,我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组: var args = Array.prot
- open 遍历一个大日志文件使用 readlines() 还是 readline() ?总体上 readlines() 不慢于python
- Tangram官方网站。http://tangram.baidu.com/tangram/围观社区:简易社区,直接使用tieba。反馈的信息
- 本文实例讲述了python计算方程式根的方法。分享给大家供大家参考。具体实现方法如下:''' roots = pol
- 对于时间数据,如2018-09-25 09:28:59,有时需要与Unix时间戳进行相互的运算,此时就需要对两种形式进行转换,在Python
- 如下所示:dicFile = open('train_1.txt', 'r')
- 1、查看死锁1)用dba用户执行以下语句select username,lockwait,status,machine,program fr
- 前几天图书馆说服务器(Ubuntu14.04)有安全漏洞,不按时修复会关停。看了一下漏洞清单,主要是ssh和mysql的版本问题。把mysq