html - 获取有序列表样式不影响其他列表

Question

我有一个 <ol>我正在尝试为一个页面设置样式，并且在不久的将来不会影响其他页面或页面上的其他列表。它现在的设置方式是它的外观，但是当我向它添加一个类来尝试创建它时，它是自己的列表，不会影响其他列表。

我知道设置 <ol>标签本身被认为是一个全局属性，并且将属于所有其他标签，但是当我向它添加一个类时，所有内容都会向上移动，因此数字和文本不再对齐。

所以我尝试过的一个例子是添加一个类 class="test到 ol标记，然后像注释代码一样将其添加到 CSS 样式表中。

所以只是把它放在那里，我改变了 <ol> 的默认方式列表显示从“1.”到“1)”。我想为这个列表保留该格式，并且为以后创建的任何其他列表保留默认编号/显示。

任何帮助都会很棒。

.container {
  width: 50%;
  margin: auto;
  border-top: 2px solid #cccccc;
  font-size: 12px;
}

.list-container {
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 15px;
}


/** example
 .test ol { 
  counter-reset: list; 
}
**/

ol {
  counter-reset: list;
}

ol>li {
  list-style: none;
  margin-bottom: -10px;
}

ol>li:before {
  content: counter(list) ") ";
  counter-increment: list;
}

li>.list-paragraph {
  display: inline-block;
  margin-left: 30px;
  position: relative;
  bottom: 15px;
}

<div class="container">
  <div class="Header">
    <h2>Terms and Conditions</h2>
    <div class="legal-stuff">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc
      vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
      nunc vel.
    </div>
  </div>
  <div class="list-container">
    <ol>
      <li>
        <div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
          nunc vel.</div>
      </li>
      <li>
        <div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
          nunc vel.</div>
      </li>
      <li>
        <div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
          nunc vel.</div>
      </li>
      <li>
        <div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
          nunc vel.</div>
      </li>
      <li>
        <div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada
          nunc vel.</div>
      </li>
    </ol>
  </div>
</div>

Answer 1

根据之前的评论，我现在在这里创建了一个演示，我将 .list 类添加到 ol 中，根据您的代码示例，一切看起来都很好。我认为问题出在其他地方 - 您选择的类的名称可能会发生冲突。

查看包含的代码段:

.container { 
  width: 50%; 
  margin: auto;
  border-top: 2px solid #cccccc; 
  font-size: 12px; 
} 
.list-container { 
  padding-left:15%; 
  padding-right: 15%; 
  padding-top: 15px; 
}
.list {
   color: red; 
  counter-reset: list;
}
ol { 
  counter-reset: list; 
}
ol > li { 
  list-style: none; 
  margin-bottom: -10px;
}

ol > li:before {
 content: counter(list) ") ";
 counter-increment: list;
}

li > .list-paragraph { 
  display: inline-block; 
  margin-left: 30px; 
  position: relative; 
  bottom: 15px; 
}

<div class="container">
		
	<div class="Header">
		<h2>Terms and Conditions</h2>
		
		<div class="legal-stuff">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.
		</div>
	</div>

	<div class="list-container">
		<ol class="list">
			<li>
				<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
			</li>
			<li>
				<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
			</li>
			<li>
				<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
			</li>
			<li>
				<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
			</li>
			<li>
				<div class="list-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis. Ultrices gravida dictum fusce ut placerat orci. Vitae ultricies leo integer malesuada nunc vel.</div>
			</li>
		</ol>
	</div>
</div>