资讯专栏INFORMATION COLUMN

抛砖引玉css系列---根据父元素包含的子元素个数,实现不同的样式

littleGrow / 2264人阅读

摘要:工作时遇到这样一个问题根据某元素所包含的子元素个数,分别设置不同的样式,这个用可以解决,不过个人认为用解决可能更简单一点。

工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。
demo如下:

效果图如下

完整代码如下:




    css3
    


    
  • 11111
  • 11111
  • 22222
  • 11111
  • 22222
  • 33333

注释中有详细的说明,再次还要感谢这篇文章:
http://lightcss.com/styling-c...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51049.html

相关文章

  • 抛砖引玉css系列---根据元素包含元素个数实现不同样式

    摘要:工作时遇到这样一个问题根据某元素所包含的子元素个数,分别设置不同的样式,这个用可以解决,不过个人认为用解决可能更简单一点。 工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。demo如下: showImg(https://segmentfault.com/im...

    junfeng777 评论0 收藏0
  • 360前端星计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    lpjustdoit 评论0 收藏0
  • 360前端星计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    mumumu 评论0 收藏0
  • 2019届校招前端面试题整理——HTML、CSS

    摘要:前言届校招陆陆续续开始了,整理了一些高频的面试题。标签提供给页面的一些元信息名称值对,有助于。开启缺点一个是不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。用于设置或检索元素的缩放比例,值为即使用元素的实际尺寸。 前言 2019届校招陆陆续续开始了,整理了一些高频的面试题。 HTML部分 1. 什么是? DOCTYPE是html5标准网页声明,且必须声明在HTML文档...

    Turbo 评论0 收藏0
  • 2019届校招前端面试题整理——HTML、CSS

    摘要:前言届校招陆陆续续开始了,整理了一些高频的面试题。标签提供给页面的一些元信息名称值对,有助于。开启缺点一个是不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。用于设置或检索元素的缩放比例,值为即使用元素的实际尺寸。 前言 2019届校招陆陆续续开始了,整理了一些高频的面试题。 HTML部分 1. 什么是? DOCTYPE是html5标准网页声明,且必须声明在HTML文档...

    Tamic 评论0 收藏0

发表评论

0条评论

littleGrow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<