css选择器以及权重问题
2015-11-02 16:58
267 查看
css选择器 【The selector】
1 css基础选择器
通用兄弟选择器E ~ F
通用兄弟元素选择器是CSS3新增加一种选择器,用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似,但不同于前者只是选择相邻的后一个元素,而通用兄弟元素选择器是选择所有元素。
▲ 将会选择h1元素后面的所有的兄弟元素p
2 css属性选择器
3 伪类选择器
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
权重 【】
CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
css特殊性分为4个等级,每个等级代表一类选择器,4个等级的定义如下:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#main,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div ,权值为1。
总而言之:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
简洁、高效的CSS
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:
◆不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
◆不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同上
◆尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}
◆使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}
关于媒介查询
估计很多人在响应式的网站CSS很经常看到类似下面的这段代码:
这个应该算是一个media的一个标准写法,上面这段CSS代码意思是:当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。
应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:
1 css基础选择器
$("#home") $(".slide") $("ul li a") $(".box > h2") $("span.sex")
通用兄弟选择器E ~ F
通用兄弟元素选择器是CSS3新增加一种选择器,用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似,但不同于前者只是选择相邻的后一个元素,而通用兄弟元素选择器是选择所有元素。
h1 ~ p { margin-top:5px; }
<div> <h1>标题</h1> <p>内容</p> <p>内容</p> <p>内容</p> </div>
▲ 将会选择h1元素后面的所有的兄弟元素p
2 css属性选择器
$("input[type]") //具有type属性的input $("input[type="text"]") $("height=20px") $("a[href^='http://']") // 以http开头的http $("img[src $='jpg']") // 以 jpg结尾的img $("input *=name") //包含name属性的input
3 伪类选择器
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
权重 【】
CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
<section id="main" class="sex" > <p style="border:none;"></p> </section>
css特殊性分为4个等级,每个等级代表一类选择器,4个等级的定义如下:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#main,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div ,权值为1。
#nav .navs ul li a span.other // 100 10 1 1 1 1 10 权重是124
总而言之:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
简洁、高效的CSS
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:
◆不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
◆不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同上
◆尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}
◆使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}
关于媒介查询
估计很多人在响应式的网站CSS很经常看到类似下面的这段代码:
@media screen and (max-width: 960px){ body{ background: #000; } }
这个应该算是一个media的一个标准写法,上面这段CSS代码意思是:当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。
应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:
@media (max-width: 960px){ body{ background: #000; } }
相关文章推荐
- css sprites 多张图片整合在一张图片上
- css 水平垂直居中
- css实现锯齿形 圆形边框
- CSS如何让DIV的宽度随内容的改变而改变
- CSS的嵌套方法
- ArcMap无法创建新样式,或将符号添加到样式
- oocss ; LESS;SASS
- CSS hack:针对IE6,IE7,firefox显示不同效果
- css画个三角形,可旋转
- PHP动态压缩js,css
- 不同tab下的列表长度不同,tab的样式和底部的位置不同
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- 纯CSS装饰画(给图片加画框)
- Div样式查看器
- css 改变scroll样式
- css布局--居中
- Html+Css_利用img 的usemap属性 和 map 以及 area(list) 对图像敏感区域定位
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- css3动画模块transform transition animation属性解释