CSS:如何选择一个元素下的两种同级子元素?

html-css07

CSS:如何选择一个元素下的两种同级子元素?,第1张

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>

一般常用的两种是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">

<h1>Welcome Home!</h1>

<p>I like it!</p>

</div>

jquery中css() 方法可以设置或返回被选元素的一个或多个样式属性,下面的例子将返回首个匹配元素的 background-color 值:

$("p").css("background-color")

父级的同级元素的子标签的css样式如下:

//eq(0)表示选择匹配到多个元素中的第一个

$("target").parent().siblings().eq(0).children().eq(0)