1、复杂选择器
2、内容生成
3、多列
4、CSS Hack(浏览器兼容性)
*******************************
1、复杂选择器
1、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面
语法：
选择器1+选择器2
ex:
1、div+p{}
2、#content+.important{}
2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配 附带 attr 属性的元素
ex:
1、[id]
匹配页面所有附带 id 属性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素
ex:
1、p[id]
3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素
ex:
div[id][class]
4、elem[attr=value]
value:值
作用：匹配页面上 附带attr属性同时值为 value 的elem 元素
ex:
input[type=text] : 获取页面所有文本框
5、elem[class~=value]
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值。
6、elem[attr^=value]
^= : 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、elem[attr$=value]
$= : 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、elem[attr*=value]
*= : 包含 value 字符即可
3、伪类选择器
4、伪元素选择器
1、复杂选择器
1、兄弟选择器
1、相邻兄弟
选择器1+选择器2
2、通用兄弟
选择器1~选择器2
2、属性选择器
语法：[]
[attr]:匹配附带attr属性的元素
elem[attr]:... ...
elem[attr1][attr2]:
[attr=value]:
[class~=value]:
[attr^=value]:
[attr$=value]:
[attr*=value]:
3、伪类选择器
1、目标伪类
:target
2、元素状态伪类
:enabled,匹配被激活元素(表单控件)
:disabled,匹配被禁用元素(表单控件)
:checked,匹配被选中元素(radio，checkbox)
3、结构伪类
1、:first-child
2、:last-child
3、:nth-child(n)
4、:empty
5、:only-child
4、否定伪类
:not(选择器)
4、伪元素选择器
1、作用
匹配元素中的内容
2、语法
:first-letter,匹配元素的首字符
:first-line,匹配元素的首行
::selection,匹配用户选中的部分
注意： :与::的区别
2、内容生成
1、语法
1、伪元素选择器
1、:before,匹配元素内容区域之前
2、:after,匹配元素内容区域之后
2、属性
属性：content
取值：
1、字符串 ：普通文本,""
2、url() , 生成一副图像
3、计数器
3、解决问题
1、浮动元素的父元素高度问题
div:after{
content:"";
display:block;
clear:both;
}
2、外边距溢出
div:before/div:after{
content:"";
display:table;
}
4、计数器
1、声明或复位一个计数器
属性：
counter-reset:名 值 名 值;
值，可以省略，默认为0
注意：
1、不能将计数器声明在使用的元素中
2、设置计数器增量
属性：counter-increment:名 值;
值，可以省略，默认为1
注意：
1、哪个元素使用，就在哪个元素上声明增量
3、使用计数器
属性：content
取值：counter(名);
注意：
配合着:before或:after一起使用
3、多列
1、属性
1、分隔列
属性：column-count
2、列间隔
属性：column-gap
3、列规则
属性：column-rule:width style color;
2、兼容性
添加浏览器前缀
4、CSS Hack
1、CSS Hack方式
1、CSS 类内部hack
通过 属性前缀或值后缀的方式来编写指定浏览器能够识别的样式
hack 写法
* *color IE6,IE7
+ +color IE6,IE7
# #color IE6,IE7
- -color IE6
_ _color IE6
\0 color:red\0; IE8,IE9,IE10
\9\0 color:red\9\0; IE9,IE10
注意：
顺序问题
IE8,IE9,IE10(\0)
IE9,IE10(\9\0)
IE6,IE7(+)
IE6(-)
2、选择器Hack
在选择器前加上浏览器能够识别的前缀
* : IE6
*body{
/*IE6中body的样式*/
}
*+ : IE7