簡體   English   中英

如何在后跟span標簽時選擇輸入標簽?

[英]How to select input tag when followed by span tag?

我想在后跟span時選擇一個input標記:

HTML:

<input type="text"/>
<span>
    ...
</span>

CSS:

input [followed span] {
    padding:5px; (set input padding, only when followed by span)
}

您可以使用+ selector選擇緊跟在<input>元素后面的所有<span> <input>元素

 input + span { background-color: yellow; } 
 <input type="text"> <span>test</span> 


如果要選擇<span>之前放置的<input> <span> 這在css中是不可行的,因為,

級聯樣式表:級聯就像瀑布,沒有向后運動。 所以,很自然地,CSS中沒有先前的兄弟選擇器。

閱讀更多https://www.wikitechy.com/technology/previous-sibling-css-selector/


你可以嘗試的是jQuery的.prev() ..

 $(document).ready(function(){ $('span').prev().css('background','yellow'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <span>test</span> 

有關.prev()更多信息https://www.w3schools.com/jquery/traversing_prev.asp

這將返回span標記中的內容,但是您需要通過使用class或id來指定您指向哪個輸入標記以獲得精確結果。

$("input").closest("span").html()

你可以使用以下方法做相鄰的兄弟選擇器:

input + span {  
  opacity: 0;
  transition: all 0.3s;
}

或者您可以使用以下方法執行General Sibling Selector:

input ~ span {  
  opacity: 0;
  transition: all 0.3s;
}

以下是更多信息: http//cssmenumaker.com/blog/10-handy-css-selectors/

CSS不提供“之前”選擇器。 唯一的解決方案是為每個元素添加一個類並為其設置樣式或使用jquery執行此操作:

.inputs_before_span {
color: #0cc;
}

$('span').prev('span').addClass('inputs_before_span')

使用此css:

.wrapper {
    position: relative;
}

input {
    padding-left: 48px;
}

.wrapper span {
    position: absolute;
    left: 2px;
}

HTML:

<div class="wrapper">
    <input type="url" placeholder="e.g. www.google.com" />
    <span>http://</span>    
</div>

來源: 使用HTML + CSS顯示輸入的跨度

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM