CSS选择器

（1）元素选择器

根据HTML元素的名称应用样式,例如：

/* 样式 */
div{
  color:red;
}
/* HTML代码 */
<div>这是DIV</div>

（2）ID选择器(优先于类选择器)（#）

根据HTML元素的ID应用样式

/* 样式 */
#div1{
　　color:red;
}
/* html代码 */
<div id="div1">CSS基础2</div>

（3）类选择器（.）

/* 样式 */
.content{
　　color:red;
}
/* html代码 */
<div class="content">CSS基础2</div>

（4）层级（或叫后代）选择器 (空格)

/* 样式 */
div span{
  color:red;
}
/* html代码 */
<div>
<span>span1</span>
</div>

（5）分组选择器（,）

通过逗号分隔，同时对多个元素应用样式

/* 样式 */
#span1,#p1{
　　color:red;
}
/* html代码 */
<div>
<span id="span1">span1</span>
</div>
<div>
<span id="span2">span1</span>
<p id="p1">P1</p>
</div>

 

（6）子元素选择器(直系子元素) （>）

/* 样式 */
div > span{
color:red;
}
/* html代码 */
<div>
<span>子元素1</span>
<span>子元素2</span>
<p><span>非直系子元素</span></p>
</div>

（7）兄弟元素选择器(紧跟后面的兄弟元素) (+)

/* 样式 */
div + span{
    color:red;
}
/* html代码（只有span3会应用样式）*/
<span>span1</span>
<div>
<span>span2</span>
</div>
<span>span3</span>
<span>span4</span>

（8）属性选择器（×××[···]）

例如：

A、等值匹配:

例子：查找name的值等于books的ul元素

ul[name="books"]{
    color:red;
}

B、前匹配:^=

例子：查找所有id以love开头的元素

ul li[id^="love"]{
    color:red;
}

C、后匹配:$=
例子：查找所有id以love结尾的元素

ul li[id$="love"]{
    color:red;
}

D、模糊匹配:*=
例子：查找所有id包含love的元素

ul li[id*="love"]{
    color:red;
}