css高级

CSS3高级
Day01
复杂选择器
内容生成
多列
CSSHack(浏览器兼容)

1、兄弟选择器
匹配指定元素的相邻兄弟元素
1、相邻兄弟选择器
匹配相邻的元素
匹配当前元素【后面】的【一个】元素,前提两者必须拥有相同父元素
语法:
selctor1+selector2
通过 + 作为结合符
eg:
div+p{}
注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。
2、通用兄弟选择器
匹配当前元素【后面】的【所有】【兄弟】元素
语法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 作为结合符 div ~ p
注意:第二个元素不必紧紧跟随第一个元素的后面
练习1:
1、通过指定元素 修改其相邻兄弟为红色字体
div.s1+p{
color:red;
}
2、通过指定元素 修改其通用兄弟为#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
2、属性选择器
能够将元素附带的属性用于选择器中,对带有指定属性的元素设置样式
语法:
1、[属性名]
选择 带有 指定属性 的元素
[title] : 匹配包含title属性的所有元素
2、元素[属性名]
p[id] : 匹配所有包含id属性的p元素
div[title] : 匹配所有包含title属性的div元素
3、元素[属性1][属性2]....
匹配即具备属性1又具备属性2的元素
div[id][class]
4、元素[属性=值]
input[type=text]:匹配所有type属性值为text的input元素
input[type="text"]
input[type=‘text‘]

input[class=border]
input[id="txtName"]
5、元素[属性~=值] 
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定属性中,包含【独立】【值】单词的元素
6、元素[属性^=值]
属性值以【值】开始的元素
div[class^=c] : class属性以c开头的div元素
div[class^=my]: class属性以my开头的div元素
7、元素[属性*=值]:
属性值中包含【值】的元素
8、元素[属性$=值]:
属性值以【值】结尾的元素
3、伪类选择器
1、目标(target)伪类
用于匹配 当前活动的 锚点元素
语法::target
2、元素状态伪类
场合:表单元素居多
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素(单选按钮、复选框)
3、结构伪类
1、:first-child ,匹配属于其父元素中的首个子元素(子元素:first-child)
2、:last-child , 匹配属于其父元素中的最后一个子元素
table tr:first-child{}
table tr:last-child{}
3、:empty , 匹配没有子元素(包含文本)的元素

<p></p>:可以匹配出来

以下两种情况匹配不出来:
<p>
<a>百度</a>
</p>
<p>百度</p>
4、:only-child ,匹配是其父元素中的唯一子元素

<p>
<a>百度</a>
</p>
a:only-child{}可以匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}无法匹配
4、否定伪类
匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
语法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
4、伪元素选择器
特点:获取指定元素中某一部分文本而用的。
1、:first-letter
用于选取指定选择器(元素)的首字母
2、:first-line
用于选取指定选择器(元素)的首行文本
3、::selection
匹配被用户选取的部分
5、内容生成
通过 css 向已有的元素上增加新的文本(图片)内容
选择器:
1、:before
向匹配元素之前增加生成的内容
定位到匹配元素开始的位置
2、:after
向匹配元素之后增加生成的内容

eg:
div:before{}
p:after{}
属性:
1、content
作用:配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:
字符串:普通文本
url:图像
计数器:
6、计数器
通过css 定义一个计数器,在其他元素中可以使用该计数器生成的数字。
属性:
1、counter-reset
作用:用于定义计数器并设置初始值
如果不设置初始值,那么默认为0,如果设置的话可以为正、负、0
选择器{
counter-reset:counter1 10;
}
选择器{
counter-reset:counter1 10 counter2 20;
}
注意:如果整个页面的任何一个元素都想使用到计数器的话,最好将其定义在body中。切记将计数器定义在某个元素中(除body外),如果这样定义,再使用时永远都是初始值。
body{
counter-reset:c1 10 c2 20;
}
2、counter-increment
作用:设置每次使用计数器时的增量,默认值为1
属性值:可以为正(递增),也可以为负(递减)
注意:哪个标签用,在那个标签中声明 counter-increment属性
语法:
counter-increment:计数器名称 增量值;
div{
counter-increment:c1 10;
}
函数:
counter(counterName) 函数
作用:使用计数器创建出来的数字文本。
counterName:计数器名称
7、多列
属性:
1、column-count
元素被分隔的列数 3
2、column-gap
列与列之间的间隔 px
3、column-rule
列规则,列间隔符的宽度、样式、颜色
column-rule:1px solid red;
浏览器兼容问题:
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列设置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 与 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
常用火狐写法
-moz-column-count:3;
-moz-column-gap:50px;
分开写
-moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
整体
-moz-column-rule:2px dashed red;

