css复杂选择器

复杂选择器

1、父子选择器（派生选择器）
语法格式：最外面的结构 外面的结构 里面的结构{}
例：只选出div中span

<div>
	<span>123</span>
</div>
<span>234</span>

div span{
	background-color: red;
}

2、直接子元素选择器
例：

div>
		<em>1</em>
		<strong>
			<em>2</em>
		</strong>
	</div>

div > strong{
	background-color: red;
}

div>strong意思就是div下面直接一级的strong。
如果写成div>em{}，则1背景色变红。

3、并列选择器
格式 div.demo 在.之前不用写空格，这就是并列选择器。

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

div.demo{
	background-color: red;
}

4、分组选择器
功能：简化代码

<em>1</em>
	<strong>2</strong>
	<span>3</span>

em,
strong,
span{
	background-color: red;
}

结果1 2 3都变红

5、伪类选择器
格式：任意选择器：怎么动
任意选择器：hover是一种比较常见的写法

<a href="www.baidu.com">www.baidu.com</a>

a:hover{
	background-color:orange;
}

//a：hover是当你鼠标移入到控制领域内，发生什么变化
//如上代码的功能实现就是当鼠标移到链接上背景颜色变红
场景应用：

<a href="www.baidu.com">www.baidu.com</a>
<a href="www.taobao.com">www.taobao.com</a>
<a href="www.jd.com">www.jd.com</a>

a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
	background-color: #f40;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	font-family: arial;
	border-radius: 10px;
}

如果将代码改成如下所示，会发生什么变化呢？？？

<a style="text-decoration: none;"href="www.baidu.com">www.baidu.com</a>
	<a href="www.taobao.com">www.taobao.com</a>
	<a href="www.jd.com">www.jd.com</a>

a:hover{
	text-decoration: underline;
	background-color: #f40;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	font-family: arial;
	border-radius: 10px;
}

移动到百度不显示下划线，因为这个也是有权重的，行间样式的权重大