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元素
时间： 2024-10-13 15:33:41

CSS3中的属性选择符的相关文章

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来

css3中opacity属性学习与实践

css3中opacity属性是如何使用的呢:<length> inherit length:由浮点数字和单位标识符组成的长度值0到1.不可为负值.默认值为:1 . 此标签的作用是声明一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的.1到0之间的任何值都表示该元素的透明程度. 兼容:Firefox 3.0.10 .Chrome 2.0.x.Opera 9.64..Safari 4.Firefox 3.5 目前较老的Firefox版本,我们需要使用

ECMAScript 5中的属性描述符详解

 这篇文章主要介绍了ECMAScript 5中的属性描述符详解,本文讲解了Object.defineProperty.数据描述符.存取描述符.获取属性描述符.对象控制等内容,需要的朋友可以参考下     属性描述符是ES5中新增的概念,其作用是给对象的属性增加更多的控制. Object.defineProperty 要研究属性描述符,首先要谈谈 Object.defineProperty 方法.这个方法的作用是给对象定义新属性或修改已存在的属性.其原型如下: 代码如下: Object.defin

JQUERY的属性选择符和自定义选择符使用方法（二）_jquery

例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY

ECMAScript 5中的属性描述符详解_基础知识

属性描述符是ES5中新增的概念,其作用是给对象的属性增加更多的控制. Object.defineProperty 要研究属性描述符,首先要谈谈 Object.defineProperty 方法.这个方法的作用是给对象定义新属性或修改已存在的属性.其原型如下: 复制代码 代码如下: Object.defineProperty(obj, prop, descriptor) 使用示例: 复制代码 代码如下: var obj = { }; Object.defineProperty(obj, 'attr

css3中box-sizing属性用法详解

我们经常会遇到一个父级的div有1px的边框而且还需要100%的宽度,这个时候在火狐和chrome与一些新的ie浏览器会出现超出的现象! 我们也遇到一个ul里边4个li,每个li需要给个边框和padding,这时候我们最快的方法是每个li的width='25%',但是实际出来的效果确实把ul撑开了 如上两个简单的实际情况我想大家都遇到过,我们都希望我们给的宽包含border和padding这两个属性,今天我们能够实现了,box-sizing这个属性能让我们心想事成,随心所欲!下面我和大家分享下b

CSS3中Animation属性的使用详解

  在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧",玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个"Keyframes"是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说

CSS3中clip-path属性和元素使用方法

根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素.问题是,至少要解决响应式问题,并且响应式并不完全可控的. 了解CSS属性:clip-path clip-path 是工作草案的一部分,它是一个通过屏蔽和裁减来隐藏元素的一部分的工具.尽管clip-path没有被主流的浏览器支持(包括IE和Firefox),但在web

css3中transform属性实现平移与变形

0×1.元素平移 让元素在页面显示中产生位移有很多方法,可以利用块状元素合模型,也可以利用相对和绝对坐标,这一小节给大家介绍css提供的两个元素移动属性:vertical-align和transform:transform为css3标准提供的新属性. a.内联元素垂直平移 内联元素的平移遵循下面的法则: 默认情况下,元素移动,负值往下,正值往上: 如果默认基线在上面,用负数: 如果默认基线在下面,用正值: 下面用一个实例来演示上面这三条法则: <!DOCTYPE html> <html