- 伪类和伪元素
伪类选择器和伪元素选择器才真正有意思。利用这些选择器,可以为文档中不一定具体存在的结构指定样式,或者为某些元素(甚至是文档本身)的状态所指示的幻想类指定样式。换句话说,会根据另外某种条件而非文档结构向文档中的某些部分应用样式,而且无法通过研究文档的标记准确的推断出采用何种方式应用样式。
听上去好像是在随机地应用样式,不过并非如此。实际上,这里是根据某种无法提前预测的暂时条件来应用样式,不过,什么情况下将出现样式实际上是明确定义的。可以这样想:在一个赛事中,只要主场球队得分,观众应会欢呼。在比赛中你并不知道球队什么时候得分,但是一旦得分,不出所料,观众就会大声欢呼。尽管无法预测哪 个时刻出现前因,但并不影响对后果的预测。
- 伪类选择器
我们来考虑锚元素(a),在HTML和XHTML中,锚元素会建立从一个文档到另一个文档的链接。这样描述锚固然不错,不过有些锚指示的是已经访问过的页面,而另外一引起则指示尚未访问的而面。只是看HTML标记是无法区别二者的差别的,因为在标记中所有锚看上去都一样。要想区别哪些链接已经访问过,唯一的办法就是将文档中的链接与用户浏览历史相比较。所以,实际上有两种基本的锚类型:已访问的和未访问的。这些类型称为伪类(pseudo-class),使用这些伪类的选择器则称为伪类选择器(pseudo-class selector)。
伪类链接
伪类名 描述 :link 指示作为超链接(即有一个href属性)并指向一个未访问的地址的所有锚。注意,有些浏览器可能会不正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接 :visited 指示作为已访问地址超链接的所有锚
动态伪类
CSS2.1定义了3个动态伪类,它们可以根据用户行为改变文档的外观。这些动态伪类以前总用来设置超链接的样式,不过它们还有很多其他用途。
伪类名 描述 :focus 指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或都能以某种方式激活的元素 :hover 指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上,:hover就会指示这个超链接 :active 指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接
注意:伪类的顺序很重要,通常建议是link-visited-hover-active,不过现在已改为link-visited-focus-hover-active。
- 伪元素选择器
就像伪类为锚指定幻像类一样,伪元素能够在文档中插入假想的元素,从而得到某种效果。CSS2.1中定义了4个伪元素:设置道字母样式、设置第一行样式、设置之前和之后元素的样式。
设置首字母样式
第一个伪元素用于设置一个块级元素首字母的样式,而且仅对该首字母设置样式:
p:first-letter { color:red; }
h2:first-letter{ font-size:200%; }
设置第一行的样式
类似地,:first-line可以用来影响元素中第一个文本行。例如,可以让一个文档中第一段的第一行变色:
p:first-line { color:purple; }
设置之前和之后元素的样式
p:after { content:"内容";.... }/*在元素之前插入内容*/
body:before { content:" Then End." } /*在元素之后插入内容*/
- 小结
通过根据文档的语言来使用选择器,创建人员可以创建丰富的CSS规则。我们可以构建只应用于少数元素的简单规则。对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组,这使得样式表相当简洁,而且非常灵活,相应地可以缩小文件大小,缩短下载时间。
用户代理通常必须慎用选择器,因为如果不能正确的解释选择器,会导致用户代理根本无法使用CSS。另一方面,创作人员要正确地编写选择器,这很关键,因为一旦有错误用户代理将不能按预想那样应用样式。要想正确地理解选择器以及如何组合选择器,需要深入地掌握选择器与文档结构的关系,并了解继承和层叠机制在确定如何为元素设置样式时有怎样的作用。
div四个border
div:after{
content: "";
display: block;/*这句很重要*/
width: 0;
height: 0;
border-right: 100px solid red;
border-left: 100px solid yellow;
border-top: 100px solid blue;
border-bottom: 100px solid green;
}
如果把其它条边框的样式设为:
/*border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;*/
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
样式1
代码:
html:
<div class="div-body">
<div class="div-left1">样式1</div>
</div>
CSS:
.div-body {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 5px;
position: relative;
border: 1px solid #CCC;
}
.div-left1 {
width: 80px;
height: 25px;
background: rgb(105,168,58);
color: #FFF;
text-align: center;
line-height: 25px;
position: absolute;
left:-5px;
top: 10%;
}
.div-left1:before {
content: "";
width: 0;
height: 0;
display: block;/*如要只显示border这句必不可少*/
border:5px solid;
border-color:transparent rgb(105,168,58) transparent transparent;
position: absolute;
left: -5px;
bottom: -5px;
}
.div-left1:after {
content: "";
width: 0;
height: 0;
display: block;/*如要只显示border这句必不可少*/
border:12px solid;
border-color:transparent #fff transparent transparent;
position: absolute;
right: 0px;
top: 0px;
}
思路就是利用两个before和after伪类来生成两个三角形,再用定位放在相应的位置
伪类选择器和伪元素选择器才真正有意思。利用这些选择器,可以为文档中不一定具体存在的结构指定样式,或者为某些元素(甚至是文档本身)的状态所指示的幻想类指定样式。换句话说,会根据另外某种条件而非文档结构向文档中的某些部分应用样式,而且无法通过研究文档的标记准确的推断出采用何种方式应用样式。
听上去好像是在随机地应用样式,不过并非如此。实际上,这里是根据某种无法提前预测的暂时条件来应用样式,不过,什么情况下将出现样式实际上是明确定义的。可以这样想:在一个赛事中,只要主场球队得分,观众应会欢呼。在比赛中你并不知道球队什么时候得分,但是一旦得分,不出所料,观众就会大声欢呼。尽管无法预测哪 个时刻出现前因,但并不影响对后果的预测。
我们来考虑锚元素(a),在HTML和XHTML中,锚元素会建立从一个文档到另一个文档的链接。这样描述锚固然不错,不过有些锚指示的是已经访问过的页面,而另外一引起则指示尚未访问的而面。只是看HTML标记是无法区别二者的差别的,因为在标记中所有锚看上去都一样。要想区别哪些链接已经访问过,唯一的办法就是将文档中的链接与用户浏览历史相比较。所以,实际上有两种基本的锚类型:已访问的和未访问的。这些类型称为伪类(pseudo-class),使用这些伪类的选择器则称为伪类选择器(pseudo-class selector)。
伪类链接
伪类名 | 描述 |
:link | 指示作为超链接(即有一个href属性)并指向一个未访问的地址的所有锚。注意,有些浏览器可能会不正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接 |
:visited | 指示作为已访问地址超链接的所有锚 |
动态伪类
CSS2.1定义了3个动态伪类,它们可以根据用户行为改变文档的外观。这些动态伪类以前总用来设置超链接的样式,不过它们还有很多其他用途。
伪类名 | 描述 |
:focus | 指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或都能以某种方式激活的元素 |
:hover | 指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上,:hover就会指示这个超链接 |
:active | 指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接 |
注意:伪类的顺序很重要,通常建议是link-visited-hover-active,不过现在已改为link-visited-focus-hover-active。
就像伪类为锚指定幻像类一样,伪元素能够在文档中插入假想的元素,从而得到某种效果。CSS2.1中定义了4个伪元素:设置道字母样式、设置第一行样式、设置之前和之后元素的样式。
设置首字母样式
第一个伪元素用于设置一个块级元素首字母的样式,而且仅对该首字母设置样式:
p:first-letter { color:red; }
h2:first-letter{ font-size:200%; }
设置第一行的样式
类似地,:first-line可以用来影响元素中第一个文本行。例如,可以让一个文档中第一段的第一行变色:
p:first-line { color:purple; }
设置之前和之后元素的样式
p:after { content:"内容";.... }/*在元素之前插入内容*/
body:before { content:" Then End." } /*在元素之后插入内容*/
通过根据文档的语言来使用选择器,创建人员可以创建丰富的CSS规则。我们可以构建只应用于少数元素的简单规则。对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组,这使得样式表相当简洁,而且非常灵活,相应地可以缩小文件大小,缩短下载时间。
用户代理通常必须慎用选择器,因为如果不能正确的解释选择器,会导致用户代理根本无法使用CSS。另一方面,创作人员要正确地编写选择器,这很关键,因为一旦有错误用户代理将不能按预想那样应用样式。要想正确地理解选择器以及如何组合选择器,需要深入地掌握选择器与文档结构的关系,并了解继承和层叠机制在确定如何为元素设置样式时有怎样的作用。
div:after{
content: "";
display: block;/*这句很重要*/
width: 0;
height: 0;
border-right: 100px solid red;
border-left: 100px solid yellow;
border-top: 100px solid blue;
border-bottom: 100px solid green;
}
/*border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;*/
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
样式1
<div class="div-body">
<div class="div-left1">样式1</div>
</div>
CSS:
.div-body {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 5px;
position: relative;
border: 1px solid #CCC;
}
.div-left1 {
width: 80px;
height: 25px;
background: rgb(105,168,58);
color: #FFF;
text-align: center;
line-height: 25px;
position: absolute;
left:-5px;
top: 10%;
}
.div-left1:before {
content: "";
width: 0;
height: 0;
display: block;/*如要只显示border这句必不可少*/
border:5px solid;
border-color:transparent rgb(105,168,58) transparent transparent;
position: absolute;
left: -5px;
bottom: -5px;
}
.div-left1:after {
content: "";
width: 0;
height: 0;
display: block;/*如要只显示border这句必不可少*/
border:12px solid;
border-color:transparent #fff transparent transparent;
position: absolute;
right: 0px;
top: 0px;
}
思路就是利用两个before和after伪类来生成两个三角形,再用定位放在相应的位置