IT编程技术

天行健，君子以自强不息；地势坤，君子以厚德载物；

CSS第五节-CSS复合选择器

2021-4-19 博主：Splendor CSS笔记

CSS复合选择器
Css的选择器分为两个，基础选择器和复合选择器。基础选择器不能我们的实际开发中，高效快速的选择标签对象。

1，后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代
<body>
	<div class="nav">
	        <a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
	</div>
	<a href="#"></a>
	<a href="#"></a>
	<a href="#"></a>
</body>
例：要选择class为nav下的a标签参考下面例子，如果我们直接写a那么所有的就会被选中，这是我们不想要的
写后代选择器时，先选出类名为nav的div，再空格，选出下的儿子a标签
.nav a {
        color : red;
}

2，子元素选择器
子无素选择器，只选择父亲的儿子级元素，孙子重孙子都不被选择
<div>
	<strong>儿子</strong>
	<strong>儿子</strong>
	<strong>儿子</strong>
</div>
		
<div>
	<p>
		<strong>孙子</strong>
		<strong>孙子</strong>
		<strong>孙子</strong>
	</p>
</div>
例：选择第一个div下的strong标签,如果用后代选择器div strong{}去选择，那么第一个和第二个的div下的strong都会被选择。
div>strong {
        color : red
}

3，交集选择器
交集选择器由两个选择器构成，既有标签的一个特点又有标签的第二特点
点击查看原图
 
<p class="green">绿色</p>
<p class="green">绿色</p>
<p class="green">绿色</p>
<div class="green">绿色</div>
<div class="green">绿色</div>
<div class="green">绿色</div>
<p>粉色</p>
<p>粉色</p>
<p>粉色</p>
例：选择class为green，的p标签
p.green {               //此处p后没有空格直接写.green
       color : green
}

4，并集选择器
html中有多个标签有相同的一种样式，我们可以用并集选择器选出统一设置，让代码更简洁
<p>绿色</p>
<p>绿色</p>
<p>绿色</p>
<div class="green">绿色</div>
<div class="green">绿色</div> <div class="green">绿色</div>
<span>绿色</span>
<span>绿色</span>
<span>绿色</span>
例：选择p和span标签都为绿色
p,span { color : green }

如果没有并集选择器我们的代码就会冗余,代码如下
例:
p { color : green }
span { color : green }

5，伪类选择器
用于向某些选择器添加一些效果，为类选择器有很多链接伪类，结构伪类等等。
链接伪类：（链接标签 ：伪类名）
a:link          //未访问的链接
a:visited     //已访问链接
a:hover      //鼠标移动到链接上
a:active     //选定链接 按下鼠标不松开时
注：写链接伪类时如果多个同时出显尽量不要颠倒位置顺序为 link　⇒ visited    ⇒　hover　⇒　　active
如果出现顺序错误，会导致效果失效

标签: CSS笔记

« CSS第六节-CSS块级元素 | CSS第四节-CSS外观属性样式»