html - CSS工作中途

Question

这是我的html代码：

<div class="ObjectList" id="ObjectList">
    <p class="ObjectListTitle" id="Element">TEST</p>
</div>

CSS 适用于类 ObjectList 但不适用于 ObjectListTitle。

这是我的css文件

#ObjectList{
background-color:red;
height:100%;
width:25%;
}

#ObjectListTitle{
background-color:yellow;
}

Answer 1

您的元素没有 ID ObjectListTitle，它有class ObjectListTitle。您正在使用 ID 选择器 ( #) 并且应该使用类选择器 ( .)

.ObjectListTitle{
    background-color:yellow;
}

演示

Answer 2

试试这个：你在 id 中创建 css 并将 html 源代码应用于类，所以，

<div class="ObjectList" id="ObjectList">
    <p class="ObjectListTitle" id="Element">TEST</p>
</div>

Answer 3

在 css 中，您需要知道不同组的东西的样式。

标记<div></div> 样式 标记样式意味着您将使用该标记设置所有元素的样式，在本例中为所有 div。

div{background:black;}

类<div class="foo" id="bar"></div> 为类设置样式意味着将 css 规则应用于具有该类的所有标签。这意味着该规则适用于页面的次数与您使用该类的次数一样多

.foo{background:black;}

ID<div class="foo" id="bar"></div> 样式化 id 就像一个类，但 id 在页面上必须是唯一的。这意味着该规则每页最多只应用一次

#bar{background:black;}

Answer 4

试试这个代码。

HTML

<div class="ObjectList" id="ObjectList">
    <p class="ObjectListTitle" id="Element">TEST</p>
</div>

CSS

#ObjectList{
background:red;
height:100%;
width:25%;
    padding:10px;
}

.ObjectListTitle{
background:#ff9900;
    width:50px;
    height:50px;
    display:block;
}