. example. pp{ Color:orange;}. example.pp2 { color:green;}
As in the above two definitions one is the middle there are spaces, one is the middle no space.
The first class to write to this effect: <p class= "Example" > Text <span class= "pp" >pp this class is effective </span>....</p> The second class is going to work like this: <p class= "Example Pp2" >pp2 This class takes effect </p>
Excuse me, why is this??
. example. PP = E F is a descendant selector.
The. Example.pp2 is an element on which the element includes these two classes to be effective.
There is a difference between the two, there is a big difference!
Example. PP is separated by a space, representing the descendant selector, which is selected in. Example. pp.
For example:
<div class= "Example" > <div class= "pp" > Selected elements </div></div>
The. EXAMPLE.PP selects the elements in class that contain both example and pp.
For example:
<div class= "Example pp" > Selected elements </div>
This is the format of the CSS selector, which specifies that there is a "and" relationship between the selection criteria without spaces, a "parent-child" relationship with spaces, and a non-direct "parent-child" relationship
<style>.e1.e2{background-color:yellow;}. Father. E3{background-color:green;} </style>
The first paragraph in the above code P has two class,e1 and E2, note that the class property of the space and CSS space is not a meaning, the class attribute of the space is "and" the relationship, and just said that the CSS space is "parent and descendant" relationship.
The first p is rendered for yellow because the CSS is used. E1.e2 's selector sets the color for him, which is the paragraph with these two classes. Of course, CSS does not use. e1.e2 only. E1 can also achieve the same effect, but sometimes we do not want the CSS selector mistakenly hit other tags, it is so thin.
The second p is rendered green by the. Father. e3 because the class of P is E3 and is a descendant of the label of class father, so it is dyed green.
Similarly, the third p, although not a direct subclass of father, is also turned green, indicating that a selector with a space can contain indirect descendants.
Difference upstairs has been made clear, say why sometimes need to use more than one class selector to select an element
1,css's Chinese translation is a cascading style sheet whose style is based on inheritance and overrides to produce the final style. The style weights of the
2,css have a set of rules, the weights are the ones that are ultimately represented, so sometimes we add weights by adding a class selector to represent this element in order to be able to override the previous style