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

Question

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

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

因此，我尝试过的一个示例是将 class 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

我刚刚添加了一个 class .mainList ，一切正常。 我还用 class '.innerList' 创建了另一个列表。

这是代码。

Now, when you copy the same list to other pages just replace this class name with some other class name, copy the css and replace the class name and do the changes in the styling. 只要 class 名称不同，就不会发生任何错误。

我希望这会有所帮助。

Answer 2

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

请参阅包含的片段：

 .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>