CSS父级子级怎么使用

企鹅博客
企鹅博客
企鹅博客
28703
文章
0
评论
2020年9月15日22:07:13 评论 6 views 649字阅读2分9秒

在我们进行前端项目的时候,一定要弄清元素模块之间的父级的关系,这样我们就能更方便的维护和查找使用元素。今天就给大家好好介绍一下。

简单讲CSS父级 CSS子级是相对而言,如一个DIV “A”被另外一个DIV “B”包裹着,这样我们就可以认为B是A父级,同样一个道理。

父级子级或有时把DIV嵌套关系比作父亲儿子关系,这个是为了便于理解将DIV嵌套关系形象比作父级子级关系叫法。

、举例说明:

DIV CSS 父级子级说明例子:

CSS代码

.yangshi{...} 
.yangshi .yangshi_a{ ...} 
.yangshi .yangshi_b{ ...}

Div代码

<div class="yangshi"> 
<div class="yangshi_a">内容a</div> 
<div class="yangshi_b">内容b</div> 
</div>

以上div+css代码这里我们就可以认为 yangshi_a父级(上一级)是yangshi。

这样我们就可以利用CSS指针属性在div css中,最终CSS样式可以有相同命名的属性选择器的,但是赋予不同的值。

这样我们通过.yangshi .yangshi_a一看即可知道yangshi_a的父级是yangshi

相信看了这些案例你已经掌握了方法,更多精彩请关注css教程其它相关文章!

相关阅读:

Css3中的transform 渐变属性怎么使用

Css3制作动态开关的效果的实现步骤

用CSS3优化HTML5表单的步奏

以上就是CSS父级子级怎么使用的详细内容,更多请关注css教程其它相关文章!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
CSS的mask-image属性详解 css教程

CSS的mask-image属性详解

这次给大家带来CSS的mask-image属性详解,使用CSS的mask-image属性注意事项有哪些,下面就是实战案例,一起来看一下。 CSS mask遮罩属性的历史非常久远了,远到比CSS3 bo...
CSS实现下划线跟随滑动效果代码 php教程

CSS实现下划线跟随滑动效果代码

本文主要和大家介绍了纯CSS实现导航栏下划线跟随滑动效果,需要的朋友可以参考下,希望能帮助到大家。 老规矩先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: