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