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

时间:2016-10-29 08:51:22

标签: css semantic-ui-css

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

1 个答案:

答案 0 :(得分:1)

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

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

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

&#13;
&#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;
&#13;
&#13;

查看this cheat sheet了解详情。