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

html-css067

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>

举个例子

在html文档中有以下内容

<p class="abc">...</p>

<div class="abc">...</div>

然后就可以在css里面针对上面的p和div写不同的属性

p.abc { aaa }

div.abc { bbb }

以上语句的意思就是：aaa只是作用于<p class="abc">...</p>这样的元素，bbb只是作用与<div class="abc">...</div>这样的规则

记住p.abc和div.abc逗号之前不要有空格