css基础-选择器

CSS : Cascading Style Sheets

1、添加CSS方式

（1）、内联
通过元素的style属性直接加在元素上
例如：
<p style="color:red;font-weight:bold;font-size:30px;">CSS基础</p>

（2）、页面
在页面中通过style标签添加样式
例如：
<style type="text/css">
p{
color:red;font-weight:bold;font-size:30px;
}
</style>

（3）、外部文件
放在一个独立的文件中(如：all.css)，通过link导入
例如：
<link href="all.css" rel="stylesheet" type="text/css"/>

说明：
优先级：（1）内联 --> （2）页面 --> （3）外部文件；
如果同一级，代码后面的样式覆盖前面的样式

2、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;
}