8、CSS Hack
1.什么是css Hack?
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏
览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们
把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理

2.css hack 的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景
来应用不同的CSS。

3.CSS hack分类

CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针
对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但
firefox前述三个都不能认识。
选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对
IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
3、HTML头部引用Hack
通过 IE 的条件注释 来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容

gt : 选择条件版本以上的版本(不包含条件版本)
gt ie 7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie 8
gte :选择条件版本以及以上版本
gte ie 7
lte :
! :选择条件版本意外的所有版本
! ie6

<!--[if 条件]>
满足条件要做的事情
<![endif]-->
1、通过条件注释声明,只在IE下生效
<!--[if ie]>
这段文本只在ie中显示
<![endif]-->
2、只在ie6以上的浏览器生效
<!--[if gt IE 6]>

<![endif]-->
3、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE所有的css hack
由于所有的IE浏览器都能够识别特定的css属性值后缀\9,因此我们可以给css的属性值添加\9后缀(在结尾的分号之前),从而做到只有IE浏览器能够识别
该属性,其他浏览器无法识别从而将其忽略掉。
比如:.css-hack {
color: red\9; /* 所有浏览器上显示为红色 */

}

IE6:

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一选择符中的 !important */
IE7:

+selector{property:value;}
IE8:

selector{property:value\0;}
IE6 & IE7:

*selector{property:value;}
IE6 & IE7 & IE8:

测试:
/* All browsers */ 
background-color:blue !important;

+background-color:yellow;
 
background-color:purple\0; 
 
_background-color:green;

总结:* 或 # ,IE7、IE11 支持。
\9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9 支持。
*、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。

CSS3高级
Day01
复杂选择器
内容生成
多列
CSSHack(浏览器兼容)

1、兄弟选择器
匹配指定元素的相邻兄弟元素
1、相邻兄弟选择器
匹配相邻的元素
匹配当前元素【后面】的【一个】元素,前提两者必须拥有相同父元素
语法:
selctor1+selector2
通过 + 作为结合符
eg:
div+p{}
注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。
2、通用兄弟选择器
匹配当前元素【后面】的【所有】【兄弟】元素
语法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 作为结合符 div ~ p
注意:第二个元素不必紧紧跟随第一个元素的后面
练习1:
1、通过指定元素 修改其相邻兄弟为红色字体
div.s1+p{
color:red;
}
2、通过指定元素 修改其通用兄弟为#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
2、属性选择器
能够将元素附带的属性用于选择器中,对带有指定属性的元素设置样式
语法:
1、[属性名]
选择 带有 指定属性 的元素
[title] : 匹配包含title属性的所有元素
2、元素[属性名]
p[id] : 匹配所有包含id属性的p元素
div[title] : 匹配所有包含title属性的div元素
3、元素[属性1][属性2]....
匹配即具备属性1又具备属性2的元素
div[id][class]
4、元素[属性=值]
input[type=text]:匹配所有type属性值为text的input元素
input[type="text"]
input[type=‘text‘]

input[class=border]
input[id="txtName"]
5、元素[属性~=值] 
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定属性中,包含【独立】【值】单词的元素
6、元素[属性^=值]
属性值以【值】开始的元素
div[class^=c] : class属性以c开头的div元素
div[class^=my]: class属性以my开头的div元素
7、元素[属性*=值]:
属性值中包含【值】的元素
8、元素[属性$=值]:
属性值以【值】结尾的元素
3、伪类选择器
1、目标(target)伪类
用于匹配 当前活动的 锚点元素
语法::target
2、元素状态伪类
场合:表单元素居多
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素(单选按钮、复选框)
3、结构伪类
1、:first-child ,匹配属于其父元素中的首个子元素(子元素:first-child)
2、:last-child , 匹配属于其父元素中的最后一个子元素
table tr:first-child{}
table tr:last-child{}
3、:empty , 匹配没有子元素(包含文本)的元素

<p></p>:可以匹配出来

