如何更改此CSS以使其仅适用于某个div?

时间:2011-05-21 01:54:56

标签: css

我有以下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,font,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
{
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
body
{
    line-height: 1;
}
ol,ul
{
    list-style: none;
}
blockquote,q
{
    quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after
{
    content: '';
    content: none;
}
:focus
{
    outline: 0;
}
ins
{
    text-decoration: none;
}
del
{
    text-decoration: line-through;
}
table
{
    border-collapse: collapse;
    border-spacing: 0;
}

如何更改它以使其仅适用于名为header的div和其中的元素?

1 个答案:

答案 0 :(得分:2)

#header html, #header body, #header div, #header span, #header applet, #header object, #header iframe ... etc etc.

正如beejamin已经指出你需要瘦掉你的CSS,对于一个不具有html标签或身体标签等的div来说是过度杀伤

---------更新

 #header, #header div, #header span, #header applet, #header object, #header iframe, #header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header blockquote, #header pre, #header a, #header abbr, #header acronym, #header address, #header big, #header cite, #header code, #header del, #header dfn, #header em, #header font, #header img, #header ins, #header kbd, #header q, #header s, #header samp, #header small, #header strike, #header strong, #header sub, #header sup, #header tt, #header var, #header b, #header u, #header i, #header center, #header dl, #header dt, #header dd, #header ol, #header ul, #header li, #header fieldset, #header form, #header label, #header legend, #header table, #header caption, #header tbody, #header tfoot, #header thead, #header tr, #header th #header , #header td
{
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
#header 
{
    line-height: 1;
}
#header ol,#header ul
{
    list-style: none;
}
#header blockquote,#header q
{
    quotes: none;
}
#header blockquote:before,#header blockquote:after,#header q:before,#header q:after
{
    content: '';
    content: none;
}
#header:focus
{
    outline: 0;
}
#header ins
{
    text-decoration: none;
}
#header del
{
    text-decoration: line-through;
}
#header table
{
    border-collapse: collapse;
    border-spacing: 0;
}

由于CSS更改的数量,更简单的解决方案可能是将标题放在单独的html中,并使用对象或iframe将其放在页面上。

在更小的范围内,我在我网站的下拉菜单栏中使用这种风格的选择器 - 它们与IE6一起使用。

虽然替代子选择器http://css-tricks.com/child-and-sibling-selectors/也可以与IE6一起使用吗?

#header > div ...
    {
        background: transparent;
        border: 0;
        font-size: 100%;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
    }

只会在你的id = header div中深入一级。