网站模板库
  • 首页
  • web前端工具
    • HTML/JS转换工具
    • JS/HTML格式化工具
    • 字母/英文大小写转换工具
    • robots.txt文件生成工具
    • Js压缩/格式化工具
    • Css在线压缩工具_代码格式化
  • 关于我们
    • 免责声明
    • 联系我们
    • 广告服务
    • 服务项目
    • 关于我们
    • 网站轮播
    • 公告
    • 成都优优科技专用
    • 按行业分类
  • web学院
    • 服务器教程
    • 学习资料
      • 基础书籍
      • 交互书籍
      • 入门教程
      • 特效分类
    • 案例分享
    • web资讯
  • 网页特效
    • 图片特效
    • 导航特效
    • 滑动按钮
    • 表单特效
    • 文字特效
    • 弹窗特效
    • 其他特效
  • 织梦模板
    • 科技/电子/数码/通信
    • 文化/艺术/广告/传媒
    • 装修/设计/家居/家具
    • 基建/施工/地产/物业
    • 餐饮/酒店/旅游/票务
    • 食品/果蔬/饮料/日用
    • 服饰/珠宝/礼品/玩具
    • 摄影/婚庆/家政/生活
    • 运动/健身/体育/器材
    • 学校/教育/培训/科研
    • 美容/保健/医院/医疗
    • 金融/财税/咨询/法律
    • 政府/组织/集团/协会
    • 汽车/物流/交通/搬运
    • 机械/设备/制造/仪器
    • 化工/环保/能源/材料
    • 农业/畜牧/养殖/宠物
    • 其他模版
    • IT/软件/信息/互联网
  • 手机模板
    • 手机APP模板
    • 微信小程序模板
    • wap
  • 网站模板
    • joomla模板
    • Drupal模板
    • z-blog模板
    • EyouCms模板
    • Bootstrap模板
    • 帝国cms模板
    • CmsEasy模板
    • MetInfo模板
    • 购物商城模板
      • Shopify主题
      • PrestaShop主题
    • 后台模板
    • 纯HTML模板
    • ecshop模板
    • phpwind模板
    • pbootcms模板
    • phpcms模板
    • wordpress模板
    • discuz模板
  • 教程
    • 织梦教程
    • Discuz教程
    • WordPress教程
    • Phpcms教程
    • Phpwind教程
    • ECShop教程
    • Joomla教程
    • Drupal教程
    • zblog教程
    • EyouCMS教程
    • 帝国cms教程
    • MetInfo教程
    • CmsEasy教程
登录
当前位置:网站模板库 > web学院 > 案例分享 > CSS 选择器问题, a 后紧邻的若干个 b
admin 案例分享 2023-05-17 22:31:56

CSS 选择器问题, a 后紧邻的若干个 b

CSS 选择器问题, a 后紧邻的若干个 b,第1张

CSS 选择器问题, a 后紧邻的若干个 b,第2张

html
<!-- mulit lines in a bullet list -->
<div class="a">the 1st line of list</div>
<div class="b">the 2nd line of list</div>
<div class="b">the 3rd line of list</div>
<div class="b">many lines...</div>
<!-- list end -->

<div class="empty-line" />
<div class="b">not in list, do not need margin</div>

css
.a{margin-left: 2em;}
.a+.b{margin-left: 2em;}

背景

在给 Obsidian 的一个主题打一个补丁,它在编辑模式是生成的一行一个 div ,加若干 class 。 在一个 list 里,我希望代码块也能缩进,目前只缩进了第一行。 list 外的 div 无法简单地通过 class 区分。

核心需求

  • list 中的 b 被选中
  • 后续空行后的其它段落的 b 不被选中

考虑方案

  • a+b 可以选中第一行 b ,但后续就要很丑的写法 a+b+b ,这样可以选中后续行,但明显很蠢。
  • a~b 可以选中后续 b ,但空行后的 b 也会被选中。
  • 也无法在候选加一个 empty-line~b 之类的覆盖,因为 list 前也有可能有空行。
  • 有点像正则,a(b)+ 这种感觉。

不知道大家还有没有别的建议,欢迎讨论。


