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