CSS选择器总结
2015-09-03 18:56
701 查看
前言
做过前端开发的程序员几乎都对CSS选择器或多或少了解些,因为大家几乎都是按照HTML–CSS–JS的顺序来学习。当然,即使你是”半路出家“,直接上手JS的,那你也至少了解ID,类与标签。而本文就对CSS选择器简单做个总结,主要是起到巩固基础的作用。选择器
选择符是指一条CSS样式规则的最左边部分,总的可分为五大类十八种。并联选择器:即群组选择器,即以“,”合并多个分组结果
简单选择器:标签,ID,类,属性,通配符
关系选择器:即派生选择器,亲子,后代,相邻,兄长
伪类选择器:动作伪类,目标伪类,语言伪类,状态伪类,结构伪类,取反伪类
伪元素选择器:这个比较具体点,仅指以下几种。
::before(:before) ::after(:after) ::first-line(:first-line) ::first-letter(:first-letter) ::selection
并联选择器
并联选择器即群组选择器,以”, “分割,这个没什么好说的。简单选择器
简单选择器分为上面列的五种,其中,通配符选择器即”*”,最简单的避免浏览器内置样式表的影响的方式就是使用该选择器,* { margin: 0; padding: 0;},这里主要说下属性选择器:具体可参考之前的文章CSS各属性选择符区别
ps:如果浏览器不支持getElementsByClassName,我们可以将”div.test”转换
div[class~=test]来处理。
关系选择器
亲子选择器”div > p” 选择作为div元素子元素的所有p元素后代选择器”div p” 选择div元素所有后代元素中的p元素,由此可知,后代选择器的范围大于亲子选择器
相邻选择器”h1 + p” 选择和h1元素同级且紧接在h1后面出现的p元素,元素h1和元素p拥有共同的父元素
兄弟选择器”h1 ~ p” 选择和h1元素同级且在h1后面出现的所有p元素,元素h1和元素p拥有共同的父元素
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 + p {color: #ff0000;} h2 ~ p {color: #00ff00;} </style> </head> <body> <p>This is paragraph.</p> <h1>This is a h1.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <h2>This is a h2.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body> </html>
伪类选择器
1.动作伪类::link :hover :focus :hover :active
:focus伪类一般用于input标签,如果用于a标签,则只在使用键盘tab命令选中时实现效果。而其余四个用于a标签要保证“Love-Hate”的顺序。
2.目标伪类:
:target,指其id或者name属性与URL中的hash部分(即#之后的部分)匹配上的元素。
3.语言伪类:
:lang用来设置使用特殊语言的内容样式。另外,lang虽然作为DOM元素的一个属性,但:lang伪类与属性选择器有所不同,具体表现为:lang伪类具有”继承性“。
<body lang='de'><p>something</p></body>
如果使用[lang=de]则只能选择到body元素,因为p元素没有lang属性。但是使用:lang(de)则可以同时选择到body元素和p元素,表现出继承性。
4.状态伪类:
:checked :enabled :disabled :indeterminate
前三个都好理解,最后一个:indeterminate可参考MDN上说名。即,用于多选框中的input元素切在js中设置了其DOM属性indeterminate为true.而且也可用于匹配那些不确定的
<progress>进度条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input, span { background: blue; } :indeterminate, :indeterminate + span { background: red; } </style> </head> <body> <input type="checkbox"><span>China</span> <script type="text/javascript"> document.getElementsByTagName("input")[0].indeterminate = true; </script> </body> </html>
5.结构伪类:
:root用于选取根元素,在HTML文档中通常是html元素
:nth-child() :nth-last-child()是所有子元素过滤伪类的蓝本,其他8种都是有它衍生出来的。带有参数,可以是纯数字、代数式或单词。如果是纯数字,数字是从1计起,如果是代数式,n则从零递增。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li { border: 1px solid limegreen; } li:nth-child(2) { background: #ccc; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
:nth-of-type() :nth-of-last-type()与nth-child类似,规则是将当前元素的父节点的所有元素按照tagName分组,只要参数符合它在那一组的位置就被匹配到。
:first-child用于选择第一个子元素,效果等同于
:nth-child(1)
:last-child效果等同于
:nth-last-child(1)
:first-of-type :last-of-type效果等同于
:nth-of-type(1) :nth-last-of-type(1)
:only-child用于选择唯一的子元素,当子元素个数超过1个时,选择器失效
:only-of-type将父节点的子元素按tagName分组,如果某一组只有一个元素,那么就选择这些组的元素返回。
:empty用于选择那些不包含任何节点的元素,但允许里面包含注释。
6.取反伪类:
:not()其参数为一个或多个简单选择器,里面用逗号隔开。
选择器权重
简单的权重记忆口诀:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类选择器+10,一个元素名或者伪元素+1。具体可参考:你应该知道的一些事情——CSS权重
相关文章推荐
- CSS元素定位--浮动(float)与清楚(clear)
- 纯css 图片自适应居中
- position的四个属性值: relative ,absolute ,fixed,static
- 超链接的一些常规CSS设置
- CSS3:box-sizing 怪异盒模型
- 用css画的各种形状
- CSS布局:上中下三栏自适应高度
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS重置代码
- CSS3中的字体rem
- CSS属性
- 纯CSS3制作皮卡丘动画壁纸
- Html和CSS的关系
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
- css优先级机制
- CSS 参考手册
- 前端入门之css浮动
- 通过样式表超出长度的文字自动截取
- CSS绘制三角形
- css选择器笔记