只有當週圍沒有文字時，我纔可以選擇<a>嗎？

我只想在完全由自己選擇錨標籤的情況下選擇錨標籤，這樣我就可以使它們看起來像按鈕，而不會導致句子中的錨點看起來像按鈕。我不想添加額外的類，因爲這是在CMS內進行的。只有當週圍沒有文字時，我纔可以選擇<a>嗎？

我本來想這樣：

article p a:first-child:last-child { 
    background-color: #b83634; 
    color: white; 
    text-transform: uppercase; 
    font-weight: bold; 

    padding: 4px 24px; 
}

但它不工作，因爲文字內容不視爲:first-child或:last-child標準。

我想匹配

<p><a href='#'>Link</a></p>

但不

<p><a href='#'>Link</a> text content</p>

或

<p>text content <a href='#'>Link</a></p>

這可能與CSS？

來源

2015-05-26 Goldentoa11

你不能使用jQuery/JavaScript？ –

我可能會，但如果可能的話，我寧願堅持CSS。這是一個更有趣的問題，看看是否有可能。我確實有其他選擇，儘管這將是我想要的。 – Goldentoa11

嘗試'：empty'僞類。一個缺點是，元素必須是完全空的（沒有空格，標籤等） – Morpheus

簡單的回答是：不，你不能。

如解釋here，here和here，沒有適用於文本節點的CSS選擇器。

如果你可以使用jQuery，看看contains selector。

來源

2015-05-26 15:51:15 Dinei

不幸的是，你不能。

您必須使用JS自身或其任何圖書館來與元素內容進行交互，並找到內容中每個元素的位置。

如果你希望我更新我的答案與JS例如prease要求它。

來源

2015-05-26 15:50:04

呃，別擔心。我可以爲此做JavaScript。我只是希望只有CSS解決方案。它本來就很整潔，恕我直言。大聲笑 – Goldentoa11

這是真的，會很整潔，但...我很抱歉給你一個答案，但有時這是一個:) –

是的，有時你只是普通不能做到這一點你想要的至。 :)我習慣了那個大聲笑 – Goldentoa11

我不認爲這通常是可能的，但你可以靠近。下面是一些有用的地方開始：

獨生子女選擇這將允許您選擇具有像這樣a:only-child {/* css */}沒有兄弟姐妹都a元素。查看更多here。（請參見編輯）
未選擇這將讓您排除可能使用沿着不應該在一個段落選擇所有錨:not(p) > a {/* css */}線的東西的一些元素。查看一些有用的信息here。
結合選擇器儘可能具體。您可能希望所有錨點不在h1中，並且所有錨點不在p中。

例子：

最終產品可能是這樣的：

a:only-child, :not(p) > a {/* css */}

這應該選擇那些只有孩子和不在一個段落錨所有錨。

最後一點：

您可能需要考慮使按鍵實際button或input標籤，讓您的生活更輕鬆。首先獲取HTML通常會使CSS更簡單。

編輯：唯一的孩子忽略了文本，所以這裏幾乎沒用。我想這比我想象的要少得多。

來源

2015-05-26 16:17:21

你知道一種方法來使按鈕的行爲像一個錨點，而不使用窗體或JS？ – Goldentoa11

如果沒有這兩個，我不認爲這是可能的。我已經看到人們將按鈕封裝在錨點中，但這是無效的HTML，可能並不總是工作。 –

只有當週圍沒有文字時，我纔可以選擇<a>嗎？

回答

相關問題