CSS3选择器。
基础选择器
*通配选择器选中所有,不建议使用
E 元素选择器,在rest.css 经常用到,用与将各个浏览器元素默认样式统一
#id ID选这器
.class 类选择器
Selector,selectorN 群租选择器。
以上的我们比较常用,而且所有浏览器都支持的css选择器。
层次选择器 css 最新版本 IE 必须 7+ 以上特殊的选择器语法
1. E F 后代选择器 所有浏览器都支持,但是不建议层级过深,最好不要超过3级。如果超请使用 Eclass_Fclass 的命名,提升css执行效率
执行效果是所有匹配E元素中包含的所有元素F 返回的是F
Css 中
.E .F{background:#000}
Html呈现
<div class=”E” >
<div class=”F” title=”我被设置成了黑色”></div>
<div class=”F” title=”我被设置成了黑色”>
<divclass=”F” title=”我被设置成了黑色”></div>
<p class-=”F” title=”我被设置成了黑色”></p>
</div>
</div>
2. E>F 子选择器 IE 7 以上, 360兼容模式也行
Css 中
.E> .F{background:red }
Html呈现
<div class=”E” >
<div class=”F” title=”我被设置成了红色”></div>
<div class=”F” title=”我被设置成了红色”>
<divclass=”F” title=”我是后代元素,不是子元素我不会变成红色”></div>
<p class-=”F” title=”不是子元素我不会变成红色”></p>
</div>
</div>
3. E+F 相邻兄弟选择器
.E+div{background: lime}
<div class="view">
<div class="F" title="我不是被选中的"></div>
<div class="E"></div>
<div class="F" title="啦啦啦我是被选中的"></div>
<div class="F" title="我不是被选中的"></div>
</div>
4. E~F 通用兄弟选择器
.E~div{background: lime}
<div class="view">
<div class="F" title="我不是被选中的"></div>
<div class="E"></div>
<div class="F" title="啦啦啦我是被选中的"></div>
<div class="F" title="啦啦啦我是被选中的"></div>
</div>
伪类选择器
锚点遵守 爱恨原则 Love/HAte
link-visited-hover-active;
焦点
focus 主要用于input
以上伪类寻找器 hover active focus 是任何元素都可以使用的。
具体如何使用
请参考 bootstrap的表单源码,仔细阅读
此处针对伪类我做了一个简单的手风琴效果。
源码,如下 伪类的选择器支持IE8+ 和其他最新主流浏览器, 360不算。这个太坑。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>垂直手风琴</title> <link herf="../rest.css" rel="stylesheet" type="text/css"> </head> <style type="text/css" > .accoridonMenu{ background: #fff; color:#424242; font:12px Arial,verdana,sans-serif; margin: 0 auto; padding: 10px; width: 300px; } .accoridonMenu h2 { margin: 5px 0; position: relative; } .accoridonMenu h2:before{ /*制作向下的三角*/ border-width:5px; border-style: solid; border-color:#fff transparent transparent transparent; content:""; height:0; position:absolute; right: 10px; top: 15px; width:0 } .accoridonMenu h2 a{ /*制作手风琴标题栏效果*/ background: #8f8f8f; background: -moz-linear-gradient( top, #cecece,#8f8f8f); background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f)); backgorund:-webkit-linear-gradient(top,#cecece,#8f8f8f); background: -o-linear-gradient(top,#cecece,#8f8f8f); background: linear-gradient( top,#Cecece,#8f8f8f); border-radius:5px; color:#424242; display: block; font-weight: normal; padding: 10px 10px; text-shadow: 2px 2px 2px #aeaeae; text-decoration:none; } .accoridonMenu :target h2 a, .accoridonMenu h2 a:hover, .accoridonMenu h2 a:focus, .accoridonMenu h2 a:active { background: #2288dd; background: -moz-linear-gradient(top, #6bb2ff, #2288dd); background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd)); backgorund: -webkit-linear-gradient(top, #6bb2ff, #2288dd); background: -o-linear-gradient(top, #6bb2ff, #2288dd); background: linear-gradient(top, #6bb2ff, #2288dd); color:#fff; } .accoridonMenu p { /*标题丽 对应内容*/ height: 0; padding: 0 10px; -moz-transition: height 0.5s ease-in; -webkit-transition: height 0.5s ease-in; -o-transition: height 0.5s ease-in; transition: height 0.5s ease-in; } .accoridonMenu p span{display: none} .accoridonMenu :target p{ height:100px; } .accoridonMenu :target p span{ display: block; } .accoridonMenu :target h2:before{ border-color: transparent transparent transparent #fff; } </style> <body> <div class="accoridonMenu"> <div class="menuSection" id="brand"><h2><a href="#brand">Brand</a></h2> <p><span>Lorem ipsum dolir sit</span> </p> </div> <div class="menuSection" id="promotion"><h2><a href="#promotion">promotion</a></h2> <p><span>Lorem ipsum dolor sit amet</span> </p> </div> <div class="menuSection" id="event"><h2><a href="#event">event</a></h2> <p><span>Lorem ipsum dolor sit amet</span></p> </div> </div> </body> </html>CC3 还有其他选择器,如 q元素应用与不同语言版本的引用风格设置
CSS3中的结构伪类选择器,这一个是重点下一次我单独再讲。