Tan's-Blog

1 .CSS3中属性选择器

选择器（Selector，也译为选择符）是W3C在CSS 3工作草案中独立引入的一个概念（请参阅http://www.w3.org/TR/css3-selectors/）。实际上，在CSS 1和CSS 2已经非系统性地定义了很多常用选择器，这些选择器基本上能够满足Web设计师常规的设计需求。

属性选择器	说明
E[attr]	只使用属性名，但没有确定任何的属性值
E[attr="value"]	指定属性名称，并指定了该属性的属性值
E[attr~="value"]	指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value值。
E[attr^="value"]	指定了属性名，并且有属性值，属性值是以value开头
E[attr$= "value"]	指定了属性名，并且拥有属性值，而且属性值是以value结束的
E[attr*= "value"]	指定了属性名，并且有属性值，而且属性值包含了value
E[attr I = "value"]	指定了属性名，并且属性值是value或者以”value-”开头的指(zh-cn)

CSS 3遵循了惯用的编码规则，选用了^、 $和*这3个通用匹配运算符，其中，^表示匹配起始符，$ 表示匹配终止符，* 表示匹配任意字符，使用它们更符合编码习惯和惯用编程思维。

浏览器兼容情况

练习1. 百度文库图标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            百度文库图标
        </title>
        <style>
            p{
                height: 40px;
                line-height: 40px;
                border: 1px solid black;
            }
            p a{
                font-size: 12px;
                font-family: "微软雅黑";
                background: url(img/ppt.gif) no-repeat;
                padding-left: 20px;
            }
            p a[href*=doc]{
                background: url(img/w.gif) no-repeat;
            }
            p a[href*=text]{
                background: url(img/text.gif) no-repeat;
            }
        </style>
    </head>
    <body>
        <p>
            <a href="http//:www.xiandai.com/doc/javascript.html">doc</a>
        </p>
        <p>
            <a href="http//:www.xiandai.com/ppt/javascript.html">ppt</a>
        </p>
        <p>
            <a href="http//:www.xiandai.com/text/javascript.html">text</a>
        </p>
        <p>
            <a href="http//:www.xiandai.com/ex/javascript.html">Ex</a>
        </p>
    </body>
</html>

2. CSS3中结构伪类选择器

结构伪类(Structural pseudo-classes) 是CSS 3新增的类型选择器。顾名思义，结构伪类就是利用文档结构树（DOM）实现元素过滤，也就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对class属性和I D属性的定义，使得文档更加简洁。

结构伪类选择器	说明
E:nth-child(n)	表示E父元素中的第n个子节点且节点类型是E, p:nth-child(odd):匹配奇数行, p:ntn-child(even):匹配偶数行,p:nth-child(2n):匹配2的倍数
E:nth-last-child(n)	表示E元素中的第n个子节点且节点类型是E，从后往前计算
E:nth-of-type(n)	表示E父元素中E元素的第n个子节点
E:empty()	表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child	表示E元素中的第一个子节点
E:last-child	表示E元素中的第二个子节点
E:first-of-type	表示E父元素中E元素的第一个子节点
E:last-of-type	表示E父元素中最后一个子节点且节点类型是E
E:only-child	表示E父元素中只有一个子节点。子节点不包含文本节点
E:only-of-type	表示E的父元素中只有一个子节点，且这唯一的子节点的类型必须是E。子节点不包含文本节点

