css高级

时间 2019-11-29

标签 css 高级栏目 CSS 繁體版

原文原文链接

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

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

}
使用 ~ 做为结合符 div ~ p
注意：第二个元素没必要牢牢跟随第一个元素的后面
练习1：
一、经过指定元素修改其相邻兄弟为红色字体
div.s1+p{
color:red;
}
二、经过指定元素修改其通用兄弟为#ccc背景
div.s1~p{
background:#ccc;
}

<div>指定元素


二、属性选择器
可以将元素附带的属性用于选择器中，对带有指定属性的元素设置样式
语法：
一、[属性名]
选择带有指定属性的元素
[title] : 匹配包含title属性的全部元素
二、元素[属性名]
p[id] : 匹配全部包含id属性的p元素
div[title] : 匹配全部包含title属性的div元素
三、元素[属性1][属性2]....
匹配即具有属性1又具有属性2的元素
div[id][class]
四、元素[属性=值]
input[type=text]:匹配全部type属性值为text的input元素
input[type="text"]
input[type='text']html

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

：能够匹配出来web

如下两种状况匹配不出来:

<a>百度</a>

百度
四、:only-child ,匹配是其父元素中的惟一子元素


<a>百度</a>

a:only-child{}能够匹配浏览器

<a>百度</a>
<a>谷歌</a>

a:only-child{}没法匹配
四、否认伪类
匹配非指定选择器的每一个元素(即不是指定选择器的其余元素)
语法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
四、伪元素选择器
特色:获取指定元素中某一部分文本而用的。
一、:first-letter
用于选取指定选择器（元素）的首字母
二、:first-line
用于选取指定选择器（元素）的首行文本
三、::selection
匹配被用户选取的部分
五、内容生成
经过 css 向已有的元素上增长新的文本（图片）内容
选择器：
一、:before
向匹配元素以前增长生成的内容
定位到匹配元素开始的位置
二、:after
向匹配元素以后增长生成的内容函数

eg:
div:before{}
p:after{}
属性：
一、content
做用：配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
经常使用取值:
字符串：普通文本
url:图像
计数器:
六、计数器
经过css 定义一个计数器，在其余元素中可使用该计数器生成的数字。
属性：
一、counter-reset
做用：用于定义计数器并设置初始值
若是不设置初始值，那么默认为0，若是设置的话能够为正、负、0
选择器{
counter-reset:counter1 10;
}
选择器{
counter-reset:counter1 10 counter2 20;
}
注意：若是整个页面的任何一个元素都想使用到计数器的话，最好将其定义在body中。切记将计数器定义在某个元素中(除body外),若是这样定义，再使用时永远都是初始值。
body{
counter-reset:c1 10 c2 20;
}
二、counter-increment
做用:设置每次使用计数器时的增量，默认值为1
属性值：能够为正(递增)，也能够为负(递减)
注意：哪一个标签用，在那个标签中声明 counter-increment属性
语法：
counter-increment:计数器名称增量值;
div{
counter-increment:c1 10;
}
函数：
counter(counterName) 函数
做用：使用计数器建立出来的数字文本。
counterName：计数器名称
七、多列
属性：
一、column-count
元素被分隔的列数 3
二、column-gap
列与列之间的间隔 px
三、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;url

-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;spa

八、CSS Hack
1.什么是css Hack?
因为不一样厂商的流览器或某浏览器的不一样版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不同，致使在不一样浏
览器的环境中呈现出不一致的页面展示效果。这时，咱们为了得到统一的页面效果，就须要针对不一样的浏览器或不一样版本写特定的CSS样式，咱们
把这个针对不一样的浏览器/不一样版本写相应的CSS code的过程，叫作CSS hack!
CSS hack的原理firefox

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+已经再也不支持条件注释)： ，针对
IE6及如下版本： 。这类Hack不只对CSS生效，对写在判断语句里面的全部代码都会生效。
CSS hack书写顺序，通常是将适用范围广、被识别能力强的CSS定义在前面。
三、HTML头部引用Hack
经过 IE 的条件注释来完成的
条件注释：
与html注释类似
if条件判断是否可以解析注释里的内容

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


一、经过条件注释声明，只在IE下生效

二、只在ie6以上的浏览器生效

三、在IE8上不生效

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;

总结：* 或 # ，IE七、IE11 支持。
\9 ，IE八、IE九、IE11 支持。
\0 ，IE八、IE9 支持。
*、#、\九、\0 这几个写法除了IE外其余浏览器均不支持。

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

如下两种状况匹配不出来:

<a>百度</a>

百度
四、:only-child ,匹配是其父元素中的惟一子元素


<a>百度</a>

a:only-child{}能够匹配

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

3.CSS hack分类

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;

总结：* 或 # ，IE七、IE11 支持。
\9 ，IE八、IE九、IE11 支持。
\0 ，IE八、IE9 支持。
*、#、\九、\0 这几个写法除了IE外其余浏览器均不支持。

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

如下两种状况匹配不出来:

<a>百度</a>

百度
四、:only-child ,匹配是其父元素中的惟一子元素


<a>百度</a>

a:only-child{}能够匹配

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

3.CSS hack分类

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;

总结：* 或 # ，IE七、IE11 支持。\9 ，IE八、IE九、IE11 支持。\0 ，IE八、IE9 支持。*、#、\九、\0 这几个写法除了IE外其余浏览器均不支持。