前面我们已经讲了3种选择器,复合选择器就是两个或多个基本选择器的组合,来实现更复杂的选择功能。
交集选择器
交集选择器就是两个选择器的直接链接构成的,其结果是选中两者各自作用范围的交集。第一个必须是标记选择器,第二个必须是类选择器或ID选择器。
交集选择器的基本语法如下。给出一个交集选择器的定义
div.class1{
color:red;
font-size:10px;
font-weight:bold;
}
来看一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
color:blue;
font-size: 9px;
}
.class1{
font-size: 12px;
}
div.class1{
color:red;
font-size: 20px;
font-weight: 900;
}
</style>
</head>
<body>
<div>正常div标记,蓝色</div>
<p class="class1">类选择器,12px</p>
<div class="class1">交集选择器,红色,加粗</div>
</body>
</html>
并集选择器
来看例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div,h1,p{
color:blue;
font-size: 9px;
}
div.class1,.class1,#id1{
color:red;
font-size: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div>正常div标记,蓝色</div>
<p class="class1">类选择器,12px</p>
<div class="class1">交集选择器,红色,加粗</div>
<span id="id1">红色,加粗,10px</span>
</body>
</html>
代码种首先通过并集选择器声明了div、h1、p等元素样式,这些格式相同,另一组并集选择器声明了div.class1、.class、#id1等元素。
并集选择器的作用就是对多个选择器进行集体声明。
后代选择器
在CSS选择器中还可以通过嵌套的方式对精确的位置HTML标记进行控制,当<div>与</div>之间还有<b>标记时就可以使用后代选择器的方式来控制。语法就是将外层的选择器写在前面,内层标记写在后面,用空格隔开。来看例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
div{
font-family: 幼圆;
color: blue;
font-size: 25px;
font-weight: bold;
}
div li{
margin: 0px;
padding: 5px;
list-style: none;
}
div li a{
text-decoration: none;
}
</style>
<body>
<div><a href="#">请选择下列选择器</a>
<ul>
<li><a href="#">交集选择器</a></li>
<li><a href="#">并集选择器</a></li>
<li><a href="#">后代选择器</a></li>
<li><a href="#">子选择器</a></li>
<li><a href="#">相邻选择器</a></li>
</ul>
</div>
</body>
</html>
这个例子在导航栏的制作上应用比较广范,和其他的CSS选择器一样,后代选择器定义的具有继承性的样式同样也能被其他其子元素继承。不仅标记选择器可以嵌套,类选择器和ID选择器都可以嵌套使用。
子选择器
子选择器用于选中标记的直接后代,定义符号是大于符号,来看例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
div>p{
font-family: 幼圆;
color: blue;
font-size: 25px;
font-weight: bold;
}
</style>
<body>
<div>
<p>本行应用了子选择器。</p>
<em>
<p>本行不是div的直接后代,子选择器无效</p>
</em>
</div>
</body>
</html>
上面的例子既可以很直接的了解子选择器和直接后代的概念。
相邻选择器
直接来看例子更好的理解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
div+p{
font-family: 幼圆;
color: blue;
font-size: 25px;
font-weight: bold;
}
</style>
<body>
<div>相邻选择器是在CSS2.1以后添加的</div>
<p>本行应用相邻选择器。</p>
<p>本行与div不相邻,相邻选择器无效</p>
*************************************
<div>相邻选择器是在CSS2.1以后添加的
<p>本行与div不相邻,相邻选择器无效</p>/*它是div的子元素*/
</div>
*****************************************
<div>相邻选择器是在CSS2.1以后添加的</div>
本行没有标记,不影响相邻选择器
<p>本行应用相邻选择器。</p>
</body>
</html>
相邻选择器是可以用于同一级的样式设计。
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
*{
text-decoration: none;
font-size: 16px;
}
a[href^="http"]:before{
content: 超文本传输协议;
}
a[href$="jog"],a[href="png"]::after{
content: 图像;
color: blue;
}
</style>
<body>
<ul>
<li><a href="http://dkjsaahskj.html">欢迎</a></li>
<ul><a href="dkjashjdka.png">素材</a></ul>
<ul><a href="hsdkfsjkfhksd.jpg">素材</a></ul>
</ul>
</body>
</html>
如果href属性以“http”开头添加内容“超文本传输协议”。如果是以“jpg”和“png”结尾则添加素材。