Class name intersection compound selector using CSS_html/css_WEB-ITnose

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

A compound selector is a selector formed by connecting two or more basic selectors in different ways, mainly including "intersection" Selectors, "union" selectors, "descendant" selectors.

Intersection selector

The "intersection" composite selector is composed of two selectors that are directly connected. The result is to select the intersection of their respective element ranges. The first of them must be a tag selector, and the second must be a category selector or ID selector. There can be no space between these two selectors and they must be written continuously.

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

The "intersection" of two class selectors browser support table for compound selectors:

Use of compound selectors

This is a simple tab menu:

The following is the html code:

• program


• Collection


• Draft


• Project
  

In order to achieve the above effects, we can use compound selectors in CSS.

Select tag

You can use a selector to define all elements, as follows:

.nav li a {}

　Select the first element

In order to add a rounded effect to the upper left corner of the list, you need to select the first element. This can be done as follows Selector to implement:

.nav li.first a {}

　Select the last element

In order to add the upper right of the list To round the corners, you need to select the last element. This can be achieved using the following selector:

.nav li.last a {}

　 Highlight the current page

By changing the color of the tab to show that the page is the current page, we can add the class name current to the class name to achieve this, as follows:

.nav li .current a {}

　Add rounded corner styles to the upper and left corners of the current page

There is a problem now, when the first and last options are selected The corners are at right angles. In order to achieve the style of the current page when selected, and the corners are also rounded, we need to write special selectors specifically for them. Since our class names are now in the same element, we can finally use the intersection compound selector To achieve, as follows:

.nav .first.current a {}
.nav .last.current a {}

　Result

This seems simple, doesn't it? As mentioned above, the problem now is: neither IE5 nor IE6 supports the class name intersection compound selector. IE5 and IE6 will only recognize the last class name when recognizing class names. The effect is as follows:

.nav .first.current a {}
.nav .last.current a {}

IE5 and IE6 parse these two selectors as:

.topnav .currents a {}
.topnav .current a {}

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

There is no problem under IE7, which means that IE7 also supports the class name intersection compound selector.

Solution

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

;

• program
> ;;

• Collection
;

• Draft
;

• Project
;

; .nav .first_current a {}
.nav .last_current a {}

Discussion

There is a way to save us from adding redundant class names like first and last to the page, and that is to use css3 styles. CSS3 makes it easier and easier to select elements. To achieve head and tail effects, the following effects can be used:

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

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