web-dev-qa-db-ja.com

擬似要素に設定されたCSSをオーバーライドするにはどうすればよいですか？

これは以前に尋ねられたことは知っていますが、このCSSをオーバーライドする明確な方法は見つかりません。

.ui-input-search:after {
    content: "";
    height: 18px;
    left: 0.3125em;
    margin-top: -9px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 18px;
}

ui-input-searchは要素上にありますが、次のように独自のクラスを追加できます。

.ui-input-search-no-pseudo:after {
   content: "";
}

質問：
CSSを1行ずつ上書きせずに「pseudo-css」を削除する簡単な方法はありますか？

ありがとう！

csscss3overridingpseudo-element
50
frequent

私が知る限り、すべてのプロパティをオーバーライドする以外に方法はありません。スタイルは要素で定義されます。要素を対象とする別のセレクターのためにスタイルが消えるだけではありません。

ページから擬似要素のみを削除する場合は、content: none。

以下のコメントから追加：

Content： ""とcontent：noneの違いは、content： ""がコンテンツのない擬似要素（つまり、空の擬似要素）を生成するのに対し、content：noneは擬似要素の生成を防止することです。

103
Sacha

ここで、content: "";はまったく効果がありません。その疑似を削除する場合は、content:none;を使用する必要があり、以前に追加された疑似コンテンツが削除されます。

それでも解決しない場合は、以下を試してください：

display:none; 
//or 
display:none !important;

ここで働いていますjsfiddle

https://jsfiddle.net/ganeshswami99/52duu0x8/1/

6
Ganesh