关于w3school上学习css的简单总结(一)

选择器

派生选择器

后代选择器( )

如：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>