以下两种情况匹配不出来:
<p>
<a>百度</a>
</p>
<p>百度</p>
4、:only-child ,匹配是其父元素中的唯一子元素

<p>
<a>百度</a>
</p>
a:only-child{}可以匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}无法匹配
4、否定伪类
匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
语法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
4、伪元素选择器
特点:获取指定元素中某一部分文本而用的。
1、:first-letter
用于选取指定选择器(元素)的首字母
2、:first-line
用于选取指定选择器(元素)的首行文本
3、::selection
匹配被用户选取的部分
5、内容生成
通过 css 向已有的元素上增加新的文本(图片)内容
选择器:
1、:before
向匹配元素之前增加生成的内容
定位到匹配元素开始的位置
2、:after
向匹配元素之后增加生成的内容

eg:
div:before{}
p:after{}
属性:
1、content
作用:配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:
字符串:普通文本
url:图像
计数器:
6、计数器
通过css 定义一个计数器,在其他元素中可以使用该计数器生成的数字。
属性:
1、counter-reset
作用:用于定义计数器并设置初始值
如果不设置初始值,那么默认为0,如果设置的话可以为正、负、0
选择器{
counter-reset:counter1 10;
}
选择器{
counter-reset:counter1 10 counter2 20;
}
注意:如果整个页面的任何一个元素都想使用到计数器的话,最好将其定义在body中。切记将计数器定义在某个元素中(除body外),如果这样定义,再使用时永远都是初始值。
body{
counter-reset:c1 10 c2 20;
}
2、counter-increment
作用:设置每次使用计数器时的增量,默认值为1
属性值:可以为正(递增),也可以为负(递减)
注意:哪个标签用,在那个标签中声明 counter-increment属性
语法:
counter-increment:计数器名称 增量值;
div{
counter-increment:c1 10;
}
函数:
counter(counterName) 函数
作用:使用计数器创建出来的数字文本。
counterName:计数器名称
7、多列
属性:
1、column-count
元素被分隔的列数 3
2、column-gap
列与列之间的间隔 px
3、column-rule
列规则,列间隔符的宽度、样式、颜色
column-rule:1px solid red;
浏览器兼容问题:
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列设置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 与 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
常用火狐写法
-moz-column-count:3;
-moz-column-gap:50px;
分开写
-moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
整体
-moz-column-rule:2px dashed red;

8、CSS Hack
1.什么是css Hack?
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏
览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们
把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理

2.css hack 的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景
来应用不同的CSS。

3.CSS hack分类

CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针
对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但
firefox前述三个都不能认识。
选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对
IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
3、HTML头部引用Hack
通过 IE 的条件注释 来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容

gt : 选择条件版本以上的版本(不包含条件版本)
gt ie 7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie 8
gte :选择条件版本以及以上版本
gte ie 7
lte :
! :选择条件版本意外的所有版本
! ie6

<!--[if 条件]>
满足条件要做的事情
<![endif]-->
1、通过条件注释声明,只在IE下生效
<!--[if ie]>
这段文本只在ie中显示
<![endif]-->
2、只在ie6以上的浏览器生效
<!--[if gt IE 6]>

<![endif]-->
3、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE所有的css hack
由于所有的IE浏览器都能够识别特定的css属性值后缀\9,因此我们可以给css的属性值添加\9后缀(在结尾的分号之前),从而做到只有IE浏览器能够识别
该属性,其他浏览器无法识别从而将其忽略掉。
比如:.css-hack {
color: red\9; /* 所有浏览器上显示为红色 */

}

IE6:

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一选择符中的 !important */
IE7:

+selector{property:value;}
IE8:

selector{property:value\0;}
IE6 & IE7:

*selector{property:value;}
IE6 & IE7 & IE8:

测试:
/* All browsers */ 
background-color:blue !important;

+background-color:yellow;
 
background-color:purple\0; 
 
_background-color:green;

总结:* 或 # ,IE7、IE11 支持。
\9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9 支持。
*、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。

CSS3高级
Day01
复杂选择器
内容生成
多列
CSSHack(浏览器兼容)