练习2：新浪的头部导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新浪的头部导航</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: #666;
            }
            .list{
                list-style: none;
            }
            .list li{
                float: left;
                width: 10%;
                text-align: center;
                border-right: 1px solid #ddd;
                padding: 10px;
            }
            .list li a:nth-child(4n+1){
                font-weight: bold;
            }
            .list li:last-child{
                border-right: none;
            }
            .list li a {
                font-size: 12px;
                width: 23%;
                display: inline-block;
            }
            .list li a:hover{
                color: #1E9FFF;
            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>
                <a href="#">新闻</a>
                <a href="#">军事</a>
                <a href="#">社会</a>
                <a href="#">国际</a>
                <a href="#">财经</a>
                <a href="#">股票</a>
                <a href="#">基金</a>
                <a href="#">外汇</a>
                <a href="#">科技</a>
                <a href="#">手机</a>
                <a href="#">探索</a>
                <a href="#">众测</a>
            </li>
            <li>
                <a href="#">体育</a>
                <a href="#">NBA</a>
                <a href="#">英超</a>
                <a href="#">中超</a>
                <a href="#">娱乐</a>
                <a href="#">明星</a>
                <a href="#">电影</a>
                <a href="#">星座</a>
                <a href="#">汽车</a>
                <a href="#">报价</a>
                <a href="#">买车</a>
                <a href="#">新车</a>
            </li>
            <li>
                <a href="#">新闻</a>
                <a href="#">军事</a>
                <a href="#">社会</a>
                <a href="#">国际</a>
                <a href="#">财经</a>
                <a href="#">股票</a>
                <a href="#">基金</a>
                <a href="#">外汇</a>
                <a href="#">科技</a>
                <a href="#">手机</a>
                <a href="#">探索</a>
                <a href="#">众测</a>
            </li>
            <li>
                <a href="#">体育</a>
                <a href="#">NBA</a>
                <a href="#">英超</a>
                <a href="#">中超</a>
                <a href="#">娱乐</a>
                <a href="#">明星</a>
                <a href="#">电影</a>
                <a href="#">星座</a>
                <a href="#">汽车</a>
                <a href="#">报价</a>
                <a href="#">买车</a>
                <a href="#">新车</a>
            </li>
            <li>
                <a href="#">新闻</a>
                <a href="#">军事</a>
                <a href="#">社会</a>
                <a href="#">国际</a>
                <a href="#">财经</a>
                <a href="#">股票</a>
                <a href="#">基金</a>
                <a href="#">外汇</a>
                <a href="#">科技</a>
                <a href="#">手机</a>
                <a href="#">探索</a>
                <a href="#">众测</a>
            </li>
        </ul>
    </body>
</html>

3. UI元素状态伪类选择器

UI元素状态伪类（The UI element states pseudo-classes）也是CSS 3新增的全新类型选择器。其中UI是User Interface（用户界面）的简写，UI设计是指网页的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅是让网页更具个性和品位，还要让网页操作变得便利和简单，充分体现网站的定位和特点。

UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。CSS 3定义了3种常用的状态伪类选择器。

UI元素伪类选择器	说明
E:target	表示当前URL片段的元素类型，这个元素必须是E
E:disable	表示不可点击的表单控件
E:enable	表示可点击的表单控件
E:checked	表示已选中的checkbox或radio
E:first-line	表示E元素中的第一行
E:first-letter	表示E元素中的第一个子符
E::selection	表示E元素在用户选中文字时
E:before	表示E生成内容在E元素之前
E:after	表示E生成内容在E元素后

练习1:target实现选项卡切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>target实现选项卡切换</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
                text-align: center;
                line-height: 100px;
                display: none;
            }
            div:target{
                display: block;
            }
        </style>
    </head>
    <body>
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
    </body>
</html>

练习2: 利用类型为radio实现选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用input类型为radio实现选项卡</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            label{
                float: left;
                width: 50px;
                position: relative;
                margin-right: 5px;
            }
            label input{
                position: absolute;
                left: -500px;
                top: -500px;
            }
            label span{
                float: left;
                width: 50px;
                text-align: center;
                height: 50px;
                line-height: 50px;
                border: 1px solid #ddd;
                cursor: pointer;
            }
            label input:checked~span{
                background: #1E9FFF;
            }

        </style>
    </head>
    <body>
        <label>
            <input type="radio" name="tabs" id="tabs" value="" />
            <span>选项1</span>
        </label>
        <label>
            <input type="radio" name="tabs" id="tabs" value="" />
            <span>选项1</span>
        </label>
        <label>
            <input type="radio" name="tabs" id="tabs" value="" />
            <span>选项1</span>
        </label>
    </body>
</html>

练习5:利用和实现对话框小三角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三角形跟矩形组合成提示框</title>
        <style type="text/css">
            *{
                margin: 100px;
                padding: 0;
            }
            #demo{
                width: 100px;
                height: 100px;
                background-color: #fff;
                position: relative;
                border: 4px solid #000;
            }
            #demo:after,#demo:before{
                border: solid transparent; 
                content: ' '; 
                height: 0; 
                left: 100%; 
                position: absolute; 
                width: 0;
            }
            #demo:after {
                border-width: 14px;
                border-left-color: #fff;
                top: 15px;
            }

            #demo:before {
                border-width: 18px;
                border-left-color: #000;
                top: 11px;
            }
        </style>
    </head>
    <body>
        <div id="demo">

        </div>
    </body>
</html>