css 目标子类(如果是单个)

2024-01-22

我得到以下标记:

<div>
<p class="active"></p>
<p></p>
<p class="active"></p>
<p></p>
</div>

有一次我得到了这个标记:

<div>
<p></p>
<p></p>
<p class="active"></p>
<p></p>
</div>

现在我想设置活动类的样式,但前提是 div 中只有一个活动类。如果有多个活动类,它们应该具有不同的样式。就像是:

div .active{
color: red;
}

div .active:only-child{
color:green;
}

有没有办法不用js就能实现这个功能?只有CSS?


不,您无法在纯 CSS 中实现这一点,因为您无法从特定选择器访问父元素,也无法根据元素是否具有具有特定类名的子元素来设置元素的样式。

您可以向父元素添加辅助类名称。就像是.has-active-items.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 目标子类(如果是单个) 的相关文章

  • Bootstrap 3 - 模态背景不会根据模态对话框的高度调整大小?

    我将一个表单放入模式中 并尝试在用户触发单选按钮时显示表单的一些隐藏字段 显示隐藏字段后 模态自动重新缩放的高度 但模态背景的高度不能用作模态对话框 我该如何解决它 div class modal fade div class modal
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T
  • 可以设置选择元素的样式,以便在下拉列表“关闭”时显示所选选项的样式吗?

    鉴于这个简单的 html
  • 旋转后变换比例

    我有个问题 我正在将 div 旋转 45 度 然后我想在新的 y 轴上缩放它http jsfiddle net P37g5 2 http jsfiddle net P37g5 2 y 轴现在不是 45 度吗 我不确定我是否正确理解了这个问题
  • 如何使用溢出滚动设置 tbody 高度

    我在设置 tbody 高度宽度溢出滚动时遇到问题 h3 Table B h3 table style border 1px solid red width 300px display block thead tr td Name td td
  • Chrome 将 0 宽度的表格单元格显示为 1px

    在 Firefox 中 我相信是正确的 由于 width 0 看不到红色 div 但在 Chrome 中 它显示为具有 1px 宽度 这似乎是最新版本 Chrome 的问题 这把小提琴 http jsfiddle net bFZf4 显示问
  • 是否可以使 Font Awesome 图标大于“fa-5x”?

    我正在使用这个 HTML 代码 div class col lg 4 div class panel div class panel heading div class row div class col xs 3 i class fa f
  • 如何将 twitter bootstrap 与 Spring MVC 一起使用

    我不明白为什么我的 Spring MVC 页面没有隐藏引导样式 我的你好 jsp
  • 如何更改/自定义 Google 地图上街景小人的图标?

    我已经搜索了 stackexchange 但我只找到了更改街景小人位置的问题 答案 有没有办法改变它的源图像 我尝试过像这样影响风格 map canvas gt div gt div nth child 8 gt div nth child
  • CSS 双边框,外边框比内边框粗

    在我目前的工作中 我需要在容器上生成双边框 边框样式 双 实现这一点 但是我的客户希望外边框更厚 内边框具有正常厚度 除了创建 2 个 div 其中 1 个嵌套在另一个 div 中 外部 div 具有更大的厚度 或者通过使用边框图像 还有什
  • 如何使页面上的所有内容变大?

    如果我在浏览器中打开我的网站并按Ctrl 有几次 一切都变得更大 网站对我来说看起来更好 我可以通过在 HTML 代码中添加一些内容来实现相同的效果吗 以便用户默认看到更大的所有内容 而无需按Ctrl 我想让所有东西都变大 文本和图像 如果
  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • 将一个 div 放置在另一个 div 的底部

    我有外部 div 和内部 div 我需要将内部 div 放在外部 div 的底部 外层div是有弹性的 例如宽度 70 我还需要将内部块居中 所述化妆的简单模型如下图所示 已在 Firefox 3 Chrome 1 和 IE 6 7 和 8
  • CSS - 在 id 中选择类的语法

    通过类名选择 id 中的标签的选择器语法是什么 例如 我需要在下面选择什么才能使内部的 li 变成红色 ul li Level 1 item ul class navigat ul li ul
  • 使用边距与填充? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我最近开始自己在线学习周三开发 并且是这个领域的新手 所以对我的基本查询表示歉意 我知道边距和填充之间的区别 用逻辑术语 但不太确定 何时应该使
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • Windows 上的锯齿字体 - Chrome 和 Safari

    我使用以下代码在网页上使用自定义字体 font face font family HelveticaNeueBold src url fonts HelveticaNeueBold eot src url fonts HelveticaNe
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