css選擇一個元素下的2中同級元素,我們首先還是需要獲取到這個元素,可以通過給這個元素一個id或者是class來做,選擇同級子元素,一般設置的都是相同的css樣式,所以,在同級子元素的選取中css是通過一個','來隔開元素名,然后其他的還是一樣的書寫css樣式,請看代碼:
網站建設哪家好,找創新互聯!專注于網頁設計、網站建設、微信開發、小程序制作、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了漣水免費建站歡迎大家使用!
html
head
style
#div1{
width:600px;
height:40px;
font-size:13px;
}
#div1 p,span{ //通過一個‘,’實現對2個同級子元素的選取
display:block;
width:300px;
height:30px;
text-align:center;
margin:0 auto;
}
/head
body
div id='div1'
p我是測試文字/p
span我是測試文字1/span
/div
/body
/html
jquery中css() 方法可以設置或返回被選元素的一個或多個樣式屬性,下面的例子將返回首個匹配元素的 background-color 值:
$("p").css("background-color");
父級的同級元素的子標簽的css樣式如下:
//eq(0)表示選擇匹配到多個元素中的第一個
$("target").parent().siblings().eq(0).children().eq(0)
你可以讓span相對于div來定位啊,這樣就不用管input的長度和位置了。當然,input也要通過設置text-indent來給span騰出位置。下面是個簡單的實現例子(為了方便,我用了內聯的css,你可以改成外聯的):
div?style="position:relative"input?type="text"?id="xj_zhanghao"?class="xj_text"?maxlength="16"?style="text-indent:20px"?placeholder="賬號"?onKeyUp="xjzhltishi()"?onFocus="qcxjtishi()"/span?id="xjzhtishi"?style="position:absolute;?left:3px;?top:3px;?width:14px;?padding:1px;?line-height:1;?text-align:center;?background-color:red;?color:white;?font-size:11px;?border-radius:2px"99/span/div
b這一類的元素都是a的同級元素并且是a元素之后的就可以a:hover~b{....}
完美解決 ,經測試!
附上我自己的代碼:
ul?li?a?img:hover?~h3?{
padding-bottom:?10px;
color:?#25AAFF!important;
border-bottom:?2px?solid?#25AAFF;
}
一般常用的兩種是ng-style跟ng-class
1、ng-style
ng-style?指令為 HTML 元素添加 style 屬性。
ng-style?屬性值必須是對象,表達式返回的也是對象。
對象由 CSS 屬性和值組成,即 key=value 對。
例如:
body?ng-app="myApp"?ng-controller="myCtrl"
h1?ng-style="myObj"菜鳥教程/h1
script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
/script
/body
2、ng-class
ng-class?指令用于給 HTML 元素動態綁定一個或多個 CSS 類。
ng-class?指令的值可以是字符串,對象,或一個數組。
如果是字符串,多個類名使用空格分隔。
如果是對象,需要使用 key-value 對,key 為你想要添加的類名,value 是一個布爾值。只有在 value 為 true 時類才會被添加。
如果是數組,可以由字符串或對象組合組成,數組的元素可以是字符串或對象。
例如:
select?ng-model="home"
option?value="sky"Sky/option
option?value="tomato"Tomato/option
/select
div?ng-class="home"
h1Welcome Home!/h1
pI like it!/p
/div
網站名稱:包含css樣式同級的詞條
本文鏈接:http://vcdvsql.cn/article10/dsdecdo.html
成都網站建設公司_創新互聯,為您提供建站公司、品牌網站建設、標簽優化、用戶體驗、品牌網站設計、定制開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