选择器
派生选择器
后代选择器( )
如:h1 em{},就像他的名字,是子孙元素就可以,但不能像这样<h1><h2><em>hello></em></h2></h1>
子元素选择器(>)
如:h1 > strong{},我的理解是只有h1元素的子节点,子孙也是不行的<h1><em><strong>hello</strong></em> .</h1>
相邻兄弟选择器(+)
这个有点问题 如:h1 + h2是不行的,li + li {font-weight:bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li>
<ol>
<li>List item 4</li>
</ol>
<li>List item 3</li>
</ul>
只会list item 2 加粗 不过一般
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
List item 2和List item 3都会加粗
ID(#)选择器
注意
1.div #test{ background-color:blue; } 这个类要在div中
<div><div id="test">蓝色</div> </div>
2.#test div{ background-color:red; } 要在test这个id的div中
<div id="test"><div>红色</div></div>
3.#test{background-color:blue;}直接用就可以
<div id="test">蓝色</div>
注意:1.一个html中id选择器只在文档中使用一次,但我使用了一次,好像也行,可能在css中没错,css+html中就可能会有错
2.不可以结合使用
类(.)选择器
1.可以多个类选择 .one{} .two{}
使用可以 <p class="one two">1</p>
2.可以在前面限定 p.one{}
属性选择器(根据元素的属性及属性值来选择元素)
例如
a[href][title]
{
color:red;
}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
要有我加粗的属性
如:a[href*="w3school.com.cn"]
{
color: red;
}
这样就可以根据上图知道href*="w3school.com.cn",表示href属性包含w3school.com.cn都可以使用这个样式
<a href="http://www.w3school.com.cn/">W3School</a>