我的前端学习笔记（五）CSS复杂选择器

Css复杂选择器

[netmusic id="1397293557" autoplay="false"]

[aru_74]博客所更新的笔记是加入了自己的理解当你从头浏览笔记你会发现并不难。

选择器这个地方还是建议多写写网页实际用用。

父子选择器（派生选择器）

比如

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

现在只想让<div>里面的<span>123变颜色而不让下面的<span>改变，上节所说的的标签选择器行不通，

标签选择器会修饰所有的<span>.而父子选择器就可以分开修饰

Css写法

div span{

background-color:red;

}

这样就只修饰<div>里面的了，这里的<div>和<span>成父子结构，所以叫父子选择器，其真正修饰的还是<span>.

父子选择器不是只限于标签，class同样适用，成父子关系，就完全成立。

Css中

div span{

}

指的是<div>下所有的<span>

就像是

<div>

<span>1</span>

<strong>

<span>2</span>

</strong>

</div>

上面的css就可以让1和2都变色，也就是不限于父子，孙子一样能够修饰，要想修饰2，要写

div strong span{<!—css代码-->}

直接子元素选择器

还是上面的例子，直接选择div下的span而不包括strong里的，

Css写法：

div > span{<!--css代码-->}

中间有空格，那个>表示div下直接的span所以不包括strong里得了

浏览器识别父子选择器是自右向左。

并列选择器

<div>1</div>

<div class=”demo”>2</div>

<div class=”demo”>3</div>

现在想让2 3分别有不一样的颜色，之前所学习的选择器并不能实现该效果，

根据2中又有标签，又有class的特点

Css写法

div.demo{   }

用多个限制条件限制一个元素，并且不加空格写到一起，就叫并列选择器。、

如果想标签和class或者id成为限制条件，标签一定要放在最前面。

选择器优先级

[alert class="success"]

只要在同一横行的选择器把权重相加就能判断优先级

假如css中有两个选择器修饰同一个元素，权重高的优先修饰。

如果修饰同一个元素权重相同，后面的会覆盖前面的，比如前面的选择器修饰颜色是红色，后面的是绿色那么最终颜色是绿色。

[/alert]

分组选择器

<strong>1</strong>

<span>2</span>

<em>3</em>

想让以上三个标签背景颜色都是红色

则css代码可写成

strong,

span,

em{background-color:red;}

逗号分组，通常竖着写易于观察。

CSS选择器到这就全部介绍完了。[aru_50]