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.
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:
This is a simple tab menu:
The following is the html code:
In order to achieve the above effects, we can use compound selectors in CSS.
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.
You can add a current style to the first and last li separately, but this increases the burden of js.
; .nav .first_current a {}
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