swiper.cssの優先順位のせいでHPのcssからプロパティを変更できない

前提・実現したいこと

LP（ランディングページ）の制作案件獲得に向けてLPのサイト模写を行っているものです。
スライダーを制作するためにswiperを使おうと考えたのですが、レイアウトを決めているcssからスタイルが変更できなくなっています。
以下の画像で、kari.cssが編集中のcssです

以上の通り、swiper.min.cssの優先順位が高くて、kari.cssからの編集を受け付けなくなっております。

swiper.cssの優先順位を下げる、あるいはkari.cssの優先順位を上げることでkari.cssからのスタイル指定ができるようにする方法を探しています。

試したこと

今の所、!importantを使うことでkari.cssから適応することはできています。しかし、「すべてのプロパティにいちいち振らなくてはいけなくなる…」と考え、何か方法があると思い検索したのですが、見つかりませんでした。

###着地点
kari.cssからスタイルを変更することで、以下のように変更することを考えています。

before

after

余談ですが、この問題を終えた後は、ウィンドウサイズの変更ではみ出た部分がそのまま隠れるようにスタイルを変更するつもりです。

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

ブラウザ:chrome(最新のバージョン)
テキストエディタ:atom(ver:1.32.2)

行動規範の内容に同意します

回答1件

ベストアンサー

kari.cssのあとにswiper.min.cssを読み込んでいませんか？
CSSセレクタの優先順位が同じであれば、後から書いたものが優先されます。

HTML
1<!doctype html>
2<html>
3<head>
4  <style>
5  p { color: red; }
6  p { color: blue; }
7  </style>
8</head>
9<body>
10  <p>テキスト</p> <!-- color: blue; が適用される -->
11</body>
12</html>

通常、プラグインが提供するデフォルトのスタイルなどは、
サイトやページ特有のスタイルで上書きできるように、先に読み込むべきです。
ただし、スタイル初期化用CSSなどのあとです(プラグインのスタイルが間違って上書きされてしまうため)。

HTML
1<!doctype html>
2<html>
3<head>
4  <link href="reset.css"> <!-- 必要であればスタイルを初期化 -->
5  <link href="swiper.min.css"> <!-- プラグインなどのデフォルトスタイル -->
6  <link href="mystyle.css"> <!-- サイト特有のスタイル -->
7</head>

もし読み込むCSSファイルの順番を変えられないのであれば、
kari.cssに書かれているCSSに、親のセレクタを足すなどして優先順位を上げる必要があります。

投稿2018/11/23 06:43