一、包含选择器
珸法:基礑迭拝器1基柮迭拝器2{声明}
含乂:迭中[所有迭拝器1表示的元素]中所包含的所有[迭拝器2表示的元素]
例如:
ul li{ color:red; }
<ul>
<li>苹果</li>
<li>橙子</li>
<li>西瓜</li>
</ul>
注意:包含选择器会选中选择器1中所有的选择器2表示的元素,只要存在于选择器1表示的范畴之内,就会被选中。
--代码-- Title
<style>
.container{
width: 350px;
height: 70px;
border: 1px solid black;
text-align: center;
display: inline-block; /*象的内容作为块对象呈递*/
}
p{
display: inline-block;
border: 2px solid orange;
}
.item{
display: inline-block;
border: 2px solid blue;
}
.item span{
font-size: 25px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<p>
<span>span1</span>
</p>
<span>span2</span>
<div class="item">
<span>span3</span>
</div>
<span>span4</span>
</div>
<span>span5</span>
<span>span6</span>
</body>
--显示--
二、子选择器
语法:基础选择器1 >基础选择器2{声明}
含义:选中[所有选择器1表示的元素]中所包含的所有[ 选择器2表示的直接子元素]
例如:
div> .anchor{ color:red;}
<div>
<a class= 'anchor' >苹果</a>
<a>橙子</a>
<p><a class= anchor >香蕉</a></p>
</div>
--
注意:子选择器只会选中
选择器1中所有的选择器2表示的直接子元素,对非直接子级,但满足选择器2的元素不起作用。
三、相邻选择器
语法:基础选择器1 +基础选择器2{声明}
含义:选中[所有选择器1表示的元素]之后的第一个同级[选择器2表示的元素]
例如:
div+ . anchor{ color:red; }
<div>
<a class= 'anchor' >苹果</a></div>
<a class= anchor' >香蕉</a>
<a class='anchor' >菠萝</a>
四、兄弟选择器
语法:基础选择器1 ~基础选择器2{声明}
含义:选中[所有选择器1表示的元素]之后的所有同级[选择器2表示的元素]
例如:
div~. anchor{ color:red; }
< div>
<a class='anchor' >苹果</a></div>
<a class= 'anchor' >香蕉</a>
<a class= 'anchor' >菠萝</a>
注意:兄弟选择器能够选中
选择器1表示的元素之后的所有选择器2表示元素但是对内部或前面,但满足选择器2的元素不起作用。
