博主 轻风记
人类原创辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

博主 12月1日 在线自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品
  • 歌曲封面日落的告白Kui Kui

人类原创

辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

网站已运行 5 年 345 天 5 小时 38 分

Powered by Typecho & Sunny

2 online · 75 ms

Title

我的前端学习笔记(五)CSS复杂选择器

Meteor

·

·

102次阅读
日常
Article
⚠️ 本文最后更新于2020年10月14日,已经过了1518天没有更新,若内容或图片失效,请留言反馈

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]

Author:Meteor
作者
我的前端学习笔记(五)CSS复杂选择器
当前文章累计共 4003 字,阅读大概需要 2 分钟。
电脑装机小记
2024年4月26日 · 13评论
Typecho批量替换文章图片链接
2022年7月11日 · 6评论
一个视频让你回到2018年的夏天
2020年6月6日 · 2评论
此页面评论区已关闭
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 不再显示
博主