スタイルシートで設定した新しいliに古いliが重なって出てくる

Question

style.cssで設定した
新しいliはこちらです。

.ranking{
margin: 0;
padding: 0;
list-style-type: none;
}
.ranking li{
position: relative;
margin: 0;
padding: 0 0 0 16px;
border-bottom: 1px dotted #ccc;
}
.ranking li::before{
position: absolute;
top: 7px;
left: 1px;
color: #d05;
content: "★";
font-size: 9px;
}
.ranking li:first-child::before,
.ranking li:nth-child(2)::before,
.ranking li:nth-child(3)::before{
position: absolute;
top: 1px;
left: 0;
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 10px solid #fb0;
content: "";
}
.ranking li:first-child::after,
.ranking li:nth-child(2)::after,
.ranking li:nth-child(3)::after{
position: absolute;
top: 9px;
left: 0;
width: 0;
height: 0;
border: 6px solid #fb0;
border-top: 3px solid transparent;
border-bottom: 6px solid #f90;
content: "";
}
.ranking li:nth-child(2)::before{
border-bottom: 10px solid #ccc;
}
.ranking li:nth-child(2)::after{
border: 6px solid #ccc;
border-top: 3px solid transparent;
border-bottom: 6px solid #aaa;
}
.ranking li:nth-child(3)::before{
border-bottom: 10px solid #d98;
}
.ranking li:nth-child(3)::after{
border: 6px solid #d98;
border-top: 3px solid transparent;
border-bottom: 6px solid #c76;
}
.ranking li span{
color: #9ab;
font-size: 11px;
}

既存のベーシックなliはこちらです。

/* list */
.post li, .post dt, .post dd { margin:0; line-height:200%; }
.post ul li {  background:url(http://datsumou-station.com/wp-content/uploads/2015/06/li.gif) no-repeat left 11px; padding:5px 0 0 20px; }
.post ul ul, .post ol ol  { margin:0 0 0 1em; }

新しい方の物をいざ記事に投入すると
こうなりました。

おそらくliの画像をbackgroundに設定しているから、このようなことになるのかと思うのですが、
どうすれば改善するのでしょうか・・・？

ちなみに、既存の古い方のliは画像でなくても全く気にしていません。
何か似たような淡い色の楕円系であれば・・・。

rankingのliも、既存のベーシックなliも、
どちらも使いたいです。

出来たらコピペできる状態で直して下さると大変助かります。

Answer 1

「CSS 上書き」「CSS 優先順位」で検索してみてください。

.ranking li{background-image:none !important;}

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[amamiya_yaf]

お陰様で解決しました！ありがとうございます✨

Answer 2

それは質問じゃなくて依頼なのではないだろうかwww