Question

我必须上课

<div class="thread-entryresponse">
<div class="date">


 </div>
 </div>

然后

<div class="thread-entrymessage">
<div class="date">
</div>
 </div>

我的css代码是

.thread-entryresponse {
    border-left: 2px solid #428bca;
    color: #444;
    padding: 10px; 
}

.thread-entrymessage {
    border-right: 2px solid #444; 
}

.date {
    color: #444;
    margin-top: 20px;
    padding: 10px; 
}

我想在下面做

如果.thread-entryresponse和.date，那么日期为border-left: 2px solid #428bca;
如果.thread-entrymessage和.date则border-right: 2px solid #444; 在日期

请注意，日期位于thread-entryresponse和thread-entrymessage

Answer 1

首先，我强烈建议您学习HTML / CSS中的基础知识

其次，你可以使用这个

<强> DEMO

.thread-entryresponse .date {
    border-left: 2px solid #428bca;
}
.thread-entrymessage .date {
    border-right: 2px solid #444;
}

Answer 2

正如你所说：

.date位于.thread-entryresponse和.thread-entrymessage
之内

这意味着.date是.thread-entryresponse和.thread-entrymessage的后代。要根据其父级改变.date的样式，请使用后代选择器：

标记：

<div class="thread-entryresponse">
    <div class="date"></div>
</div>


<div class="thread-entrymessage">
    <div class="date"></div>
</div>

CSS：

.thread-entryresponse .date {
    border-left: 2px solid #428bca;
}

.thread-entrymessage .date{
    border-right: 2px solid #444;
}

Demo

剩下一部分的两个css类边界

2 个答案: