css3学习笔记-css3选择器
来源:互联网 发布:淘宝 饰品店 利润 编辑:程序博客网 时间:2024/04/28 03:49
属性选择器
- E[attr]属性选择器
- E[attr=val]属性选择器
- E[attr|=val]属性选择器
- E[attr~=val]属性选择器
- E[attr*=val]属性选择器
- E[attr^=val]属性选择器
- E[attr$=val]属性选择器
css代码
ul, li{ margin: 0; padding: 0; } li{ list-style: none; }
html代码
<ul> <li class="linksitem" id="test_1">aa</li> <li class="links tx">bb</li> <li class="bd links" data-index="3">cc</li> <li class="links" id="test_4">dd</li> <li class="links-last">ee</li></ul>
下面运用上面的7中属性选择器来进行筛选
E[attr]:只要含有attr属性的元素就会被选中。
li[id]{ background-color: #008000; }
如上图,第一个和第四个被选中。
也可以对一个元素使用多个属性选择器
li[data-index][class]{ background-color: #008000; }
E[attr=val]:含有attr属性并且属性值为val。
li[class="links tx"]{ background-color: #008000; }
需要注意的是:当属性等于单个值时,引号可以省略,就像这样的li[class=links]。当属性值不是单个值时,引号不能省略,必须像这样的li[class=”links tx”]
E[attr|=val]:属性值等于val或则是以val-开头的才会被选中
li[class|=links]{ background-color: #06c; }
E[attr~=val]:当一个属性的值是以空格分隔的多个值并且其中一个值等于val时就会被选中
li[class*=links]{ background-color: #06c; }
E[attr*=val]:只要属性attr的任意位置含有”val”就会被选中。
li[class*=links]{ background-color: #06c; }
E[attr^=val]:只要属性attr的值是以val开头的就会被选中。
E[attr$=val]:只要属性attr的值是以val结尾的就会被选中。
伪类选择器
- :nth-child(n)
- :nth-last-child(n)
- :first-child
- :last-child
- :nth-of-type(n)
- :nth-last-of-type(n)
- :first-of-type
- :last-of-type
- :only-child
- :only-of-type
- :empty
html代码
<div class="selector"> <h1>标题1</h1> <h2>标题2</h2> <p>我是第一段文本</p> <p>我是第二段文本</p></div>
下面运用上面的伪类选择器来选择元素
上面选择器中的n,都是从1开始,而不是从0开始。也可以是even,odd等关键字。还可以是(-n+5),(2n+1)等表达式,但需要注意的是,表达式中的变量只能写为n,不能是其他的变量。如x,y等变量,那么是错的。
:nth-child(n),选中一个父元素下面的第n个子元素
:nth-last-child(n),选中一个父元素下面的倒数第n个子元素
:first-child,选中一个父元素下面的第一个子元素
:last-child,选中一个父元素下面的最后一个子元素
:nth-of-type(n):选中一个父元素下面的第n个子元素,并且该元素是你指定的类型。
.selector > p:nth-of-type(2){ color: #06c; }
上面的选择器会选中class为selector下面的第二个p元素。
:nth-last-of-type(n):选中一个父元素下面的倒数第n个子元素,并且该元素是你指定的类型。
.selector > p:nth-last-of-type(1){ color: #06c; }
:first-of-type,选中父元素内具有指定类型的第一个元素,与:nth-of-type(1)等同。
.selector > p:first-of-type{ color: #06c; }
:last-of-type,选中父元素内具有指定类型的最后一个子元素,与:nth-of-last-type(1)等同。
:only-child,选中一个父元素下面的唯一的一个子元素。
.selector > p:only-child{ color: #06c; }
只有当selector下面仅有唯一的一个p元素是,该选择器才起到了最用。
:only-of-type,这个选择器不好理解,可以这样理解。
表示一个元素有很多个子元素,而其中某一个元素的类型是唯一的,那么该元素就会被选中。
.selector > p:only-of-type{ color: #06c; }
因为selector下面有很多子元素,但是p类型的子元素只有一个,所以该元素会被选中。
:empty,用来选择没有任何内容的元素,这里的“没有任何内容“指的是一点内容都没有,哪怕是一个空格。这个选择器用户处理动态输出内容非常方便。例如想高亮提示用户搜索出来的结果为空时,就可以这样使用
#result:empty{ backgound-color: #fcc;}
- css3学习笔记-css3选择器
- CSS3学习笔记-选择器
- CSS3选择器学习笔记
- CSS3学习笔记-选择器
- CSS3+Html5学习笔记之CSS3多类选择器
- Css3学习笔记(一):选择器篇
- CSS3学习笔记之(三)选择器
- CSS3学习笔记 之 基本选择器
- CSS3学习笔记 之 层次选择器
- CSS3学习笔记 之 属性选择器
- CSS3学习笔记之属性选择器(上)
- CSS3学习笔记之属性选择器(下)
- css3基础笔记-选择器
- html5学习-CSS3-选择器
- CSS3学习----选择器、字体
- 学习笔记---css3选择器与jquery选择器大促
- CSS3选择器、CSS3圆角
- CSS3学习之选择器篇
- Qt获取路径
- Ajax跨域访问
- OpenCV:特征点检测与图像匹配
- 分析system_call中断处理过程
- 【BZOJ1022】[SHOI2008]小约翰的游戏John【Anti-Nim】
- css3学习笔记-css3选择器
- UIApplicationDelegate分析小结
- select语句的高级应用及实例
- Spring的@Component注解的使用
- JAVA之接口与抽象类详解
- 搭车系统 Server端
- Scala : 面向表达式
- QML--学习第一篇
- JDK源码阅读——Map(HashMap\TreeMap\LinkedHashMap)