css - 单独设置 Bootstrap 标签的样式

标签 css twitter-bootstrap reactjs tabs

我正在使用 Bootstrap 选项卡,想知道最好的方法是分别识别选项卡,这样我就可以为它们设置不同的样式——例如,这样就有一个蓝色选项卡和一个红色选项卡,而不是两个看起来相同的选项卡.

这是标签的 HTML:(注意:我也在使用 React。)

<ul className="nav nav-tabs">
            <li className="active"><a data-toggle="tab" href="#menu1">This is the headline of one article</a></li>
            <li className="tab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
 </ul>

这是我目前拥有的 CSS:

.nav-tabs>li>a {
    background-color: #3999C9;
    color:red;
    font-family:Fira Sans;
}

.nav-tabs {
    font-family:Fira Sans;
    border-bottom: 1px solid #10122B;
}

所以不多,哈哈。感谢任何提示,无论是在某处添加类(class)还是其他任何内容。

最佳答案

好吧,只需使用 css 选择器:

.nav-tabs li:nth-of-type(1) a { ... } // first tab
.nav-tabs li:nth-of-type(2) a { ... } // 2nd
.nav-tabs li:nth-of-type(3) a { ... } // etc

关于css - 单独设置 Bootstrap 标签的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38057238/

相关文章:

javascript - Konva 文本边界

javascript - 出现在一个元素之后的所有元素的选择器

javascript - 浏览器缩放未对齐的解决方法

jquery - 更改 Bootstrap 表单元格中复选框的大小

javascript - this.setState 不是一个函数(尝试上传图像)ReactJs

javascript - 在同构 React 应用程序中渲染 HTML 字符串

jquery - 如何在折叠时水平显示 bootstrap 3 导航栏菜单项

javascript - IE 禁用将颜色更改为灰色

html - 如何修复 Bootstrap 4 Cards(CSS3 多列错误)(Chrome IE)后的白色间隙?

javascript - 具有动态长度的 Angular 中的 Bootstrap Accordion