开发者

How can I use the same CSS attribute on several selectors?

开发者 https://www.devze.com 2023-02-12 22:39 出处:网络
Please say there\'s a simpler/shorter way to write th开发者_开发技巧is CSS: .ads h3{ color: #f7f7f7;

Please say there's a simpler/shorter way to write th开发者_开发技巧is CSS:

.ads h3{
color: #f7f7f7;
}
.ads p{
color: #f7f7f7;
}
.ads blockquote{
color: #f7f7f7;
}

It's a right pain at the moment and takes up space in the CSS file...


You can group selectors that you wish to share common rules by separating them with commas. So, the following will work:

.ads h3, .ads p, .ads blockquote {
   color: #f7f7f7;
}

See the CSS 2.1 Specification, Section 5.2.1.


God says: "Yes"

"Your prayers have been answered my child"

.ads h3, .ads p, .ads blockquote {
    color: #F7F7F7;
}

And even taking it further (if there are no child elements which should not be colored as well):

.ads * {
    color: #F7F7F7;
}

And if you're OK with the text inside the paragraph itself to also have this same gray color:

.ads {
    color: #f7f7f7;
}

This will be overridden by any other styles that have been set on p, blockquote or h3, so you might want to take it further:

.ads, .ads * {
    color: #f7f7f7;
}


You can write it like this to make it simpler/shorter.

.ads h3, p, blockquotes{
color: #f7f7f7;
}


Unless there are any other overriding rules you haven't shown, this will be fine:

.ads 
{
color: #f7f7f7;
}


.ads h3, .ads p, .ads blockquote{
  color: #f7f7f7;
}


.ads h3,
.ads p,
.ads blockquote {
  color: #f7f7f7;
}


You don't need the trailing ; either (per YUI CSS Min)

.ads h3,.ads p,.ads blockquote{color:#f7f7f7}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号