css 8
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、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
2、语法
:target
2、元素状态伪类
1、作用
元素状态 ：启用，禁用，被选中(checked)
2、语法
:enabled , 匹配每个已启用元素(表单控件)
:disabled , 匹配每个已禁用元素(表单控件)
:checked , 匹配每个被选中元素(radio,checkbox)
3、结构伪类(重点)
1、:first-child
匹配 属于其父元素中的首个子元素
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
4、:empty
匹配 没有子元素(包含文本)的每个元素
<div></div>
5、:only-child
匹配属于其父元素中的唯一子元素
<div>
<p>Hello World</p>
</div>
4、否定伪类
1、语法
:not(选择器)
作用：将 满足选择器的元素从指定范围中排除出去
4、伪元素选择器
1、作用
伪类：匹配元素的
伪元素：匹配元素中的内容
2、语法
1、:first-letter 或 ::first-letter
匹配 指定元素的 首字符
2、:first-line 或 ::first-line
匹配 指定元素的 首行
3、::selection
匹配 被用户选取的部分
3、: 和 ::的区别
CSS3之前，所有的伪元素选择器，全部都是 使用 :，ex :first-line,:first-letter
CSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line
为了能够实现浏览器的兼容性，比较推荐使用 :的写法
2、内容生成
1、什么是内容生成
通过 css 向现有的 元素内容区域中增加一部分内容
2、伪元素选择器
1、:before 或 ::before
匹配到某元素的内容区域之前
<div>(内容区域之前)Hello World</div>
2、:after 或 ::after
匹配到某元素的内容区域之后
<div>Hello World(内容区域之后)</div>
3、属性
属性:content
取值：
1、字符串 : 纯文本
2、url : 图像
3、计数器
4、计数器
1、作用
生成一段有序的数字，并且插入到元素中
2、三步走
1、声明(复位)计数器
1、属性
counter-reset
取值：
1、默认值为 0
2、可以取值为 正数或负数
counter-reset:计数器名称 值;
一次性声明多个计数器:
counter-reset:名1 值1 名2 值2;
2、什么地方声明计数器???
不能放在使用的元素中声明
2、设置计数器的增量
1、属性
counter-increment
作用：设置某个选择器出现的计数器的增量，默认值为1
counter-increment:名称 增量值;
2、什么地方声明计数器增量???
哪个元素使用，就在哪个元素中设置增量
3、使用计数器
1、函数
counter(计数器名称)
配合着 :before 或 :after 一起使用
div:before{
content:counter(name);
}
4、练习
1、倚天屠龙记
1.1 张三丰
1.2 张翠山
1.3 张无忌
1.4 殷素素
2、西游记
2.1 孙悟空
2.2 猪悟能
2.3 沙悟净
2.4 白骨精
3、多列
1、分隔列
1、作用
将一段文本拆分成几列
2、属性
column-count
取值：数字
2、列间隔
1、作用
每两列之间的间隔距离
2、属性
column-gap
取值：px
3、列规则
1、作用
每两列之间增加分割线，并设置分割线的宽度，样式，颜色
2、属性
column-rule : width style color;
4、浏览器兼容性
IE10+,Opear 支持
Firefox : -moz-
Chrome,Safari: -webkit-
4、CSS Hack
1、解决问题
IE各版本浏览器兼容性问题
2、CSS Hack
浏览器的类型及版本不同会造成CSS的解析效果也各不相同
不同厂商浏览器：IE，Chrome，Firefox，Safari
同一厂商浏览器的不同版本：IE6,IE7,IE8,IE9,IE10
3、CSSHack 原理
使用 CSS 样式属性的 优先级 来解决兼容性问题
4、CSSHack 分类
1、CSS类内部Hack
通过 属性前缀或值后缀 的方式来解决兼容性
+ : 被IE6，IE7识别
- : 被IE6 识别
+，-如果同时出现的话，+只针对IE7，-只针对IE6
注意：
IE7的兼容代码 要在上
IE6的兼容代码 要在下
2、选择器Hack
在选择器前加上某些浏览器能识别的前缀
div{
}
*前缀：IE6识别
*+前缀：IE7识别
*div{}
*+div{}
3、HTML头部引用Hack
1、原理
通过IE条件注释 解决兼容性问题
IE浏览器会根据一个if条件判断，判断指定的内容是要被解析还是被注释
2、语法
<!--[if 条件 IE 版本]>
内容
<![endif]-->
版本：6 ~ 10 数字
条件：
1、gt
大于指定版本的浏览器
2、gte
大于等于指定版本的浏览器
3、lt
小于指定版本的浏览器
4、lte
小于等于指定版本的浏览器
5、!
除条件版本以外的其他版本浏览器
ex:
<!--[if gt IE 6]>
该段内容只能在 IE6以上版本的浏览器中显示
<![endif]-->
<!--[if IE 8]>
该段内容只能在IE8中显示
<![endif]-->
