javascript - Tumblr 帖子在两种不同颜色之间循环

标签 javascript html css

我想使特定帖子周围的容器与相邻的容器颜色不同。基本上,容器只需要在两种不同颜色之间循环。

Left is current, right is what I require

左边是当前的样子,右边是我想要的样子。谢谢!

CSS

#content {
  float:left;
  width:800px;
  padding:25px;
  top:-50px; left:45px;
  background:transparent;
  {block:PermalinkPage}
  width:300px;
  {/block:PermalinkPage}
}

.entry {
  width:150px;
  margin:50px;
  overflow:hidden;
  background:#336136;
  margin-left:-12px;
  margin-bottom: -10px;
  padding:12px;
  {block:PermalinkPage}
  width:250px;
  margin-left:40px;
  {/block:PermalinkPage} 
}

.entry:nth-child(odd) {
background: #000;
}

HTML

<div id="content">
  {block:Posts}
  <div class="entry">

  {miscellaneous_blocks_here}

  </div>
  {/block:Posts}
</div>

最佳答案

为什么不使用 CSS3 选择器并放弃 javascript 舞蹈?

.entry:nth-child(odd) {
  background: #000;
}

.entry:nth-child(even) {
  background: #ff003d
}

浏览器支持:http://caniuse.com/css-sel3

关于javascript - Tumblr 帖子在两种不同颜色之间循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24658949/

相关文章:

css - 选择器大纲不起作用

javascript - 使用 jquery 操作::选择

JavaScript 未在 onLoad 中加载(Android webView 浏览器问题)

javascript - CORS 问题 请求的资源上不存在 'access control allow origin header'

javascript - AJAX getElementsByClassName 获取元素

javascript - 访问 DOM、html 表 <th> 并将表标题保存到变量中。

html - tbody 的 border-top 和 thead 的 border-bottom 不能同时工作?

html - Bootstrap 页脚定位

javascript - 从 javascript 函数调用 ruby​​ 函数

jquery - 背景附件:修复了在 chrome 中无法使用光滑 slider 的问题