CSS基础：基本选择器分类和使用

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关于基本选择器 和 属性选择器 使用介绍