CSS3 伪类:before选择器简介说明


摘要：
下文讲述 css 伪类:before的功能简介及举例，如下所示:


css 伪类:before功能说明

:before选择器,向当前匹配的元素中前面插入相应的内容,并为其插入内容设置相应的样式信息

注意事项：
:before选择器 拥有特殊的属性content


css 伪类:before举例应用

例：
向所有的匹配对象div前加入content中的内容，并将其背景设置为黑色，字体设置为白色

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
div:before
{ 
    content:"使用css伪类before插入的相应信息:";
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
 
<div >
  第一个 div元素
</div>
   
<div >
  第二个 div元素
</div>
  
 <div >
  第三个 div元素
</div>
 
</body>
</html>
css 伪类:before应用举例

css 伪类:before应用举例

CSS3 伪类:first-child选择器简介说明


摘要：
下文讲述 css 伪类:first-child的功能简介及举例，如下所示:


css 伪类:first-child功能说明

:first-child选择器,匹配当前父元素中的第一个子元素，为其设置相应的样式信息

注意事项：
:first-child 其功能类似于伪类:nth-child(1)


css 伪类:first-child举例应用

例：
将第一个div元素设置为背景黑色，字体颜色白色

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
div:first-child
{ 
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
 
<div >
  第一个 div元素
</div>
   
<div >
  第二个 div元素
</div>
  
 <div >
  第三个 div元素
</div>
 
</body>
</html>
css 伪类:first-child应用举例

css 伪类:first-child应用举例

CSS3 伪类:first-line选择器简介说明


摘要：
下文讲述 css 伪类:first-line的功能简介及举例，如下所示:


css 伪类:first-line功能说明

:first-line选择器,可为当前元素中第一行设置相应的样式信息

注意事项：
1. :first-line 只可应用于块级元素中
2. :first-line 可设置第一个字母的以下样式信息：
font properties、color properties 、background properties、
word-spacing、letter-spacing、text-decoration、
vertical-align、text-transform、line-height、clear


css 伪类:first-line举例应用

例： 

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title>
<style>
div:first-line
{
	background-color:black;
        color:white;
}
</style>
</head>

<body>
<h1>伪类first-line样式应用举例</h1>
<div>这是一个换行符号  <br />
           这是第二行数据
  </div>
</body>
</html>
css 伪类:first-line应用举例

css 伪类:first-line应用举例