1、萬用字元選擇器（＊）

*{
    marigin: 0;
    padding: 0;
}

//ul元素下的所有元素
ul *{border:1px solid blue;}

2、元素選擇器(Element)

li {background-color: grey;}

3、類選擇器（.className）

01、單類選擇器

<li class="important">1</li>
<li>2</li>
.important{font-weight: bold; color: yellow;}

02、多類選擇器

<li
 
 class="active important">1</li>
<li>2</li>
.active.important{font-weight: bold; color: yellow;}

03、指定元素類選擇器

<li class="important">1</li>
<li>2</li>
li.important{font-weight: bold; color: yellow;}

4、id選擇器（#ID）

<li class="important">1</li>
<li
 
 id="last">2</li>
#last{background: #000;color: lime;}

5、屬性選擇器

01、E[attr]：只使用屬性名，但沒有確定任何屬性值；

<p name="pname">段落1</p>
<p>段落2</p>
p[name]{color:red}

02、E[attr=”value”]：指定屬性名，並指定了該屬性的屬性值；

<p name="pname">段落1</p>
<p>段落2</p>
p[name="pname"]{color:red}
 

03、E[attr~=”value”]：指定屬性名，並且具有屬性值，該屬性的全部屬性值值是一個詞列表，以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“~”不能不寫；

<p name="pname" class="pclass1 pclass2">段落1</p>
<p>段落2</p>
p[class~="pclass1"]{color:red}

04、E[attr^=”value”]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；

<p name="pname" class="pclass1">段落1</p>
<p class="pclass2">段落2</p>
p[class^="pclass"]{color:red}

05、E[attr$=”value”]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；

<p name="pname" class="firstpclass">段落1</p>
<p class="secondpclass">段落2</p>
p[class$="pclass"]{color:red}

06、E[attr*=”value”]：指定了屬性名，並且有屬性值，而且屬值中包含了value；

<p name="pname" class="p-firstclass1">段落1</p>
<p class="p-secondclass2">段落2</p>
p[class*="class"]{color:red}

07、E[attr|=”value”]：指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

<p name="pname" class="zh-cn">段落1</p>
<p class="zh-en">段落2</p>
p[class|="zh"]{color:red}

6、結合選擇器：指定元素具有的指定id、類或屬性等

<li class="important">1</li>
<li>2</li>
li.important{font-weight: bold; color: yellow;}

<p name="pname">段落1</p>
<p>段落2</p>
p[name="pname"]{color:red}

7、後代選擇器（Ｅ Ｆ）

E為祖先元素，F為後代元素

<div class="divclass">
    <ul>
        <li>列表1</li>
    </ul>
</div>
.divclass li{font-weight: bold; color: yellow;}
ul li{font-weight: bold; color: yellow;}

8、子元素選擇器(E>F)

E為父元素，F為子元素

<div class="divclass">
    <ul>
        <li>列表1</li>
    </ul>
</div>
ul>li{font-weight: bold; color: yellow;}

9、相鄰兄弟元素選擇器(E + F)

EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素後面，而且相鄰

<ul>
    <li>列表E</li>
    <li>列表F</li>
</ul>
li+li{font-weight: bold; color: yellow;}

10、通用兄弟選擇器（Ｅ ~ Ｆ）

EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素後面，而且F元素可以是多個、可以不相鄰

<ul>
    <li class="classE">列表E</li>
    <p>段落P</p>
    <li>列表F</li>
    <p>段落P</p>
    <li>列表F</li>
</ul>
.classE~li{font-weight: bold; color: yellow;}

11、群組選擇器（selector1,selector2,…,selectorN）

每個選擇器之間使用逗號“，”隔開

<div class="div-class">div1</div>
<ul>
    <li>列表1</li>
</ul>
<p id="pid"></p>
<span title="span-title"></span>

.div-class,ul>li,#pid,span[title^="span"]{font-size:14px;}

參照W3CPLUS關於基本選擇器 和 屬性選擇器 使用介紹