复杂选择器
内容生成
多列
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 ,匹配属于其父元素中的首个子元素
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;
}
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
元素被分隔的列数
2、column-gap
列与列之间的间隔
3、column-rule
列规则,列间隔符的宽度、样式、颜色
column-rule:1px solid red;
浏览器兼容问题:
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
8、CSS Hack
1、
2、
3、HTML头部引用Hack
通过 IE 的条件注释 来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容
gt : 选择条件版本以上的版本(不包含条件版本)
gt ie7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie8
gte :选择条件版本以及以上版本
gte ie7
lte :
! :选择条件版本意外的所有版本
! ie6
<!--[if 条件]>
满足条件要做的事情
<![endif]-->
1、通过条件注释声明,只在IE下生效
<!--[if ie]>
这段文本只在ie中显示
<![endif]-->
2、只在ie6以上的浏览器生效
<!--[if gt IE 6]>
<![endif]-->
3、在IE8上不生效
<!--[if ! IE 8]>
<![endif]-->
内容生成
多列
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 ,匹配属于其父元素中的首个子元素
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;
}
案例:
<!DOCTYPE html>
<html>
<head>
<title> 计数器 </title>
<meta charset="utf-8" />
<style>
/*1、定义计数器*/
body{
counter-reset:chp 0;
}
/*2、设置计数器增量*/
p{
counter-increment:chp 1;
}
/*3、使用计数器*/
p:before{
content:"第"counter(chp)"章";
padding-right:10px;
}
</style>
</head>
<body>
<p>张无忌出生</p><!-- 第1章 张无忌出生 -->
<p>张无忌成长</p><!-- 第2章 张无忌成长 -->
<p>张无忌长大</p>
<p>张无忌娶媳妇</p>
<p>张无忌生孩子</p>
</body>
</html>
2、counter-increment
作用:设置每次使用计数器时的增量,默认值为1
属性值:可以为正(递增),也可以为负(递减)
注意:哪个标签用,在那个标签中声明 counter-increment属性
语法:
counter-increment:计数器名称 增量值;
div{
counter-increment:c1 10;
}
函数:
counter(counterName) 函数
作用:使用计数器创建出来的数字文本。
counterName:计数器名称
7、多列
属性:
1、column-count
元素被分隔的列数
2、column-gap
列与列之间的间隔
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;
<span style="white-space:pre"> </span>-moz-column-count:3; /*火狐中的多列设置*/
<span style="white-space:pre"> </span>-moz-column-gap:50px;
<span style="white-space:pre"> </span>-moz-column-rule:2px solid green;
<span style="white-space:pre"> </span>-webkit-column-count:3;/*Chrome 与 Safari*/
<span style="white-space:pre"> </span>-webkit-column-gap:50px;
<span style="white-space:pre"> </span>-webkit-column-rule:2px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title> 多列 </title>
<meta charset="utf-8" />
<style>
#content{
width:400px;
border:1px solid black;
column-count:3;
column-gap:50px;
column-rule:2px solid red;
/*opera*/
-o-column-count:3;
-o-column-gap:50px;
-o-column-rule:2px solid red;
/*Chrome & Safari*/
-webkit-column-count:3;
-webkit-column-gap:50px;
/*-webkit-column-rule:2px solid red;*/
/*Firefox*/
-moz-column-count:3;
-moz-column-gap:50px;
-moz-column-rule:2px solid red;
}
</style>
</head>
<body>
<div id="content">
北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034
音像制品经营许可证苏宿批005号|出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号
网络文化经营许可证京网文[2011]0168-061号Copyright © 2004-2014 京东JD.com 版权所有
京东旗下网站: English Site 拍拍网 网银在线
</div>
</body>
</html>
8、CSS Hack
1、
2、
3、HTML头部引用Hack
通过 IE 的条件注释 来完成的
条件注释:
与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容
gt : 选择条件版本以上的版本(不包含条件版本)
gt ie7
lt : 选择条件版本以下的版本(不包含条件版本)
lt ie8
gte :选择条件版本以及以上版本
gte ie7
lte :
! :选择条件版本意外的所有版本
! ie6
<!--[if 条件]>
满足条件要做的事情
<![endif]-->
1、通过条件注释声明,只在IE下生效
<!--[if ie]>
这段文本只在ie中显示
<![endif]-->
2、只在ie6以上的浏览器生效
<!--[if gt IE 6]>
<![endif]-->
3、在IE8上不生效
<!--[if ! IE 8]>
<![endif]-->