CSS class name intersection compound Selector

First, let's take a look at the basic definition:

A compound selector is a set of two or more basic selectors that are connected in different ways, including the intersection selector, Union selector, and descendant selector.

Intersection Selector

The intersection compound selector is composed of two selectors connected directly. The result is the intersection of the selected element ranges. The first must be the tag selector, and the second must be the category selector or ID selector. There must be no space between the two selectors and continuous writing is required.

Note that the first one must be a tag selector, such as p. class1, but sometimes you can see. class1.class2, that is, both are class selectors. This is allowed in other browsers, but IE6 is not compatible. See the following table:

The "intersection" Compound selector of the two class selectors supports tables in the browser:

Use of compound Selector

This is a simple tab menu:

The following is the html code:

<Ul class = "nav">
<Li class = "first"> <a href = ""> Program </a> </li>
<Li class = "current"> <a href = ""> collection </a> </li>
<Li> <a href = ""> draft </a> </li>
<Li class = "last"> <a href = ""> project </a> </li>
</Ul>

To achieve the above effect, we can use a composite selector in css.

Select <a>Tag

You can use a selector to define all<a>Element, as follows:

. Nav li {}

　　Select the first<a>Element

To add the rounded corner in the upper left corner of the list, you need to select the first<a>Element. This can be implemented using the following selector:

. Nav li. first {}

　　Select the last<a>Element

To add the rounded corner in the upper-right corner of the list, you need to select the last<a>Element. This can be implemented using the following selector:

. Nav li. last {}

　　Highlight the current page

You can change the tab color to display the current page. You can add the current class name to the class name, as shown below:

. Nav li. current {}

　　Add a rounded corner style for the left and right sides of the current page

Now there is a problem. When the first and last options are selected, the corner is right. To achieve the selected style of the current page and the corner is also rounded, We need to write a special selector for them. Because our class names are all in the same element, therefore, we can use the intersection compound selector as follows:

. Nav. first. current {}
. Nav. last. current {}

　　Result

This looks simple, isn't it? As mentioned above, the current problem is that both IE5 and IE6 do not support the compound selector of class name intersection. IE5 and IE6 only recognize the last class name when identifying the class name. The effect is as follows:

. Nav. first. current {}
. Nav. last. current {}

IE5 and IE6 parse the two selectors:

. Topnav. currents {}
. Topnav. current {}

This means that these browsers will add a rounded corner to all the current pages. The effect is as follows:

In IE7, there is no problem, indicating that IE7 also supports the class name intersection compound selector.

Solution

You can add a current style to the first and last li, but this increases the js burden.

<Ul class = "nav">;
<Li class = "first first_current"> <a href = ""> Program </a> </li>;
<Li class = "current"> <a href = ""> collection </a> </li>;
<Li> <a href = ""> draft </a> </li>;
<Li class = "last last_current"> <a href = ""> project </a> </li>;
</Ul>;. nav. first_current {}
. Nav. last_current {}

Discussion

There is a way to avoid adding redundant class names such as first and last in the page, that is, using the css3 style. Css3 makes it easier to select elements and achieves the following effects:

Li: first-of-type {}
Li: last-of-type a {} 3 1

Source: http://www.codesocang.com/news/Webqianduan/2014/0511/7604.html