为html标签定义自定义css样式

时间:2013-12-14 16:32:22

标签: javascript html css

我不做CSS,我甚至不确定这是什么叫借口无知: - )

.examples {
 }

.examples b {
  font-weight: bold;
}

.examples p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

我假设上述方法意味着b中的任何p<div class='examples'>代码都将使用.examples中的样式以及为b定制的任何内容还是p

我可以使用该约定创建自己的样式吗?

.examples mystyle {
}

<div class='examples'>
   <div class='mystyle'>
   ...

UPDATE:

我希望mystyle使用examples样式,但覆盖黑底边框。使用.examples .mystyle底部边框显示在examples div之外,但是.examples mystyle封闭的div看起来不错,但底部黑色边框消失了。我道歉,所以它无论如何都无法正常工作。

http://jsfiddle.net/SAFX/5ft9W/

2 个答案:

答案 0 :(得分:3)

由于您在标记上使用了一个类,因此它必须是一个类选择器,并且该元素必须是.examples的子元素:

/* Notice the `.` on mystyle */
.examples .mystyle {
}

<div class="examples">
    <div class='mystyle'></div>
</div>

CSS样式有几个部分:

.examples .mystyle { /* selector */
   font-weight: bold;  /* This entire line is a declaration consisting of a property & value*/
}

答案 1 :(得分:2)

你似乎要问的是从祖先那里描述子元素继承风格的术语;这是“级联样式表”的“级联”。并非所有元素都继承自其父/祖先(a链接,特别是默认情况下不继承color属性,尽管在其css声明中指定color: inherit;可以使它们这样做)。

如果您询问如何引用选择器列表来确定特定规则所针对的元素,那就是“选择器”或“选择器表达式”。

参考文献: