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]-->

 

posted @ 2017-07-18 11:28  Hale.Proh  阅读(220)  评论(0编辑  收藏  举报