0 
<!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

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

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

4

1 回答 1

1

您的 CSS 选择器不会像您认为的那样做！例如，four wide column选择存在于标签内<column>某处的所有标签。<wide><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>

查看此备忘单了解更多详细信息。

于 2016-10-29T15:16:04.320 回答