css 3 基础选择器。

最新推荐文章于 2022-10-19 11:55:52 发布

web前端执行者

最新推荐文章于 2022-10-19 11:55:52 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/zhxh0376/article/details/61192112

版权

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

web前端执行者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 3 基础选择器。

CSS3选择器。基础选择器*通配选择器选中所有，不建议使用E 元素选择器，在rest.css 经常用到，用与将各个浏览器元素默认样式统一#id ID选这器.class 类选择器Selector，selectorN 群租选择器。以上的我们比较常用，而且所有浏览器都支持的css选择器。层次选择器 css 最新版本 IE 必须 7+ 以上特殊的选择器语法1
复制链接

扫一扫