The HTML document includes two external sources with stylesheets (using link href=file.css ).

For one of the classes, the style is set in both files, moreover with overlapping attributes. Is it possible to make one of these descriptions "priority"?

Specificity - when using icefaces page styles are loaded from the royale.css file, and among them for links ( .iceCmdLnk ) the style is defined in which color:black, text-decoration:none .

I immediately try to include my own file ( general.css ), in which I want to override the color of the links to the more familiar ( color:blue, text-decoration:underline ). I try to change the inclusion of two files in places - but I don’t see the effect - the links remain black, in firebug my styles are marked "crossed out" (of course, the styles from general.css for other elements that are not overlapped work fine).

Or am I missing something?

Thank you in advance.

    3 answers 3

    Priority can be set:

    1. The indication !important . IE is ignored.
    2. A more detailed description of the element ( li .link will overlap .link ).
    3. The order of description. Who later, he will block.

      If conflicting style rules are applied to one element at the same time, then the higher priority is given to the rule whose value of the specificity of the selector is greater. Specificity is a certain conditional value, calculated as follows. For each identifier (further we will denote their number by a) 100 are charged, 10 classes are charged for each class and pseudo-class, 10 are charged for each tag selector and pseudo-element (c) 1. By adding the specified values ​​in a certain order, we get the specificity value for this selector.

      * {} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */ li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */ ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */ li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */ #t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */ #content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

      The inline style added to the tag via the style attribute has a specificity of 1000, so it always overlaps the related and global styles. However, the addition of! Important overlaps including inline styles.

      If two selectors have the same specificity, then the style that is defined in the code below will be applied.

      A source.

        The higher priority is the one that was included last, but the style specified directly in the element ( <a style="color: red">слово</a> ) has the highest priority.

        • Thank! It was necessary to confirm this fact, which I only suspected. At your hint, I began to dig and found that icefaces rearranged two different inclusions of styles, so mine was at the beginning of the file, although on the xhtml template I was the last to go. I stuffed one into the head with another into the body — everything was fine. ;-) - RodionGork
        • To raise the priority to the heavens, you need to describe the style directly inside the element marked! impotrant - Zowie