CSS ul li リスト 画像使用時に意図した動作をしてくれない The THOR使用

Question

環境
WordPress
プラグインにTheTHORを使用しています
以下のソースでTheThorの追加のCSSからCSSを更新すると

このように画像が重なってしまっているのと
リストの点が残ってしまっています

・重なっているのは
padding-left: 205px;

・リストの点は
list-style-type: none;

で治ると思っていましたがうまくいかないです
TheThorが原因な気がしますが・・・
わかる方アドバイスをお願いします!

section ul{
	margin: 0;
	padding: 0;
	font-size: 86%;
	list-style-type: none;
}
section ul li{
	padding-left: 205px;
	line-height: 2.5em;
	background: left top no-repeat;
	background-size: 30px auto;
}

section ul li:nth-child(1) {
	background-image: url("Rank_1.png");
}
section ul li:nth-child(2) {
	background-image: url("Rank_2.png");
}
section ul li:nth-child(3) {
	background-image: url("Rank_3.png");
}
section ul li:nth-child(4) {
	background: url("Rank_1.png") no-repeat;
	background-size: 30px auto;
}
section ul li:nth-child(5) {
	background: url("Rank_1.png") no-repeat;
	background-size: 30px auto;
}

</div>
<h2>ランキング</h2>
<ul>
 	<li>リストのテスト1</li>
 	<li>リストのテスト2</li>
 	<li>リストのテスト3</li>
 	<li>リストのテスト4</li>
 	<li>リストのテスト5</li>
</ul>
</div>

Answer 1

上のコード類で画像の状態まで表示されるのなら・・・の話ですが、

list-style-type: none;
padding-left: 205px;

それぞれに「!important」を付加して強制すればいいのでは？

list-style-type: none!important;
padding-left: 205px!important;

CSSは基本的に後から読み込まれるものが優先されますので、テーマによってどこに書いたものが後から適用されるのかは異なりますから、kei344さんの回答も正しいと思います（つまりは実際にどうなっているのかを確認する必要があるということです）。!importantはその順を無視して最優先にして！という記述ですので闇雲にこれを使うと「どれが最優先？」となってさらにおかしなことになる場合もありますから限定的に使用するようにしてください。

－－－－－－－－－－－－－－－－－－－－－－－

ただ１つ思うのは質問の場合だと、サイトにあるすべてのリスト要素（ul）に適用されてしまって具合が悪いと思うのですがそちらはチェックされていますか？

通常はその部分だけをクラス指定してその部分に対するCSSを記述してというのが正しいかと思います。
例えばリスト要素に「testlist」というクラスを設けた場合は以下のようになります。

<ul class="testlist">
     <li>リストのテスト1</li>
     <li>リストのテスト2</li>
     <li>リストのテスト3</li>
     <li>リストのテスト4</li>
     <li>リストのテスト5</li>
</ul>

ul.testlist{
    margin: 0;
    padding: 0;
    font-size: 86%;
    list-style-type: none;
}
ul.testlist  li{
    padding-left: 205px;
    line-height: 2.5em;
    background: left top no-repeat;
    background-size: 30px auto;
}

ul.testlist  li:nth-child(1) {
    background-image: url("Rank_1.png");
}
ul.testlist  li:nth-child(2) {
    background-image: url("Rank_2.png");
}
ul.testlist  li:nth-child(3) {
    background-image: url("Rank_3.png");
}
ul.testlist  li:nth-child(4) {
    background: url("Rank_1.png") no-repeat;
    background-size: 30px auto;
}
ul.testlist  li:nth-child(5) {
    background: url("Rank_1.png") no-repeat;
    background-size: 30px auto;
}

sectionタグは「ページ内の部品の塊ですよ！」とhtml上で明示するためのものですので、必要ならば塊の前後に

<section>
塊の内容
</section>

を入れればいいでしょう。

冒頭にも書いた通り「TheTHOR」テーマは有料テーマですので、同じテーマを使用している方しか正確な回答ができませんから、TheTHORの公式ページで質問（あるのかな？）するのが一番かと思います。

Comments

[Aya_program]

遅くなってしまいました
回答ありがとうございます
!importantを使用してみたのですが特に変わりありませんでした

クラス化に関しての指摘もありがとうございます

Answer 2

動くサンプル：https://jsfiddle.net/8ncj3zs6/

---

提示のコードでは問題が起きないので、上書きとか他のCSSが影響しているのでは。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス】
https://coliss.com/articles/build-websites/operation/css/detect-css-property-in-css-files.html

Comments

[Aya_program]

回答ありがとうございます
今回WordPressのテーマにTheThorというテーマを使用しているのですが
やはりこのテーマが関係が関係しているのですかね・・・

[kei344]

テーマが関係しているかはわかりません。デベロッパーツールで調査して上書きがあるかを確認する必要がある、という回答です。