日度归档:2020年1月19日

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


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


css 伪类:link功能说明

:link选择器用于对未访问的链接设置相应的样式信息

注意事项:
当a标签中的链接被访问后,此伪类样式将不起任何作用


css 伪类:link举例应用

例:

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

<a href="http://www.maomao365.com/">maomao365.com</a>
<a href="http://www.linux28.com">linux28</a> 

<p><b>注意:</b>:link选择样式只可应用于
    未点击过的链接。</p>

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

css 伪类:link应用举例

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


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


css 伪类:valid 功能说明

当一个input text中输入的值,同当前类型相符时,样式发生相应的变化

:valid 注意事项
:valid 常作用于 type =number 时输入字母或结合max min属性使用
type =email 时 输入非邮件地址信息


css 伪类:valid 举例应用

例:
当我们input中输入信息为“email地址”时,css样式发生相应的变化

 <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>  
input:valid
{ 
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
</head>
<body>
  
   <input  type="email"    />  
 
</body>
</html>
css 伪类:valid应用举例

css 伪类:valid应用举例

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


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


css 伪类:target功能说明

:target选择器用于 当锚文本链接至相应对象时,为指向对象设置相应的样式


css 伪类:target举例应用

例:
当锚文本点击链接后,链接后的对象背景色修改为黑色,字体颜色设置为白色

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

<h1>锚点被点击后,样式变化</h1>

<p><a href="#href1">锚点1</a></p>
<p><a href="#href2">锚点2</a></p>

<p>当锚点被点击后,文本发生相应的变化</p>

<p id="href1"><b>链接后的内容1</b></p>
<p id="href2"><b>链接后的内容2</b></p>
 

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

css 伪类:target应用举例