0

I am having trouble understanding how CSS rules are applied.

For a paragraph in a div, I want to apply this newly defined rule:

.imgDescription {
    position: absolute;
    right: 10px;
    color: #000; 
}

but the paragraph is still styled by the preceding rule:

.dark-wrapper .inner p {
    font-family: 'Open Sans';
    font-size:14px;
    color:#CCC;
}

I don't know how to fix this.

4

2 に答える 2

0

!importantスタイルに追加できます。

.imgDescription {
    position: absolute !important;
    right: 10px !important;
    color: #000 !important;
}

または、 -partの.imgDescription下に を定義します。.dark-wrapper .inner p私の知る限り、CSS 定義は定義内の順序に従って重み付けされます。ここで間違っていたら訂正してください...

于 2013-08-30T11:08:49.167 に答える
0

CSS ルール、つまりカスケードと特異性がどのように機能するかを理解する必要があります。

読むことができます：http://www.w3.org/TR/CSS2/cascade.html

あなたの場合、以前に定義されたルールを上書きするように、新しいルールをより具体的にする必要があります。

あなたの例では、次のものが必要です。

.dark-wrapper .inner p {
    font-family: 'Open Sans';
    font-size:14px;
    color:#CCC;
}

.dark-wrapper .inner p.imgDescription {
    position: absolute;
    right: 10px;
    color: #000; 
}

.dark-wrapper .inner p0,0,2,1の特異性を持つ

.dark-wrapper .inner p.imgDescription0,0,3,1 の特異性があり、これはより高く、優先されます。

于 2013-08-30T11:41:34.250 に答える