CSS选择器
1、后代元素选择器的理解
h1{
color:red;
}
只对 h1 元素中的 em 元素应用样式
h1 em{
color:blue;
}
如：<h1>maoyuanjun<em>zoulingpei</em></h1>
zoulingpei字体为蓝色；maoyuanjun字体为红色。
2、关于继承的理解
例1：
h1{
color:red;
text-decoration: underline;
}
h1 em{
color:blue;
background-color: green;
}
em中继承h1中的样式，如果em中含有h1中的样式，则会覆盖h1中的样式，相当于em中的样式为：
em{
color:blue;
text-decoration: underline;
background-color: green;
}
注意：em只继承h1中可以被继承的样式。
例2：
.main{
margin: 50px auto;
height: 400px;
border: 1px solid red;
}
.childred{
margin: 100px;
border: 1px solid blue;
color:red;
}
</style>
<divid="test" class="main childred">
1111111111
</div>
div包含两个Css类，分别是main和childred，至于main和childred在class里面的先后顺序无关，即class="main childred"和class="childred main"是等价的。但是在style里面的顺序变了的话，就会影响整体的样式，如上面style中childred类排在main类的后面，则div最终的样式如下：
.main {
height: 400px;
}
.childred {
margin: 100px;
border: 1px solid blue;
color: red;
}
合并起来就是
{
margin: 100px;
border: 1px solid blue;
color: red;
height: 400px;
}
childred和mian里面有相同的margin和border样式，但是childred排在main的后面，覆盖了main中的margin和border样式.如果mian放在childred的后面，
<style>
.childred{
margin: 100px;
border: 1px solid blue;
color:red;
}
.main{
margin: 50px auto;
height: 400px;
border: 1px solid red;
}
</style>
最终的样式如下：
{
margin: 50px auto;
height: 400px;
border: 1px solid red;
color: red;
}
main排在childred的后面，覆盖了childred中的margin和border样式.
还有有待理解的：
.main{
margin: 50px auto;
height: 400px;
border: 1px solid red;
}
.childred{
margin: 100px;
border: 1px solid blue;
color:red;
}
.main .childred{
color:green;
}
<divid="test" class="main childred">
111
<div id="test3"class="childred">
333
</div>
</div>
<divid="test1" class="childred">
222
</div>
id为test的DIV样式：
{
margin: 100px;
border: 1px solid blue;
color: red;
height: 400px;
}
id为test1的DIV样式：
{
margin: 100px;
border: 1px solid blue;
color: red;
}
不管是下面的顺序
.main .childred{
color:green;
}
.childred{
margin: 100px;
border: 1px solid blue;
color:red;
}
还是
.childred{
margin: 100px;
border: 1px solid blue;
color:red;
}
.main .childred{
color:green;
}
的顺序，id为test3的DIV样式：
.main .childred {
color: green;
margin: 100px;
border: 1px solid blue;
}
3、后代选择器
例1：
.test{
height: 100px;
border: 1px solid red;
}
div.test{
color: red;
border: 1px solid blue;
}
p.test{
width: 100px;
color: gold;
border: 1px solid green;
}
<divclass="test">
1111
</div>
<pclass="test">22222222</p>
最终DIV的样式为：
{
color: red;
height: 100px;
border: 1px solid blue;
}
最终P的样式为：
{
width: 100px;
color: gold;
border: 1px solid green;
height: 100px;
}
例2：
a:link{
text-decoration: none;
background-color: red;
}
span a:link{
background-color: grey;
}
<spanclass="test"><ahref="#">maoyuanjun</a></span>
<ahref="#">maoyuanjun</a>
最终span中的a的样式为：
{
text-decoration: none;
background-color: grey;
}
外面的a的样式为：
{
text-decoration: none;
background-color: red;
}
4、属性选择器
例1：
a{
color: red;
text-decoration: none;
}
//对有 href 属性的锚（a 元素）应用样式
a[href]{
color: blue;
}
//将同时有 href 和 title 属性的 HTML 超链接的文本设置为green
a[href][title]{
color: green;
}
<a>maoyuanjun</a>
<ahref="#">maoyuanjun</a>
<ahref="#" title="mao">maoyuanjun</a>
注意：属性与属性值必须完全匹配
.test{
color: red;
}
.test1{
color: blue;
}
.test2{
color: green;
}
div[class="test"]{
background-color: red;
}
<divclass="test test1">
1111
</div>
<divclass="test2">
2222
</div>
其中
div[class="test"]{
background-color: red;
}无法匹配
<divclass="test test1">
1111
</div>
即使改成
div[class="test1test"]{
background-color: red;
}也无法匹配。必须改成
div[class="testtest1"]{
background-color: red;
}
才能完全匹配。也可以改成如下形式：
div[class~="test"]{
background-color: red;
}
也可以匹配
<divclass="test test1">
1111
</div>
5、相邻兄弟选择器
实例：如果要增加紧接在 h1 元素后出现的段落的字体颜色
h1 + p{
color:red;
}
<h1>HelloWorld!</h1>
<p>111111111111</p>
<p>222222222222</p>
<p>333333333333</p>
只有第一个p元素的样式为{color:red;}即111111111111变位红色，222222222222和333333333333不变色。
注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。
例1：
li + li{font-weight:bold;}
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
即ul中的<li>List item 2</li>和<li>List item 3</li>以及ol中的<li>List item 2</li>
和<li>List item 3</li>变为了粗体。
6、子元素选择器
选择只作为 h1 元素子元素的 strong 元素
h1 > strong{
color: red;
}
<h1>maoyuanjun<strong>111111</strong></h1>
<h1>maoyuanjun<em>22222<strong>3333</strong>44444</em></h1>
第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响