twitter-bootstrap - bootstrap - 使用可见电话更改 CSS 不起作用

Question

CSS nob 看引导程序...

我假设 .visible-phone、.visible-desktop 等类已应用于 body 标签。看着萤火虫似乎并非如此。

我要做的是根据 .visible-xxxx 更改 CSS 设置，例如：

.ugly-color { color: red; }

.visible-desktop .ugly-color { color: green; }

<div class="visible-desktop">I see this text</div>

<div class="ugly-color">Why is this red and not green</div>

有谁知道 .visible-desktop 应用在哪里？就好像它是 body 标签一样，丑陋的颜色会在 .visible-desktop 里面

所有输入表示赞赏。谢谢！

Answer 1

因为您 .visible-desktop .ugly-color 意味着彼此之间有两个元素，所以它可以工作：

.ugly-color {color: red;}

.visible-desktop .ugly-color {color: green;}


<div class="visible-desktop">I see this text</div>

<div class="ugly-color">This is red</div>

 <div class="visible-desktop">
        <div class="ugly-color">
            why is red, and not green
        </div>
 </div>

Answer 2

CSS 中选择器之间的空格意味着第二个在第一个内部。所以你选择的 CSS 规则.visible-desktop .ugly-color只会在.ugly-color里面时触发.visible-desktop。要选择具有这两个类的那些，请删除空格：

.visible-desktop.ugly-color { color: green; }

这个 W3 文档很好地详细介绍了 CSS 选择器语法，以防万一您需要更多选项。

Answer 3

你想要的是：

.ugly-color {color: red;}

.visible-desktop + .ugly-color {color: green;}