层次选择器

例：

<div class="left">
<div class="left">
</div>
<p class="left"></p>
<span class="left"></span>
</div>

div .left  div里面所有后代
div > .left 后代第一个
div.left 元素本身
div+.left 下一个兄弟节点
div ~.left 所有兄弟节点

属性选择器

例：

<div class="nav">张三</div>
<div class="san">李四</div>
<div class="two">王五</div>
<div class="navs">赵六</div>
<div class="nav">王雪</div>

<div class="top-navs">小明</div>

<div class="topnav">小李</div>

<div class="top navs">小孩</div>

 

属性选择器用法详细解析：

//表示所有包含 class="nav"的属性会有黄色背景

[class="nav"] {
background-color: yellow;
}

//表示所有包含 class"的属性会有黄色背景

[class] {
background-color: yellow;
} 

//

[class^="top"]

//属性包含 nav 的所有会变成黄色背景。

[class~=nav] {
background-color: yellow;
}

//class 属性以 "top" 开头的所有元素：

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

[class |=top] {
background-color: yellow;
}

//下例选取 class 属性以 "top" 开头的所有元素：

[class^="top"] {
background-color: yellow;
}

//下例选取 class 属性以 "s" 结尾的所有元素：

提示：值不必是完整单词！

[class$="s"] {
background-color: yellow;
}

//下例选取 class 属性包含 "a" 的所有元素：

提示：值不必是完整单词！

[class*="a"] {
background-color: yellow;
}