Orbit css选择器

我正在使用Foundation Orbit滑块。它工作正常，但我需要做一些CSS（移动标题）应用到页面上的特定滑块。Orbit css选择器

如果我使用下面的选择器它做了改变，唯一的问题是它是一个全局变化。

.orbit-wrapper .orbit-caption 
{ 
    bottom:-30px; 
}

我已经尝试了与容器div的id不同的选择器，但它从来没有得到应用。

#promotion .orbit-caption 
{ 
    bottom:-30px; 
}

如果我检查浏览器中的css值，正确的值在那里，但它们不会以某种方式应用于元素。只有当我像上面第一个例子中那样更改选择器时，我才会得到改变。

我不是css的专家，但我尝试过的选择器在正常情况下可以正常工作。

我该怎么做？

来源

2012-10-11 madmarten

！重要的是，在这里你的朋友。至少用于解决问题的目的。 – Jawad

试过！重要的是，没有帮助。如果我查看浏览器工具，我可以看到它正在读取我的值，它覆盖了.orbit-wrapper .orbit-caption选择器的默认值，但它不适用于布局。 – madmarten

好吧，所以我发现了什么事情。轨道将caption元素复制到原始轨道容器（我的div）之外的元素。我从一开始就没有注意到这一点，因为它留下了我创建它们的原始标题，所以我正在调试它们。

解决方法是创建另一个包装元素并将其用作标题的选择器。如果我使用包含轨道滑块div的id = promotion-wrapper创建一个div，以下工作正常。

#promotion-wrapper .orbit-caption 
{ 
    bottom:-30px; 
}

来源

2012-10-11 17:35:27 madmarten

您是否确定元素有position：relative;？

.orbit-wrapper .orbit-caption 
{ 
    position: relative; 
    bottom:-30px; 
}

没有那个或位置：绝对的; “底部”属性不会做任何事情。

来源

2012-10-11 16:22:46

它有位置：绝对。我试图覆盖最低值。如果我在上面的代码中使用全局选择器，它可以工作，但是如果我尝试用id选择器覆盖，浏览器会看到该值并报告它以覆盖全局seletor，但该更改不会应用于该元素。 – madmarten

我需要查看代码的其余部分。 –

的一点是，轨道不通过JavaScript所以最终的HTML不是什么在我的代码，而这就是为什么我选择不工作，我相信添加元素和风格。希望有人知道Orbit对html元素做了什么，这将有助于了解使用什么选择器。 – madmarten

我发现了一个新的和简单的解决方案，

只需添加边距，改变位置相对

.orbit-container .orbit-slides-container > * .orbit-caption { 
    position: relative; 
    bottom: 0; 
    margin-top:40px; 
    background-color:#F3F3F3; 
    color: black; 
    width: 100%; 
    padding: 10px 14px; 
    font-size: 0.875em; }

来源

2013-08-26 18:08:41

Orbit css选择器

回答

相关问题