Examples of using css pseudo-classes and pseudo-elements-CSS Tutorial-php.cn

Examples of using css pseudo-classes and pseudo-elements

黄舟

Release： 2016-12-28 16:20:01

Original

1414 people have browsed it

The pseudo-class in css is often used to set the status of a tag, and the pseudo-element sets the style of the tag.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css伪类-标签的状态;伪元素</title>  
    <!-- 伪类 可以 被 标签，id，class 指定使用-->  
    <style>  
        /*伪类将应用于未被访问过的链接，与:visited互斥。*/  
        :link {  
            color: red;  
        }  
  
        /*伪类将应用于有鼠标指针悬停于其上的元素。*/  
        a:visited {  
            color: green;  
        }  
  
        /*伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。*/  
        a:hover {  
            color: blue;  
        }  
  
        /*伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。*/  
        a:active {  
            color: orange;  
        }  
  
        .inputName:focus {  
            background-color: orange;  
        }  
  
        /*伪元素 第一行*/  
        :first-line {  
  
        }  
  
        /*伪元素 第一个字符*/  
        :first-letter {  
  
        }  
  
        /*伪元素 第一个 子元素（第一个子元素是子元素的span标签*/  
        span:first-child {  
            font-size: 19px;  
            color: brown;  
        }  
  
        /*伪元素 after before,指定 位置 插入 内容 content*/  
        .div1:after {  
            /*after,before特有 属性*/  
            content: "-------";  
        }  
  
    </style>  
</head>  
<body>  
<a href="#">当前网页</a>  
<a href="http://www.baidu.com">百度一下</a>  
<a href="http://itcast.cn">传智播客官网</a>  
<a href="http://www.163.com">网易</a>  
<a href="http://www.sina.com">新浪</a>  
<br>  
<input type="text" class="inputName" value="123">  
<hr>  
<div>  
    <span>111</span>  
    <span>222</span>  
    <span>333</span>  
</div>  
<div class="div1">  
    <span>111</span>  
    <span>222</span>  
    <span>333</span>  
</div>  
  
</body>  
</html>

Copy after login

The above is the content of the usage examples of CSS pseudo-classes and pseudo-elements. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!