a標籤僞類選擇器以及僞元素:hover的案例

時間 2019-11-13

標籤標籤選擇器以及元素 hover 案例简体版

原文原文鏈接

1.經過咱們的觀察發現a標籤存在必定的狀態
1.1默認狀態, 從未被訪問過
1.2被訪問過的狀態
1.3鼠標長按狀態
1.4鼠標懸停在a標籤上狀態

2.什麼是a標籤的僞類選擇器?
a標籤的僞類選擇器是專門用來修改a標籤不一樣狀態的樣式的

3.格式
   :link 修改從未被訪問過狀態下的樣式
   :visited 修改被訪問過的狀態下的樣式
   :hover 修改鼠標懸停在a標籤上狀態下的樣式
   :active 修改鼠標長按狀態下的樣式

4.注意點
4.1a標籤的僞類選擇器能夠單獨出現也能夠一塊兒出現
4.2a標籤的僞類選擇器若是一塊兒出現, 那麼有嚴格的順序要求
編寫的順序必需要個的遵照愛恨原則 love hate
4.3若是默認狀態的樣式和被訪問過狀態的樣式同樣, 那麼能夠縮寫

代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>86-a標籤的僞類選擇器</title>
    <style>
        /* a:link{ color: tomato; } a:visited{ color: green; } a:hover{ color: orange; } a:active{ color: pink; } */ a{ // 簡寫格式
 color: green; } /*a:link{*/
            /*color: green;*/
        /*}*/
        /*a:visited{*/
            /*color: green;*/
        /*}*/ a:hover{ color: orange; } a:active{ color: pink; } </style>
</head>
<body>
<a href="http://www.taobao.com">taobao</a>
<a href="http://www.jd.com">jd</a>
</body>
</html>

1.在企業開發中編寫a標籤的僞類選擇器最好寫在標籤選擇器的後面

2.在企業開發中和a標籤盒子相關的屬性都寫在標籤選擇器中（顯示模式/寬度/寬度）

3.在企業開發中a標籤文字/背景/相關的都寫在僞類選擇器中


五.  下面是經過:hover來修改圖片寬度而達到頁面伸展的動畫小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>92-過渡模塊-手風琴效果</title>
    <style>
        *{ margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; background-color: red; float: left; /*border: 1px solid #000;*/
            /*box-sizing: border-box;*/
            /*transition-property: width;*/
            /*transition-duration: 0.5s;*/ transition: width 0.5s; } /*經過僞元素:hover修改鼠標懸停ul標籤上的狀態*/
        /*當鼠標懸停在ul上, 就會修改ul的子元素li的寬度*/ ul:hover li{ width: 100px; } /*當鼠標懸停在ul的子元素li上時, 就會修改子元素li的寬度*/ ul li:hover{ width: 460px; } </style>
</head>
<body>
<ul>
    <li><img src="images/ad1.jpg" alt=""></li>
    <li><img src="images/ad2.jpg" alt=""></li>
    <li><img src="images/ad3.jpg" alt=""></li>
    <li><img src="images/ad4.jpg" alt=""></li>
    <li><img src="images/ad5.jpg" alt=""></li>
    <li><img src="images/ad6.jpg" alt=""></li>
</ul>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。