在语义 ui 框架中自定义样式答案

【问题标题】：Customize styles in semantic ui framework在语义 ui 框架中自定义样式
【发布时间】：2016-10-29 23:16:04
【问题描述】：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <style>
        body
        {
            text-align: center;
        }

        .ui grid container,four wide column
        {
            border: 1px black;
        }
    </style>
</head>
<body>
     <div class="ui grid container">
  <div class="four wide column">1</div>
  <div class="four wide column">2</div>
  <div class="four wide column">3</div>
  <div class="four wide column">4</div>
  <div class="four wide column">5</div>
  <div class="four wide column">6</div>
  <div class="four wide column">7</div>
  <div class="four wide column">8</div>
</div>
</body>
</html>[Screen Of My Output][1]
      [1]: https://i.stack.imgur.com/cJmTc.jpg

我想将自己的样式添加到框架中。

我在 css 中尝试了一些选项，例如 !important，并直接在类和标签上应用 css，但它不起作用。

【问题讨论】：

标签： css semantic-ui-css

【解决方案1】：

您的 CSS 选择器并不像您认为的那样做！例如，four wide column 选择存在于<wide> 标记内某处的所有<column> 标记，而该标记位于<four> 标记内。

为了选择一个类，您必须在类名前加上句点 (.)，例如：.four。要选择具有多个类的元素，请删除类名之间的空格：.four.wide.column。

这是一个演示类选择器基本用法的示例：

.container {
  font-size: 25px;
}

.column {
  color: green;
}

.column.four {
  background-color: red;
}

.four {
  color: yellow !important;
}

<div class="container">
  <span class="four wide column">A</span>
  <span class="four wide column">B</span>
  <span class="two wide column">C</span>
  <span class="two wide column">D</span>
</div>

查看this cheat sheet了解更多详情。

【讨论】：