前端笔记——CSS(九)——选择器、伪类、伪元素

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)

CSS 伪类(Pseudo-classes)

语法

伪类的语法:
selector:pseudo-class {property:value;}
CSS类也可以使用伪类:
selector.class:pseudo-class {property:value;}

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。

CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, !DOCTYPE 必须已经声明.</p>
</body>
</html>

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法:
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:
selector.class:pseudo-element {property:value;}

:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
</html>
注意:"first-line" 伪元素只能用于块级元素。

注意: 下面的属性可应用于 "first-line" 伪元素:

font properties
color properties 
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式:</p>
</body>
</html>
注意: "first-letter" 伪元素只能用于块级元素。

注意: 下面的属性可应用于 "first-letter" 伪元素: 

font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章