当前位置: 动力学知识库 > 问答 > 编程问答 >

css - why isn't my ID being applied?

问题描述:

CSS:

#holidayclosings ul{

margin:0;

padding:0;

background:red;

}

HTML:

<ul id="holidayclosings">

<li>Saturday, December 24: <b>Closed</b></li>

...

So as far as I can tell the #holidayclosings ul rule has NO EFFECT. If I change it to just ul it works, but then it affects the entire page, not just this one list. Obviously I'm forgetting something, but I haven't had enough coffee and I'm drawing a blank. can someone help me out here?

网友答案:

Because you are trying to select the ul element that is a descendant of the #holidayclosings element. Try:

#holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

If you want to select an element in CSS by using a tag name and an identifier (notice there are no spaces between the tag name and the ID):

ul#holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

However for elements that you are selecting with IDs this doesn't make sense since there can only be one of the element in the DOM. It's more useful for selecting elements by attribute:

ul.holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}

OR

ul[name="holidayclosings"] {
    margin     : 0;
    padding    : 0;
    background : red;
}
网友答案:

It doesn't work because that CSS rule #holidayclosings ul is looking for a ul within the element of an id of holidayclosings. To target the ul itself use: #holidayclosings or ul#holidayclosings (the latter is almost entirely redundant since there can only be one element of a given id within the document, so it's element-type doesn't matter).

The space between selectors is a descendent selector (see the W3.org entry).

网友答案:

you have an extraneous ul in your declaration. You can (but don't!) do ul#holidayclosings but right now your CSS declaration assumes the ul is a child of #holidayclosings

网友答案:

Or

ul#holidayclosings {
    margin     : 0;
    padding    : 0;
    background : red;
}
网友答案:

#holidayclosings ul will apply the enclosed styles to any ul's that are descendants of whatever element has the #holidayclosings id.

What you want is:

#holidayclosings {
    margin:0;
    padding:0;
    background:red;
}

An example of what one might use your original selector for:

<div id="holidayclosings">
    <ul>
        <li>Saturday, December 24: <b>Closed</b></li>
        ...
    </ul>
    <ul>
        <li>Saturday, December 24: <b>Closed</b></li>
        ...
    </ul>
</div>

In this case, the styles would apply to both of the ul's within the #holidayclosings div.

分享给朋友:
您可能感兴趣的文章:
随机阅读: