CSS継承スタイルをクリアする方法

CSS の継承とスタイルのクリアの使用は、Web 開発では避けられません。 CSS を使用する場合、継承を通じて特定の属性値を他の要素に継承できるため、コードの量とメンテナンスのコストが削減されますが、より良いスタイル効果を得るために継承をクリアする必要がある場合があります。

1. CSS の継承
1.1 継承のルール
CSS では継承される属性値がいくつかあり、これらの属性値は子要素に継承することができます。これらのプロパティ値には、フォント、色、テキストの配置などが含まれます。子要素が対応する属性値を定義していない場合は、親要素から属性値を継承します。例:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 2rem;
}

上の例では、h1 要素は body## の font-family と color## を継承します。 # 要素 # 属性値。 h1 要素ではこれらの属性値が定義されていないため、上位要素から継承されます。 1.2 継承の乱用を回避する

1.2.1 非ユニバーサル プロパティを継承プロパティとして設定しない

背景画像
、幅、高さなど。これらの属性値は、継承属性として設定されている場合は無効であり、子要素には継承されません。 1.2.2 スタイル シートの構造を複雑にしすぎないでください。

/* 不推荐 */
.wrapper > .box > .title {
    font-size: 1.2rem;
}
.wrapper > .box > .content {
    font-size: 1rem;
}

/* 推荐 */
.title {
    font-size: 1.2rem;
}
.content {
    font-size: 1rem;
}

1.3 継承の使用

1.3.1 統一されたフォント属性

body
要素にフォント属性を設定し、そのフォント スタイルを維持できます。継承によるページ全体の一貫性: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body {     font-family: Arial, sans-serif;     font-size: 1rem;     line-height: 1.5; }</pre><div class="contentsignin">ログイン後にコピー</div></div>1.3.2 統一された色属性

body {
    color: #333;
}

h1, h2, h3 {
    color: inherit; /* 继承父元素的颜色 */
}

text-align
属性を設定すると、子要素が統一されたテキスト配置に従うようになります。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body {     text-align: center; } h1, h2, h3 {     text-align: left; /* 继承父元素的文本对齐方式 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2. スタイルのクリアランス

2.1 スタイル シートのリセット

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

2.2

を使用してクリアします CSS3 には、新しい属性値 unset
があります。 unset特定の属性設定の継承効果をクリアして、要素が属性のデフォルト値を取り戻すことができます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">a {     color: inherit;     text-decoration: none;     outline: none;     background-color: unset; /* 取消已经设置好的颜色 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.3 クリアには

を使用します。要素のスタイルをキャンセルする必要がある場合は、たとえば、none
値を使用できます。 : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">input[type=&quot;checkbox&quot;] {     -webkit-appearance: none; /* 取消浏览器默认外观 */     appearance: none; }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.4

! important をクリアするには ! important
を使用します。これは、すべての優先順位を最も高い優先度でオーバーライドする方法であり、継承されたスタイルをオーバーライドしたり、同じ優先順位セットのスタイル。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">p {     color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.5

を使用してスタイルをオーバーライドします。 inherit
属性を使用して、上位要素の値を継承する属性値を設定します。これにより、要素の現在のスタイルがオーバーライドされます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">h1 {     font-size: 2rem; } h2 {     font-size: inherit; /* 继承 h1 的 font-size 属性 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>結論

以上がCSS継承スタイルをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。