如何在子類中使用CSS創建透明邊框？

-1

我正試圖在圖像下面顯示的頁碼1周圍創建一個透明邊框。我創建了一個子類跨度標籤，以便我可以只定位該元素，但它似乎不工作。我發現了一些類似的問題，說在CSS中創建一個空間，但它仍然無法正常工作。如何在子類中使用CSS創建透明邊框？

像下面那樣。

HTML（請忽略JSP標籤）

<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/> 
<display:setProperty name="paging.banner.first" value='<span class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page <span class="pageNumberBorder">{5}</span> of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/> 
<display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <img src="../images/integration/SlowRight.jpg"/> <img src="../images/integration/FastRight.jpg"/> </span>'/>

CSS

.pagelinks .pageNumberBorder { 
border: 1px solid transparent; 
}

JS Fiddle

來源

2017-05-30 Mike

不是HTML。你是說你想要一個邊框，看起來像第二個圖像，周圍有一個「1」的框？因爲你當前的代碼只是數字 - 看起來像你的第一張圖片。如果你想讓它看起來像第二張圖片，那不是一個透明的邊框。 –

我已經在我的問題中提到要忽略jsp標記。 pagelinks和pageNumberBorder是可以使用css樣式的span類。如果它不是一個透明的邊框那麼它是什麼？我認爲這只是一個邊界。 – Mike

你的小提琴無法複製你的問題是什麼？你可以檢查輸出窗口 –

第二張圖片中的邊框不透明。刪除它

.pagelinks .pageNumberBorder { 
border: 1px solid; 
}

這將現在的工作：JSFiddle

而是圍繞一個頁碼的邊框顯示的輸入欄更改頁面。如果你沒有這個實現，我不會在那裏使用邊框。

爲JSP Pagination看here

來源

2017-05-30 15:13:09

@nocolasmeier。你的JS小提琴根本沒有顯示邊框。 – Mike

@Mike謝謝，我解決了它 –

謝謝Nicolas。 – Mike

我用，而不是創建一個新的類子選擇：

.pagelinks > span {

看到這個小提琴：https://jsfiddle.net/321dan34/2/

附：我將邊框設爲紅色，以查看代碼的工作原理，「透明」屬性隱藏了邊框。

來源

2017-05-30 15:07:20 niandrei

這有什麼不同？你只是通過刪除類來創建效率較低的選擇器 – Pete

@Pete如何創建兩個類並將其加載到內存中比使用一個類更有效？ – niandrei

css選擇器從右到左工作，所以你的選擇器說選擇我所有的跨度在頁面中，現在篩選出那些是pageLinks的直接子對象，而使用2個類，你只會得到所有第二類的項目 - 我猜測會比dom中的所有跨度少得多的元素 - 嘗試一些研究：https://csswizardry.com/2011/09/writing-efficient-css-selectors/ – Pete

回答

相關問題