後代選擇器幫助CSS

HTML和CSS非常新，但嘗試學習新技能。後代選擇器幫助CSS

我想選擇嵌套在一個錨和一個li標籤內的「Read More」錨標籤。我似乎無法找到將在CSS中選擇此標籤的後代選擇器。任何幫助，將不勝感激。我想在不添加任何其他類或ID的情況下執行此操作。

代碼如下。

`<ul> 
    <li class="Directory"> 
    <a href="#"> 
    <img class="icon" src="images/folder.png"> 
    <h4>Directory</h4> 
    <h5>Map View, Locations,<br>Companies,Vendors</h5> 
    <img class="line" src="images/line.png"> 
    <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p> 
    <a href="#" >Read More</a> 
    </a>`

來源

2015-10-21 Aaron Kennedy

你不應該巢''在''。 – makshh

有很多種方法可以選擇這個元素，但正如所說的，首先需要排除無效的HTML，因爲在a中不能有'a'。 –

正如丹尼指出的那樣，你可以用一個：最後一個孩子來定位它。我同意makshh說你不應該在a裏面嵌套一個。我建議的一點是降低目標的特異性。下面是關於它爲什麼這樣做很重要的一個良好的讀取和更新的例子：

Strategies for keeping CSS specificity low

.Directory a:last-child { 
 
    border: solid 1px #000000; 
 
}

<ul> 
 
    <li class="Directory"> 
 
    <a href="#"> 
 
     <img class="icon" src="images/folder.png"> 
 
     <h4>Directory</h4> 
 
     <h5>Map View, Locations,<br>Companies,Vendors</h5> 
 
     <img class="line" src="images/line.png"> 
 
     <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p> 
 
     <a href="#">Read More</a> 
 
    </a> 
 
    </li> 
 
</ul>

來源

2015-10-21 00:40:06 dmontooth

您不僅應該嵌套錨標籤，您不允許這樣做。 http://stackoverflow.com/questions/18666915/why-are-nested-anchor-tags-illegal –

在這種情況下，你可以使用：:last-child

事情是這樣的：

ul li.Directory a:last-child { 
 
    border: solid 1px #000000; 
 
}

<ul> 
 
    <li class="Directory"> 
 
    <a href="#"> 
 
     <img class="icon" src="images/folder.png"> 
 
     <h4>Directory</h4> 
 
     <h5>Map View, Locations,<br>Companies,Vendors</h5> 
 
     <img class="line" src="images/line.png"> 
 
     <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p> 
 
     <a href="#">Read More</a> 
 
    </a> 
 
    </li> 
 
</ul>

如果需要更改鏈接的外觀，你可以添加:link。事情是這樣的：

ul li.Directory a:last-child:link { 
 
    border: solid 1px #000000; 
 
    padding: 5px; 
 
    text-decoration: none; 
 
}

<ul> 
 
    <li class="Directory"> 
 
    <a href="#"> 
 
     <img class="icon" src="images/folder.png"> 
 
     <h4>Directory</h4> 
 
     <h5>Map View, Locations,<br>Companies,Vendors</h5> 
 
     <img class="line" src="images/line.png"> 
 
     <p>Pellentesque ac dui elit. Ut sollicitudin faucibus tellus ut rutrum. Nam pretium fringilla dignissim.</p> 
 
     <a href="#">Read More</a> 
 
    </a> 
 
    </li> 
 
</ul>

順便說一句，這是一個很好的做法驗證您的標記。我想推薦你的下一個環節：

這是非常重要的，因爲它可以幫助我們遵循W3C標準顯著，避免瀏覽器之間的兼容性問題。

來源

2015-10-21 00:27:46

謝謝大家的幫助.....最後一個孩子選擇器工作。我已經閱讀了一些關於嵌套在鏈接中的鏈接，並將重新考慮代碼。 –

是的，嘗試使用這些驗證器鏈接來避免標記中的錯誤。這將有助於很多。 –

後代選擇器幫助CSS

回答

相關問題