web_tests
/
伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .js{
            color: red;
            font-size: 20px;
        }
        strong div:nth-child(2){
            color: red;
            width:400px;
            height:200px;
            font-family: '黑体';
        }
        a:active{
            color: aqua;
        }
        a:after{
            color: black;
        }
        a:link{
            color: brown;
        }
        a:hover{
            color: blue;
        }
        table tr:nth-of-type(odd){
            color: #ff1bd8;
        }
        td{
            width: 100px;
        }
        div::first-letter{
            color: #0ff;
            font-size: 25px;
        }
        div::first-line{
            color: green;
            line-height:1.5
        }
    </style>
</head>
<body>
    <p>属性选择器：</p>
    <p>计算机与信息学院开设有计算机科学与技术、物联网工程、<strong class="js">数字媒体技术</strong>、信息管理与信息系统、通信工程、<strong class="js">电子信息工程</strong>、电子信息科学与技术等7个本科专业
    </p>
    <p>伪类与伪元素选择器:</p>
    <div>本div块是body的first-child，但是为第一行</div>
    <strong>
        <div>本div块是strong的first-child，本行按指定格式显示</div>
        <div>计算机是信息加工工具。如果说人类制造的其他工具是人类双手的延伸，那么计算机作为代替人脑进行信息加工的工具，
            则可以说是人类大脑的延伸。2009年2月IBM宣布，该公司将建造一台能够进行每秒20千万亿次浮点运算的计算机，其运算能力相当于200多万台笔记本电脑。
            阿根廷的《21世纪趋势周刊》网站援引美国微软公司的一项报告称，人与计算机之间的生理界限将在2020年消失。
        </div>
    </strong>
    <a target="_blank" href="http://it.ctgu.edu.cn">三峡大学计算机与信息学院</a>
    <div>本div块是body的last-child，请按指定格式显示<br/>本行为该div的第二行</div>
    <table style="border: navy solid 1px; line-height: 1.5; width: auto;">
        <caption style="font-size: 18px;font-weight: bolder;">奇数行紫色</caption>
        <tr>
            <td>1</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>2</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>3</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>4</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>5</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </table>
</body>
</html>