css_权威指南_选择符

<!DOCTYPE html>
<html>
    <head>
        <title>css_权威指南_选择符</title>
        <style>
            .warning{ /*共同属性*/
                
                background: red;
            }
            p.urgent{
                font-weight: bold; /*第一个类样式加粗*/
            }
            p.newstyle{
                height: 1.5em;
                font-size: 1.5em;
            }
            .urgent.warning{
                font-size: 1.5em; /*把两个类选择符串在一起，选择的是同时具有两个类名的元素，而且对类名的顺序没有要求。*/
            }
            
            h3[class], h3[class]{
                background: purple; /*将拥有同class属性的元素背景色设为紫色*/
            }
            a[href][title]:hover{
                color: red; /*当拥有多个属性的元素，可以基于多个属性进行选择，参照以上写法*/
            }
            h3[class="type-3"]:first-letter{
                background: green;
                font-size: 1.5em;
            }
            h4[lang|="en"]{
                background: yellow;
            }
            h4[lang~="sss"]{
                background: orange;
            }
            h4[lang*="xx"]{
                background: blue;
            }
            div ul{ /*如果从右往左读，空格连接符可以理解为'在内部' '是其一部分' 或者 '是其后代'
            从左往右读的话，可以理解为div 下所有 ul 元素的样式*/
                marginq: 0;
                padding: 0;
            }
            ul > li { /*直接子后代作用样式， ul 直接包含li*/
                color: red;
                padding: 4px;
            }
            ul + p { /*兄弟元素作用样式*/
                background: lightgreen;
                line-height: 2em;
            }
        </style>
    </head>
    <body>
        
        /*Section_1_多个类*/
        <p class="urgent warning">水水水水水水水水水水水水水水水水sdjlkfsdsdlkfjkjsdlfsdf<span class="warning">sldjflskdjfsdfsd</span></p>/*当有共同属性时，而且存在继承结构的情况
        下，要考虑样式的继承的特性，正因为样式可以继承，共同样式的写法是需要考虑在内的*/
        <p class="newstyle warning">sdflkjsdfkjlsdjlkfjlksdjflkjslkdjflksjdkfffffffdf</p>
        <hr/>
        /*Section_2_属性选择器*/
        <h3 class="type-1">撒地方烦烦烦发射点发射点发射点发射点发</h1>
        <h3 class="type-2">是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</h2>
        <a href="http://www.baidu.com" title="hellow baidu！">百度一下</a>
        
        /*Section_3_根据精准属性进行选择*/
        <h3 class="type-3">我要根据精准属性来选择</h3>
        
        /*Section_4_根据部分属性值来选择*/
        <pre>
            R:
                [foo|="bar"] 选择元素有foo属性，且其值以bar和一个英文破折号开头，或者值就是bar本身
                [foo~="bar"] 选择的元素有foo属性，且其值是包含bar这个词的一组词
                [foo*="bar"] 选择的元素有foo属性，且其值包含字串bar， 与"~"的却别比较明显，一个是针对的是"词"是完整的，一个是"字符串"存在包含关系
                [foo^="bar"] 选择的元素有foo属性，且其值以bar开头
                [foo$="bar"] 选择的元素有foo属性，且其值以bar结尾
                
        </pre>
        <h4 lang="en-us">手动阀手动阀手动阀手动阀</h4>
        <h4 lang="en">sdfsdfsdfsdfdsfewfwe</h4>
        
        <h4 lang="ua-ss sss">sdfsdfsdddddddddddddddd</h4>
        <h4 lang="ua-xx xxx">sddddddddddfsdfffffffffffffff</h4>
        /*Section_5_根据文档结构选择*/
        <div>
            <ul>
                <li>abc</li>
                <li>def</li>
                <li>hijk</li>
            </ul>
            <p>有些事情注定要在回忆里。。。</p>
            <p>有些事情注定要在回忆里。。。</p>
        </div>
    </body>
</html>
css_权威指南_选择符

猜你喜欢