另外可以补充的条件是:

  • a 后紧邻的是 b
  • 后续的 b 也紧邻,即 abb/abbb/abbbb……。
  • 不需要考虑 abbcb ,这种只需要前面的 abb 。
----------------------- 以下是精选回复-----------------------

答:.a ~ .b:not(.empty-line ~ .b)

还有<div class="empty-line" />应该是<div class="empty-line" ></div>
答:只能多写几个
.a+.b +.b

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
网站模板库 » CSS 选择器问题, a 后紧邻的若干个 b

admin 钻石

分享到:
上一篇
哪家的ip好买还便宜?求推荐
下一篇
BuyVM 15$/y有货了,谁帮忙代购一下

相关推荐

The Humble Book Bundle: Java by O'Reilly

The Humble Book Bundle: Java by O'Reilly

请教一个 Flask 控制 selenium 的思路

请教一个 Flask 控制 selenium 的思路

求好的 client JS 框架推荐

求好的 client JS 框架推荐

请问同步盘的本地与服务器同步是如何实现的?

请问同步盘的本地与服务器同步是如何实现的?

0条评论

发表评论 取消回复

要发表评论,您必须先登录。

提供最优质的资源集合

立即查看 了解详情
网站模板库

主题/付费下载/查看/余额管理/自定义积分,集成支付,卡密,推广奖励等。

本站导航
  • 链接标题
友情链接
  • 链接标题
快速搜索
本站由钛宇宙强力驱动
友情链接:
    商业源码网蜀ICP备2023005044号
    网站模板库
    • 登录
    • 注册
    网站模板库
    • 首页
    • web前端工具►
      • HTML/JS转换工具
      • JS/HTML格式化工具
      • 字母/英文大小写转换工具
      • robots.txt文件生成工具
      • Js压缩/格式化工具
      • Css在线压缩工具_代码格式化
    • 关于我们►
      • 免责声明
      • 联系我们
      • 广告服务
      • 服务项目
      • 关于我们
      • 网站轮播
      • 公告
      • 成都优优科技专用
      • 按行业分类
    • web学院►
      • 服务器教程
      • 学习资料►
        • 基础书籍
        • 交互书籍
        • 入门教程
        • 特效分类
      • 案例分享
      • web资讯
    • 网页特效►
      • 图片特效
      • 导航特效
      • 滑动按钮
      • 表单特效
      • 文字特效
      • 弹窗特效
      • 其他特效
    • 织梦模板►
      • 科技/电子/数码/通信
      • 文化/艺术/广告/传媒
      • 装修/设计/家居/家具
      • 基建/施工/地产/物业
      • 餐饮/酒店/旅游/票务
      • 食品/果蔬/饮料/日用
      • 服饰/珠宝/礼品/玩具
      • 摄影/婚庆/家政/生活
      • 运动/健身/体育/器材
      • 学校/教育/培训/科研
      • 美容/保健/医院/医疗
      • 金融/财税/咨询/法律
      • 政府/组织/集团/协会
      • 汽车/物流/交通/搬运
      • 机械/设备/制造/仪器
      • 化工/环保/能源/材料
      • 农业/畜牧/养殖/宠物
      • 其他模版
      • IT/软件/信息/互联网
    • 手机模板►
      • 手机APP模板
      • 微信小程序模板
      • wap
    • 网站模板►
      • joomla模板
      • Drupal模板
      • z-blog模板
      • EyouCms模板
      • Bootstrap模板
      • 帝国cms模板
      • CmsEasy模板
      • MetInfo模板
      • 购物商城模板►
        • Shopify主题
        • PrestaShop主题
      • 后台模板
      • 纯HTML模板
      • ecshop模板
      • phpwind模板
      • pbootcms模板
      • phpcms模板
      • wordpress模板
      • discuz模板
    • 教程►
      • 织梦教程
      • Discuz教程
      • WordPress教程
      • Phpcms教程
      • Phpwind教程
      • ECShop教程
      • Joomla教程
      • Drupal教程
      • zblog教程
      • EyouCMS教程
      • 帝国cms教程
      • MetInfo教程
      • CmsEasy教程

      弹窗标题

      这是一条网站公告,可在后台开启或关闭,可自定义背景颜色,标题,内容,用户首次打开关闭后不再重复弹出,此处可使用html标签...