1、兄弟选择器
匹配指定元素的相邻兄弟元素
1、相邻兄弟选择器
匹配相邻的元素
匹配当前元素【后面】的【一个】元素,前提两者必须拥有相同父元素
语法:
selctor1+selector2
通过 + 作为结合符
eg:
div+p{}
注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。
2、通用兄弟选择器
匹配当前元素【后面】的【所有】【兄弟】元素
语法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 作为结合符 div ~ p
注意:第二个元素不必紧紧跟随第一个元素的后面
练习1:
1、通过指定元素 修改其相邻兄弟为红色字体
div.s1+p{
color:red;
}
2、通过指定元素 修改其通用兄弟为#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
2、属性选择器
能够将元素附带的属性用于选择器中,对带有指定属性的元素设置样式
语法:
1、[属性名]
选择 带有 指定属性 的元素
[title] : 匹配包含title属性的所有元素
2、元素[属性名]
p[id] : 匹配所有包含id属性的p元素
div[title] : 匹配所有包含title属性的div元素
3、元素[属性1][属性2]....
匹配即具备属性1又具备属性2的元素
div[id][class]
4、元素[属性=值]
input[type=text]:匹配所有type属性值为text的input元素
input[type="text"]
input[type=‘text‘]

input[class=border]
input[id="txtName"]
5、元素[属性~=值] 
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定属性中,包含【独立】【值】单词的元素
6、元素[属性^=值]
属性值以【值】开始的元素
div[class^=c] : class属性以c开头的div元素
div[class^=my]: class属性以my开头的div元素
7、元素[属性*=值]:
属性值中包含【值】的元素
8、元素[属性$=值]:
属性值以【值】结尾的元素
3、伪类选择器
1、目标(target)伪类
用于匹配 当前活动的 锚点元素
语法::target
2、元素状态伪类
场合:表单元素居多
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素(单选按钮、复选框)
3、结构伪类
1、:first-child ,匹配属于其父元素中的首个子元素(子元素:first-child)
2、:last-child , 匹配属于其父元素中的最后一个子元素
table tr:first-child{}
table tr:last-child{}
3、:empty , 匹配没有子元素(包含文本)的元素

<p></p>:可以匹配出来

以下两种情况匹配不出来:
<p>
<a>百度</a>
</p>
<p>百度</p>
4、:only-child ,匹配是其父元素中的唯一子元素

<p>
<a>百度</a>
</p>
a:only-child{}可以匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}无法匹配
4、否定伪类
匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
语法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
4、伪元素选择器
特点:获取指定元素中某一部分文本而用的。
1、:first-letter
用于选取指定选择器(元素)的首字母
2、:first-line
用于选取指定选择器(元素)的首行文本
3、::selection
匹配被用户选取的部分
5、内容生成
通过 css 向已有的元素上增加新的文本(图片)内容
选择器:
1、:before
向匹配元素之前增加生成的内容
定位到匹配元素开始的位置
2、:after
向匹配元素之后增加生成的内容

eg:
div:before{}
p:after{}
属性:
1、content
作用:配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:
字符串:普通文本
url:图像
计数器:
6、计数器
通过css 定义一个计数器,在其他元素中可以使用该计数器生成的数字。
属性:
1、counter-reset
作用:用于定义计数器并设置初始值
如果不设置初始值,那么默认为0,如果设置的话可以为正、负、0
选择器{
counter-reset:counter1 10;
}
选择器{
counter-reset:counter1 10 counter2 20;
}
注意:如果整个页面的任何一个元素都想使用到计数器的话,最好将其定义在body中。切记将计数器定义在某个元素中(除body外),如果这样定义,再使用时永远都是初始值。
body{
counter-reset:c1 10 c2 20;
}
2、counter-increment
作用:设置每次使用计数器时的增量,默认值为1
属性值:可以为正(递增),也可以为负(递减)
注意:哪个标签用,在那个标签中声明 counter-increment属性
语法:
counter-increment:计数器名称 增量值;
div{
counter-increment:c1 10;
}
函数:
counter(counterName) 函数
作用:使用计数器创建出来的数字文本。
counterName:计数器名称
7、多列
属性:
1、column-count
元素被分隔的列数 3
2、column-gap
列与列之间的间隔 px
3、column-rule
列规则,列间隔符的宽度、样式、颜色
column-rule:1px solid red;
浏览器兼容问题:
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列设置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 与 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
常用火狐写法
-moz-column-count:3;
-moz-column-gap:50px;
分开写
-moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
整体
-moz-column-rule:2px dashed red;

