CSS簡單的類調用問題

不是Web開發人員，所以我希望如果這個問題沒有意義，你會讓我不知所云。我嘗試了很多方法，但由於缺乏CSS知識，所以不適合我。CSS簡單的類調用問題

我有一個網頁結構如下

<div id="content"> 
    <div class="archive"> 
     <div class="left-archive"> 
     <h3><a>Main Left tile</a></h3> 
     <ul> 
     <li><a link>Link title</a></li> 
     </ul> 
     </div> 
     <div class="right-archive"> 
      <h3><a>Main Right tile</a></h3> 
     <ul> 
     <li><a link> Link title</a></li> 
     </ul> 
     </div> 
    </div> 
</div>

現在，我的本意是，當第一頁顯示所有環節應該強調，當我將鼠標懸停在他們text-decoration應該none。我寫這篇文章的CSS代碼

.archive ul li a:hover{ 
    text-decoration:none; 
    outline:medium none; 
} 
.archive ul li a:visited { 
    color:#4280B4; 
    text-decoration:underline; 
} 

.archive h3 a:visited{ 
    color:#CE4F00; 
    text-decoration:underline; 
} 


.archive h3 a:hover{ 
    color:#3C78A7; 
    text-decoration:none; 
}

但這不是工作，它從採摘相同的CSS文件中的以下的CSS項

a:link, a:visited { 
    color: #3c78a7; 
    text-decoration:none 
    } 

a:hover, a:active { 
    color: #3c78a7; 
    text-decoration:underline; 
    }

老實說，我所做的就是簡單的命中和審判什麼是logical.Can任何人都可以引導我走向正確的道路，我如何才能實現正確的行爲。

在此先感謝

來源

2012-01-10 Umesh Awasthi

這可能是什麼首先出現在你的CSS文件depened。嘗試互相替換它們。 – 2012-01-10 15:15:59

您的選擇器中有太多空間。在代碼中是這樣嗎？還是它在SO上的格式問題？ – Filip 2012-01-10 15:17:30

@MichaelSazonov：我在去年提到第一次來在CSS和我所定義是在文件 – 2012-01-10 15:18:28

也許是因爲你還沒有爲通用錨點標記鏈接寫入css屬性。像

.archive ul li a 
{ 
    text-decoration:underline; 
} 

.archive ul li a:hover 
{ 
    text-decoration:none; 
}

然後當你懸停時，你會得到預期的效果。

來源

2012-01-10 15:35:06 vishakvkt

感謝那些解決了大部分的問題和其餘的我想通了，我自己 – 2012-01-10 15:44:13

你必須以特定的順序，以指定的樣式，當你定義它們：

link 

visited 

active 

hover

編輯：響應您的評論。您編寫CSS的物理順序對錨點很重要（a標記）。在正在使用的CSS（您的第三個代碼段）中，visited鏈接的CSS代碼出現在active鏈接的代碼之前。

在第二片斷自己的代碼，你有hover爲ul li的CSS visited之前。您應該簡單地顛倒這兩個CSS規則的順序。

我不確定爲什麼你的CSS爲h3不起作用，除了可能它想要一個link的CSS規則。

來源

2012-01-10 15:19:10 DOK

你可以定義一個bit.Being新的CSS我不知道什麼確切的，這意味着:) – 2012-01-10 15:30:09

在你的CSS結束

li a 
{ 
    text-decoration:underline; 
}

來源

2012-01-10 15:19:27

在一些瀏覽器，除非你specifiy實際HREF的 <a>（錨）標籤將不會呈現爲hoverable鏈接

添加此=「＃」

這無論如何，Chrome都是這種情況。如果我在你的示例html中指定hrefs爲4 <a>的作品。

<div id="content"> 
    <div class="archive"> 
     <div class="left-archive"> 
     <h3><a href="#">Main Left tile</a></h3> 
     <ul> 
     <li><a href="#">Link title</a></li> 
     </ul> 
     </div> 
     <div class="right-archive"> 
      <h3><a href="#">Main Right tile</a></h3> 
     <ul> 
     <li><a href="#"> Link title</a></li> 
     </ul> 
     </div> 
    </div> 
</div>

來源

2012-01-10 15:20:10

對不起，在此就不提供充分的信息case.I有'我''標籤，甚至鏈接來精細href'。 – 2012-01-10 15:22:58

這可能是你想要的。

<html> 
<head> 
    <style rel="stylesheet" type="text/css"> 
    .archive ul li a:hover{ 
    text-decoration:none; 
    outline:medium none; 
    } 
.archive ul li a:visited { 
color:#4280B4; 
text-decoration:underline; 
} 

.archive h3 a:visited{ 
color:#CE4F00; 
text-decoration:underline; 
} 


.archive h3 a:hover{ 
color:#3C78A7; 
text-decoration:none; 
} 
</style> 
</head> 
<body> 
<div id="content"> 
<div class="archive"> 
    <div class="left-archive"> 
    <h3><a>Main Left tile</a></h3> 
    <ul> 
    <li><a class="link" href="#">Link title</a></li> 
    </ul> 
    </div> 
    <div class="right-archive"> 
     <h3><a>Main Right tile</a></h3> 
    <ul> 
    <li><a class="link" href="#"> Link title</a></li> 
    </ul> 
    </div> 
</div> 
</div> 
</body>

您的href值可能會有所不同。唯一改變的是錨標籤部分。

來源

2012-01-10 15:29:26

你有錨和沒有鏈接。您還向所有鏈接添加了下劃線，這與您所說的內容相反。我添加了'a'，以便您的風格也適用於他們。此外，錨標籤沒有「鏈接」屬性。

這是一個活生生的例子還有：http://jsfiddle.net/khalifah/jymK3/

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      a, a:link, a:visited { 
       color: #3c78a7; 
       text-decoration: underline 
      } 

      a:hover, a:active { 
       color: #3c78a7; 
       text-decoration: underline 
      } 

      .archive ul li a:hover{ 
       text-decoration: none; 
       outline: medium none 
      } 
      .archive ul li a:visited { 
       color: #4280B4; 
       text-decoration: underline 
      } 

      .archive h3 a:visited{ 
       color: #CE4F00; 
       text-decoration: underline 
      } 

      .archive h3 a:hover{ 
       color: #3C78A7; 
       text-decoration: none 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <div class="archive"> 
       <div class="left-archive"> 
        <h3><a>Main Left tile</a></h3> 
        <ul> 
         <li><a>Link title</a></li> 
        </ul> 
       </div> 
       <div class="right-archive"> 
        <h3><a>Main Right tile</a></h3> 
        <ul> 
         <li><a> Link title</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
<html>

來源

2012-01-10 15:47:18 b01

CSS簡單的類調用問題

回答

相關問題