1006

1、CSS普通兄弟选择器是指所有连接到另一个元素的元素,两者都有相同的父元素。

2、普通兄弟选择器使用波浪号(~)作为普通兄弟的结合符。

实例

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>普通兄弟选择器</title>
<style>
.ancestor{
width:500px;
height:300px;

.parent{
width:300px;
height:200px;

.child{
width:200px;
height:100px;

/*定位的是.child1的后面兄弟为div的元素*/
.child1~div{
background-color:lightcoral;

</style>
</head>
<body>
<div>
thisisancestor.
<div>
thisisparent.
<div>thisischild0.</div>
<div>thisischild1.</div>
<div>thisischild2.</div>
<div>thisischild3.</div>
</div>
</div>
</body>
</html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。