css基础-选择器
CSS : Cascading Style Sheets
1、添加CSS方式
（1）、内联
通过元素的style属性直接加在元素上
例如：
CSS基础
（2）、页面
在页面中通过style标签添加样式
例如：
（3）、外部文件
放在一个独立的文件中(如：all.css)，通过link导入
例如：
说明：
优先级：（1）内联 --> （2）页面 --> （3）外部文件；
如果同一级，代码后面的样式覆盖前面的样式
2、CSS选择器
（1）元素选择器
根据HTML元素的名称应用样式,例如：
|-- 样式
div{
color:red;
}
|-- html代码
这是DIV
（2）ID选择器(优先于类选择器)
根据HTML元素的ID应用样式
|-- 样式
#div1{
color:red;
}
|-- html代码
CSS基础2
（3）类选择器
|-- 样式
.content{
color:red;
}
|-- html代码
CSS基础2
（4）层级（或叫后代）选择器
|-- 样式
div span{
color:red;
}
|-- html代码
span1
（5）分组选择器
通过逗号分隔，同时对多个元素应用样式
|-- 样式
#span1,#p1{
color:red;
}
|-- html代码
span1
span1
P1
（6）子元素选择器(直系子元素)
|-- 样式
div > span{
color:red;
}
|-- html代码
子元素1
子元素2
非直系子元素
（7）兄弟元素选择器(紧跟后面的兄弟元素)
|-- 样式
div + span{
color:red;
}
|-- html代码（只有span3会应用样式）
span1
span2
span3
span4
（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;
}