Question

<!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，但它不起作用。

Answer 1

您的CSS选择器不会做您认为他们做的事情！例如，four wide column会选择位于<column>标记内<wide>标记内某处的所有<four>标记。

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

以下是演示类选择器基本用法的示例：

＆＃13;

.container {
  font-size: 25px;
}

.column {
  color: green;
}

.column.four {
  background-color: red;
}

.four {
  color: yellow !important;
}

＆＃13;

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

＆＃13;

查看this cheat sheet了解详情。

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

1 个答案: