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

Defining custom css styles for html tags

本文关键字：自定义 css 样式 定义 html      更新时间：2023-09-26

我不做CSS，我甚至不知道这叫什么，所以请原谅我的无知：-）

.examples {
 }
.examples b {
  font-weight: bold;
}
.examples p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

我假设上面的意思是<div class='examples'>中的任何b或p标签都将使用.examples中的样式以及为b或p自定义的任何样式？

我能用这种惯例来创造我自己的风格吗？

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

更新：

我希望mystyle使用examples样式，但使用黑色底部边框覆盖。使用.examples .mystyle时，底部边框显示在examplesdiv之外，但使用.examples mystyle时，封闭的div看起来不错，但底部黑色边框消失了。我很抱歉，所以这两种方式都不起作用。

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

由于在标记上使用类，因此它需要是一个类选择器，并且元素必须是.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*/
}

您似乎在问的是描述从祖先继承样式的子元素的术语；这是"级联样式表"的"级联"并非所有元素都继承自其父/祖先（值得注意的是，a链接默认情况下不会继承color属性，尽管在css声明中指定color: inherit;可以使它们继承）。

如果您询问如何引用选择器列表来确定特定规则的目标元素，即"选择器"或"选择器表达式"

参考文献：

  • CSS（来自Mozilla开发者网络，MDN）
  • CSS 2.1简介（来自W3C）
  • 选择器，级别3（来自W3C）
相关文章：