css - WS3 を許可する「合法」でクラスに ID コマンドを作成する

Question

次のページには、テキストが書かれた2 つの長方形があります。(説明のために、各長方形の前に CSS コマンドを配置します ...)

最初の長方形 - ID - コマンド 2 番目の長方形 - スパン クラス - コマンド

2 つの問題があります。

1 - スパン クラス コマンドによるデザインが一致しません (文字にギャップがない - パディング: 5px)

2 - スパン クラスのコード内の何かが WC3 に対して無効です (LI の問題)。

Answer 1

2 番目のボックスの HTML は本当にめちゃくちゃです。1 つ目はol要素ですが、2 つ目は単なるspan. liリスト（ulまたは）ではないものを中に入れることはできませんol。また、ネストされたリスト項目を閉じる前にスパンを閉じ、p要素が の子であっても最後に閉じられますli。

<span class ="commandmentsID1"> 
<li><p> 
    <!-- content here -->
</span></li></p>

次のようにする必要があります。

<ol class ="commandmentsID1">   
<li><p> 
    <!-- same content here -->
</p></li></ol>

---

CSS は両方の四角形でまったく同じであるため、class="commandment"これらの CSS ルールをすべて持つ a をそれぞれに与える方がよいでしょう。

.commandment {list-style:none; margin:0; padding:0;}
.commandment li {background:#292929; color:#d0d0d1; font:bold 5px Arial, Helvetica, sans-serif; letter-spacing:0px; margin:10px; padding:10px; text-align:center;}
.commandment li blockquote {margin:0px; padding:0px;}
.commandment p {background:#333333; color:#ffffff; text-align:right; font:13px Arial, Helvetica, sans-serif; letter-spacing:0px; margin:0px; padding:5px; text-decoration:none;}

<ol class="commandment">
    <!-- content -->
</ol>