<!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>