Question

我试过了，但我无法弄清楚如何设置这些元素的样式：

<div class="tabs">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

我该怎么做？

Answer 1

Listamatic has many examples和a tutorial

Answer 2

请参阅

.tabs ul
{
}

或

.tabs ul li
{
}

Answer 3

使用运算符“＆gt;” （紧接着之后），您可以防止将样式应用于您使用基于html的结构中的元素。示例：如果其他DIV，LI，则不会更改其样式。

DIV.tabs {

}
DIV.tabs > .tabsNavigation {

}
DIV.tabs > .tabsNavigation > LI {

}
DIV.tabs > .tabsNavigation > LI > a {

}

感谢。

Answer 4

如果要为列表本身设置样式，请使用：

ul.tabsNavigation{}

如果您想为每个li设置样式，请使用：

ul.tabsNavigation li{}

或链接？

ul.tabsNavigation a{}

Answer 5

.tabs>ul>li{ /* your style */ }

或

.tabsNavigation>li{ /* your style */ }

请记住包含您的CSS样式。

Answer 6

你想要的是这个：对于课程，请使用.className和使用#idName

.className {
style: property;
}

#idName {
style: property;
}

这是你的例子的JSFiddle：

http://jsfiddle.net/Mutant_Tractor/aXdJ9/1/

Answer 7

您可以使用内联样式或使用css文件来定义样式。对于内联样式，您可以执行以下操作。这将为div选项卡提供红色背景。

<div class="tabs" style="background:red;">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

如果你想在css文件中定义你的风格，那么你可以在你的html文件中像这样引用css文件

<link href="css/yourfile.css" rel="Stylesheet" type="text/css" />

在html标签中定义css类：

<ul class="tabsNavigation">

然后在你的css文件中你会做

.tabsNavigation{
background:red;
border:1px solid blue;
width:400px;
height:300px;
}

如何使用CSS设置HTML样式？

7 个答案: