HTML連載64-a標籤僞類選擇器的注意點與練習

時間 2020-01-19

標籤 html 連載標籤選擇器注意練習欄目 HTML 简体版

原文原文鏈接

1、a標籤的僞類選擇器注意點html

（1）a標籤的僞類選擇器能夠單獨出現，也能夠一塊兒出現。也就是能夠設置多個狀態的樣式。git

（2） a標籤的僞類選擇器若是一塊兒出現，那麼有嚴格的順序要求，編寫的順序必需要遵照原則：（love\hate原則，即link\visited\hover\active）默認狀態、被訪問後的狀態、懸停狀態、長按狀態github

（3）若是默認狀態的阿燕是和被訪問過的狀態的樣式同樣，那麼能夠縮寫爲微信

a{ color:顏色;},後面寫了另外兩種狀態也是不影響的。學習

2、快捷鍵大數據

（1）ul>(li>a)*8再點擊Tab就能夠自動生成列表ui

（2）按住Alt鍵，而後點擊光標向下拉spa

3、練習.net

（1）在企業開發過程當中編寫a標籤的僞類選擇器最好寫在標籤選擇器的後面（2）在企業開發中，和a標籤盒子相關的屬性，都寫在標籤選擇器中（包括盒子的模式、寬度、高度、padding、margin）code

（3）在企業開發中和a標籤文字、背景、相關的都寫在僞類選擇中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> D161_PseudoClassCautions</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            width:960px;

            height:40px;

            background-color: green;

            margin:100px auto;

        }

        li{

            width:120px;

            height:40px;

            list-style: none;/*去掉前面的小黑點*/

            float:left;

            background-color: purple;

            text-align: center;/*文字的水平排版*/

            line-height:40px;/*文字行高和該行同樣高*/

            color:black;



        }

        ul li a {

            /*這個a標籤這裏設置了它的大小，能夠理解爲做用域變成和li同樣大，由於咱們想要讓

            整個小盒子都是做用域，若是不寫這段大小設置的話，那麼做用域就只有文字大小了*/

            width:120px;

            height: 40px;

            display:inline-block;

        }

        ul li a:link{

            color:white;

            text-decoration:none;/*去掉文字下劃線*/

            background-color: pink;/*這裏講解一個方法：就是如何判斷做用域，咱們能夠採用加個背景顏色的方法，來進行判斷*/

        }

        ul li a:hover{

            color:red;

            background-color: grey;



        }

        ul li a:active{

            color:yellow;

        }

    </style>

</head>

<body>

<ul>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

    <li><a href="#">我是導航條</a></li>

</ul>

</body>

</html>