Is there a difference between a space and no space in the CSS definition class?

Source: Internet
Author: User
. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.