css3——属性选择器

lE[attr]只使用属性名,但没有确定任何属性值

lE[type="text"]指定属性名,并指定了该属性的属性值

lE[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写

lE[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的

lE[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的

lE[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value

lE[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

l备注:IE7及以上支持;

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;}
p[num]{border:1px solid #ccc;}
p[num=fifth]{color:#999;}
p[num~=one]{color:#cc1c1c;}
p[num^=s]{background:pink;}
p[num$=d]{color:red;}
p[num*=c]{padding-left:20px;}
p[num|=fifth]{background:green;}
</style>
</head>
<body>
    <p num="first one">111111</p>
    <p num="second">22222</p>
    <p num="third">333333</p>
    <p num="forth">444444</p>
    <p num="fifth">555555</p>
    <p num="fifth-five">555555</p>
</body>
</html>
时间: 2024-08-02 06:59:46

css3——属性选择器的相关文章

CSS3属性选择器详解

上一章在<CSS3基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用属性名,但没有确定任何属性值: E[attr="

CSS3属性选择器详解 及 双色球实战开发

在前面的章节中,我们了解了,可以使用行内样式,ID选择器,类选择器,以及标签选择器来给一个元素应用样式. 如果我们想给定义了那些都定义了某一个属性的元素应用样式,这个时候我们该怎么做呢? 这一节中,我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器. 双色球案例: 大家都知道,双色球共有7个球,6个红球,1个蓝球.首先我们先在页面上面定义7个span标签: <!DOCTYPE html> <html> <head> <meta charset=

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; } css3的子字符串匹配属性选择器 (1)‘匹配开头’的属性选择器依法如下: Element[attribute^="value"],实例代码如下: img[alt^

css3属性选择器总结

前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com/thomascui/p/5252805.html 以字符串开头对比实例讲解链接:http://www.cnblogs.com/thomascui/p/5241229.html 现在将css3中剩余的属性选择器做个简单介绍: 1. [attribute]与[attribute=value]没什么特殊

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. [att=val] 指

css3属性选择器,兄弟选择器,伪类选择器

属性选择器 css3语法(类似于正则) 属性选择器:属性是相对于标签而言. 所谓属性选择器就是根据指定名称的属性的值来查找元素 /*1.E[attr]:查找指定的拥有attr属性的E标签.如查找拥有style属性的li标签*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签.如想查找拥有class属性并且值为Red的li标签   =是严格匹配*/ li[class=re

css3属性选择器

语法: 1 元素[attr^="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val开头的任意字符串 */ 2 元素[attr$="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val结尾的任意字符串 */ 3 元素[attr*="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值任意位置包含了val */ html代码: 1 <a href="" cla

css3——属性选择器(二)

E:nth-child(n)  表示E父元素中的第n个字节点 •p:nth-child(odd){background:red}/*匹配奇数行*/ •p:nth-child(even){background:red}/*匹配偶数行*/ •p:nth-child(2n){background:red} •p:nth-child(2n+1){background:blue} E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算 E:nth-of-type(n)  表示E

css3 属性选择器加伪类选择器一起使用

先看代码,以下代码是可以工作,这里记录下实现机制. <!DOCTYPE html> <html> <head> <style> p[class="a1"]:nth-of-type(5) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p class="a1">第一个段落.