.classA.classB 和.classA .ClassB的区别

Difference between .classA.classB and .classA .classB in CSS?

.classA.classB refers to an element that has both classes A and B (class="classA classB"); whereas .classA .classB refers to an element with class="classB" descended from an element with class="classA".

.classA .classB {
  border: 1px solid; }

It would work, for example, on:

<div class="classA">
  <p class="classB">asdf</p>
</div>

This one, however, targets any type of element that is both class “classA”, as well as class “classB”. This type of style is less frequently seen, but still useful in some circumstances.

.classA.classB {
  border: 1px solid; }

This would apply to this example:

<p class="classA classB">asdf</p>

However, it would have no effect on the following:

<p class="classA">fail</p>
<p class="classB">fail</p>

Note that when an HTML element has multiple classes, they are separated by spaces.

<style>
.classa.classb {
background:green;
border: 1px solid blue ;
}
.classa   .classb {
background:yellow;
border: 1px solid black ;
}
</style>

<input class=”classa classb” type=”text” />

<div class=”classa”><input class=”classb” type=”text” /></div>

084F360282624DF78F97458DA34E386B

在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}

.classA.classB指的是一个元素,同时满足.classA和classB

<div></div>

.classA .classB指的是classB内嵌于classA

<div>

<div>

</div>

</div>

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>
#one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>
.three.four { color: red; }

Multiples

We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that’s getting a little ridiculous =)

via http://css-tricks.com/multiple-class-id-selectors/

Merge two css class for div element

Here ‘ClassA > div’ and ‘classB > div’ have the same properties. So i need to make this as single class to apply to div element.

.classA {
 height: 500px;
 width: 800px;
}
.classB {
 height: 800px;
}
.classB > div {
 xxxx
 yyyy
}
.classA > div {
 xxxx
 yyyy
}
solution:
Use a comma:

.classA > div, .classB > div {
 xxxx
 yyyy
}
 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: