日度归档:2020年1月20日

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


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


css 伪类:lang功能说明

:lang选择器,为设置了lang(**)属性的元素,设置其样式信息


css 伪类:lang举例应用

例:
lang(maomao)设置样式信息

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
div:lang(maomao)
{  
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
 
<div  lang ='maomao' >
   设置了lang =maomao 
</div>
   
<div lang ='maomao365' >
  未设置lang =maomao 属性
</div> 
 

 <div >
  未设置lang  属性
</div> 
 

</body>
</html>
css 伪类:lang应用举例

css 伪类:lang应用举例

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


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


css 伪类:after功能说明

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

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


css 伪类:after举例应用

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

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

css 伪类:after应用举例

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应用举例