swiperの矢印ボタン＜＞を画像に変更したい

Question

前提・実現したいこと

HTMLでswiperのプラグインを使ってのスライド作成について。
矢印マーク（＜、＞）を画像に変更したいのですが、

.swiper-button-prev,
.swiper-button-next {
background-image: none;
}
上記コードを追加しても上書きができず、デフォルトの矢印が残ったまま、その下に画像が表示されます。
また、矢印をクリックすると、青い枠が表示されるのですが、それも非表示にしたいです。
解決できる方法がございましたらご教示いただきたく思います。

よろしくお願いいたします。

該当のソースコード

/* style */
	.swiper-slide{
		padding: 100px 100px;
	}
.swiper-button-prev,
.swiper-button-next {
	background-image: none; 
}
.swiper-button-next {
	background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_left.png);
}
.swiper-button-prev {
	background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_right.png);
	transform: scale(-1, 1);
}

<!-- HTML -->
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- script -->
	var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});

補足情報（FW/ツールのバージョンなど）

最低限のコードにしました。
swiper.cssとswiper.min.jsは最新のバージョンをダウンロードしています。

Comments

[H40831]

なにか基本的な要点を理解されてない可能性を感じて気がかりなのですが…

自己解決後で恐縮ですが、
差し支えなければ、
実際のページの、検証ツールのCSSについての部分がどういう状態になってるのか
スクショなどでご提示いただけないでしょうか？

Answer 1

cssの読み込み順序が先の方になってたりしませんか？
同じ詳細度なら後の方が優先されるので、順序を変えたり、詳細度を上げるようにしてみてはどうでしょうか？

Comments

[chiikuma]

お返事が遅くなり申し訳ございません。
ご回答いただいた内容でもやってみましたが、やはりダメでして、邪道かもしれませんがswiper.cssのswiper-button-prev、swiper-button-nextをfont-size: 0;に直接書き換えて自己解決しました。
読み込み順序の優先度に関しては参考になりましたのでベストアンサーとさせていただきます。
有り難うございました。

Answer 2

こちらの参考サイトを検証ツールでいじってみたところ、
background-imageの上書きで普通に画像は変わりました。noneは使ってません。
また、青い枠も表示されませんでした。もし表示されるようでしたら
outline: none;で消せるかと思います。

もう一度、単純なタイプミスなどがないか確認してみてはいかがですか？

Comments

[chiikuma]

ご回答有難うございます。
そちらのサイトを参考に、上記のように最低限のコードに変更してみましたが（該当のソースコードを更新しました）、青い枠は消えたもののやはりデフォルトの矢印ボタンは残ったままとなりました。もう少し解決策を探ってみます。