用一个css还是两个,在一个元素上使用两个CSS类

I know this post is getting outdated, but here's what they asked.

In your style sheet:

.social {

width: 330px;

height: 75px;

float: right;

text-align: left;

padding: 10px 0;

border-bottom: dotted 1px #6d6d6d;

}

[class~="first"] {

padding-top:0;

}

[class~="last"] {

border:0;

}

But it may be a bad way to use selectors. Also, if you need multiple "first" extension, you'll have to be sure to set different name, or to refine your selector.

[class="social first"] {...}

I hope this will help someone, it can be pretty handy in some situation.

For exemple, if you have a tiny piece of css that has to be linked to many different components, and you don't want to write a hundred time the same code.

div.myClass1 {font-weight:bold;}

div.myClass2 {font-style:italic;}

...

div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}

div.myClass2.red {color:red;}

...

div.myClassN.red {color:red;}

Becomes:

div.myClass1 {font-weight:bold;}

div.myClass2 {font-style:italic;}

...

div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}