Question

我不确定标题的用语是否清楚，因此我将在这里尝试解释。在.Note类中，左边距设置为20px。

我希望在<ol>或<ul>内应用此类时，将margin-left设置为0px-仅在这些标记内，而在其他任何地方都没有。

有可能吗？

这是CSS和html示例：

.Note
{
	width: 98%;
	height: 70px;
	margin-left: 20px;
	font: 16px "Segoe UI";
	background-color: #F5F5F5;
	background-position: 10px 10px;
	padding-left: 80px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	border: 1px solid;
}

div.Note
{
	background-image: url("../Images/note.png");
	background-repeat: no-repeat;
}

<ol>
            <li>
                <p>[Replace with your text].</p>
                <div class="Note">This is my note.</div>
            </li>
            <li>
            <p>[Replace with your text].</p>
             </li>
        </ol>

您可以看到div在20px中缩进了<li>。我希望它是0px，同时保留.Note {margin-left: 20px;}。

Answer 1

ul .Note, ol .Note {
  /* Selects all elements with the Note class within an <ol> or an <ul> */
}

ul > .Note, ol > .Note {
  /* Selects all elements with the Note class IMMEDIATELY within an <ol> or an <ul> */
}

这可以解决您的问题吗？因为如果这样做，您应该在尝试使用CSS进行某些认真的操作之前先查看basic css selectors。

当元素位于ol或ul标签内时，如何为元素样式属性设置不同的值？

1 个答案: