CSS选择器

一、CSS样式单的基本使用
四种使用样式单的方法：链接外部样式文件、导入外部样式文件、使用内部样式定义、使用行内样式。

1.链接外部样式文件：
在元素中添加 以下代码。
<link rel="stylesheet" href="xx.css"/>

xx.css是CSS样式单文件的地址，可以是相对地址，也可以是绝对地址.

2.导入外部样式文件：

<style type="text/css">
	@import "outer.css";
	@import url("mycss.css");
</style>

完整语法：@import url(“样式单地址”) sMedia;
上面语法格式中的url可以省略；sMedia用于指定该样式单仅对某种显示设备有效，不过目前大部分浏览器都不支持。

3.使用内部样式定义：
<style type="xxx/css"> </style>

好处是可以实现css样式仅对某一个页面有效，而不会影响整个站点。

4.使用行内样式

<div style=" float: left;
    margin-left: 20px;
    margin-top:15px;
    color:rgb(165, 41, 31);">

可以在每一个元素后面添加一个style通用属性。

二、基本选择器
E可以说任意有效的HTML元素名
Selector：选择器
1、元素选择器：
E{…}、* {…}、" * "可匹配HTML文档中任意的元素
2、属性选择器：
（1）元素选择器
（2）E[attr]{…} 对具有attr属性的元素起作用
（3）E[attr=value]{…} 对所有包含attr的属性且attr属性为value的E元素起作用
（4）E[attr*=value]{…} 对所有包含attr的属性且attr属性为包含value的字符串的E元素起作用
（5）E[attr^=value]{…} 对所有包含attr的属性且attr属性的值为以value开头的字符串的E元素起作用
3、ID选择器
#idvalue {…}
4、class选择器
[E].classValue {…}
5、包含选择器
Selector1 Selector2 {…}
6、子选择器：
Selector1>Selector2{…} 必须是子元素
7、兄弟选择器
Selector1 ~ Selector2 {…} Selector1对应的元素后面、能匹配的Selecctor2的兄弟节点
8、选择器组合
Selector1，Selector2，Selector3，… {…}

三、伪元素选择器
:first-letter 对指定对象内的第一个字符起作用
:first-line 对指定对象内的第一个内容起作用
:before 在指定对象内部的前端插入内容
:after 在指定对象内部的尾端添加内容
四、伪类选择器
1、结构性伪类选择器
（1）Selector:nth-child(n) 从其父元素的第n个子节点的元素
（2）Selector:nth-last-child(n) 从其父元素的倒数第n个子节点的元素
（3）Selector:first-of-type 是与他同类型、同级的兄弟元素的第一个元素
（4）Selector:nth-child(odd/even)
2、UI元素状态伪类选择器
（1）Selector:link 匹配Selector选择器且未被访问前的元素（通常只能是超链接）
（2）Selector:visited 匹配Selector选择器且已被访问前的元素（通常只能是超链接）
（4）Selector:active 匹配Selector选择器且处于被用户激活（在鼠标点击与释放之前的事件）状态的元素
（5）Selector:hover 匹配Selector选择器且处于鼠标悬停状态的元素
（6）Selector:focus 匹配Selector选择器且以得到焦点的元素
（7）Selector:enabled 匹配Selector选择器且当前处于可用状态的元素
（8）Selector:disabled 匹配Selector选择器且当前处于不可用状态的元素
（9）Selector:checked 匹配Selector选择器且当前处于选中状态的元素
（10）Selector:default 匹配Selector选择器且页面打开时处于选中状态（即使当前没有被选中亦可）的元素
3、:not伪类选择器
Selector1:not(Selector2) 相当于用Selector1减去Selector2（除了Selector2，Selector1的状态发生变化）