Question

HTML

<pre>

<head>
    <title>
        title of the page
    </title>
    <link rel="styleheet" type="text/css" href="css/style.css"> 
</head>
<body>
<ul>
    <li>Italy</li>
    <li>France</li>
    <li>Greece</li>
</ul>
   <h1> This is the main heading</h1>
  <p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings</p>
<h2>this is the second heading</h2>
<p> long live the King :Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another sub heading</h2>
<p>Here you can see another sub-heading.</p>
<p>This is how we make a word appear <b>bold.</b></p>
<p>This is how we make a word appear <i>italic</i>.
</p>
<ul>
    <li>Potatoes</li>
    <li>Oranges</li>
    <li>Berries</li>
</ul>
</body>
</html>
</pre>

CSS：

<pre>
body{background: url("../img/poza.jpg");

}
ul{text-align: left;

}
ol{
    list-style-position: right;
    text-align: 
}
</pre>

Answer 1

使用班级或ID

HTML

<ul class="list1">
    <li>Italy</li>
    <li>France</li>
    <li>Greece</li>
</ul>

<ul class="list2">
    <li>Potatoes</li>
    <li>Oranges</li>
    <li>Berries</li>
</ul>

CSS

.list1 {
   text-align: left;
   color: red;
}
.list2 {
   text-align: right;
   color: blue;
}

此外，如果您想将CSS应用于所有＆＃39; li＆＃39;例如，＆＃39; ul class =＆＃34; list1＆＃34;＆＃39; （为了避免为每个＆＃39; li＆＃39;元素提供课程）你可以用css中的child / parent来完成：

.list1 > li {
   color: orange;
}

我有两个不同的列表我想在CSS上设置样式，我应该怎么做？

1 个答案: