css 3 基础选择器。

来源：互联网发布：淘宝菲艺轩怎么样编辑：程序博客网时间：2024/05/01 00:37

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呈现

<divclass=”F” title=”我被设置成了黑色”></div>

</div>

2. E>F 子选择器 IE 7 以上， 360兼容模式也行

Css 中

.E> .F{background:red }

Html呈现

<divclass=”F” title=”我是后代元素，不是子元素我不会变成红色”></div>

</div>

3. E+F 相邻兄弟选择器

.E+div{background: lime}

4. E~F 通用兄弟选择器

.E~div{background: lime}

伪类选择器

锚点遵守爱恨原则 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中的结构伪类选择器，这一个是重点下一次我单独再讲。

0 0