1

angular アプリケーションをセットアップしましたが、すべてが機能しています。カスタムcssを入力に追加しようとしているので、新しいファイルmy.cssを作成しました

.myInvalid {
    border: 5px solid red;
}

そのファイルを index.html に追加すると、ファイルが読み込まれますが、書き込み時に <input type="text" class="myInvalid"/>入力の周りに境界線がありません。

<!DOCTYPE html>

<html data-ng-app="MainApp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/ui-bootstrap-0.4.0.js"></script>
    <script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
    <link href="Content/css/my.css" type="text/css" rel="stylesheet" />

    <link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>

</head>
<body>
    <div class="container-fluid">
        <div data-ng-view=""></div>
    </div>
   <input type="text" class="myInvalid"/>
</body>
</html>

CSSをインラインで書くと、<input type="text" style="border: 5px solid red" />すべてうまくいきます。動作はすべてのブラウザで同じです。何か案は？

4

2 に答える 2

1

セレクターがブートストラップよりも具体的であることを確認する必要があります。

.myInvalid使用する代わりにinput[type='text'].myInvalid

セレクターの優先度の詳細については、この回答を確認してください。

于 2013-07-18T12:01:27.210 に答える
-1

これは特異性の問題のように聞こえます。含めている他のスタイルシートは のスタイルを定義しています<input type="text">か? スタイル ブロックを次のように定義すると、赤い境界線が表示されるはずです。

.myInvalid {
    border: 5px solid red !important;
}

追加が解決策だと言っているわけではありません!importantが、それが機能する場合は、セレクター ( .myInvalid) が、この要素に定義された他のスタイルをオーバーライドするほど具体的ではないことがわかります。

ブラウザからを調べて<input>、それに一致するスタイル宣言を確認し、設定しようとしているプロパティをオーバーライドする必要があります。その後、それに応じてセレクターを調整できます。

于 2013-07-18T12:01:33.920 に答える