8、CSS Hack
1.什么是css Hack?
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏
览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们
把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
CSS hack的原理

2.css hack 的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景
来应用不同的CSS。

3.CSS hack分类

CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针
对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但
firefox前述三个都不能认识。
选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对
IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
3、HTML头部引用Hack
通过 IE 的条件注释 来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容

gt : 选择条件版本以上的版本(不包含条件版本)
gt ie 7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie 8
gte :选择条件版本以及以上版本
gte ie 7
lte :
! :选择条件版本意外的所有版本
! ie6

<!--[if 条件]>
满足条件要做的事情
<![endif]-->
1、通过条件注释声明,只在IE下生效
<!--[if ie]>
这段文本只在ie中显示
<![endif]-->
2、只在ie6以上的浏览器生效
<!--[if gt IE 6]>

<![endif]-->
3、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE所有的css hack
由于所有的IE浏览器都能够识别特定的css属性值后缀\9,因此我们可以给css的属性值添加\9后缀(在结尾的分号之前),从而做到只有IE浏览器能够识别
该属性,其他浏览器无法识别从而将其忽略掉。
比如:.css-hack {
color: red\9; /* 所有浏览器上显示为红色 */

}

IE6:

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一选择符中的 !important */
IE7:

+selector{property:value;}
IE8:

selector{property:value\0;}
IE6 & IE7:

*selector{property:value;}
IE6 & IE7 & IE8:

测试:
/* All browsers */ 
background-color:blue !important;

+background-color:yellow;
 
background-color:purple\0; 
 
_background-color:green;

总结:* 或 # ,IE7、IE11 支持。
\9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9 支持。
*、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。

时间: 2024-10-13 14:15:14

css高级的相关文章

CSS 高级:尺寸、分类、伪类、伪元素

CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度. CSS 伪类:用于向某些选择器添加特殊的效果. CSS 伪元素:用于将特殊的效果添加到某些选择器. CSS 尺寸属性 CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述 height 设置元素的高度. line-height 设置行高. max-height

CSS高级要点笔记

CSS高级 *对齐块元素 对于块元素内部内容的水平对齐可以使用text-align:center: 而对于块元素本身在布局中的对齐可以使用margin属性,可以通过将左右外边距设置为auto来水平对齐. <!DOCTYPE html> <html> <head> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head>

(转载)css高级选择器

以前由于考虑到IE6等浏览器的兼容属性,常常对于高级的css选择符不感兴趣,最近开始,发现前端方面的IE6其实已经逐渐的消失了,学会用css3的高级选择器,可以起到事半功倍的效果,所以以后将会加强这方面的学习和积累一些经验,今天重温以前被人用过的很多选择器,当然有一些也许你还不知道,没关系,从现在开始学习吧. CSS是对网页设计师可用的最强大的工具之一.使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签.但是尽管事实上,我们每个人也 都意识到了它是有用的,CSS 选择器远未发挥它们

CSS 高级

1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内容.边框.内边距 和 外边距 的方式. CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:外填充也叫外边距(margin),边框(border),内填充也叫内边距(padding)和实际内容(content).盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 如下 CSS

CSS高级选择符

2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词. [attribute^=value] 匹配属性值以指定值开头的每个元素. [attribute$=value] 匹配属性

css高级语法

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明.用逗号将需要分组的选择器分开.在下面的例子中,我们对所有的标题元素进行了分组.所有的标题元素都是绿色的.h1,h2,h3,h4,h5,h6 { color: green; }继承及其问题根据 CSS,子元素从父元素继承属性.但是它并不总是按此方式工作.看看下面这条规则:body { font-family: Verdana, sans-serif; }根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者

精通css 高级web标准解决方案——可视化格式模型-定位模型

CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! <p>廖阿丽!</p> </div> 这一块中的“你好”,属于匿名块框,因为它没有与专门定义的元素想关联. 2-相对定位 元素相对定位就是相对于它本来的位置来定位的. <!DOCTYPE html> <html> <head> <ti

css高级样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

精通CSS高级Web解决方案(第2版)——读书笔记

CSS Mastery Advanced Web Standards Solutions Second Edition Author:Andy Budd I have been addicted to reading this book for a few days.It is just like chatting with a wise man.The feeling is so great.     ^ .^ I strongly recommend you read this book.