目录
CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special
h3(标记选择器).class(类别选择器) {
color:red; font-size:25px;}
记忆技巧:
交集选择器是并且的意思。即…又…的意思
比如: p.one 选择的是:类名为 .one 的 段落标签
用的比较少,不太建议使用
并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
.class(类别选择器),h3(标记选择器) {
color:red; font-size:25px;}
记忆技巧:
并集选择器 和 的意思,就是说,只要逗号隔开的,所有选择器都会执行后面样式。
比如 .one,p,#test {
color:#F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
<head>
<title></title>
<style type="text/css">
div,
p,
span,
h1.hh {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>刘德华</div>
<p>张学友</p>
<span>郭富城</span>
<h1>黎明</h1>
<h1>黑夜</h1>
<h1 class="hh">黄昏</h1>
</body>
【网页中显示为:】
后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
.class(类别选择器),h3(标记选择器) {
color:red; font-size:25px;}
子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。
<head>
<title></title>
<style type="text/css">
div p {
color: pink;
}
.si p {
color: blue;
}
</style>
</