Detailed description of CSS3 basic selector and CSS3 Selector

Detailed description of CSS3 basic selector and CSS3 Selector

CSS SelectorI think everyone is familiar with it, because it is used every day, butCSS3 SelectorI think it is still difficult for many friends to use the nth selector in CSS3. From now on, let's take a look at the differences between their versions from the beginning.CSS Selector.

CSS is a language used to render html and xml on the screen. CSS mainly applies styles to the corresponding elements to render the elements that are relatively applied, in this way, it is very important to select the corresponding elements. In this case, we need to talk about the selector. The selector is mainly used to determine DOM element nodes in the html tree structure. I putCSS SelectorSplit into three parts. The first part is our common part. I call it the basic selector. The second part is called the attribute selector. The third part is called the pseudo-class selector, this is also the most difficult part to understand and grasp. Let's take a look at the first part-the basic selector. Let's first look at a list of commonly used selectors.

Next, let's take a look at the usage of the basic selector in the table and its role. To better illustrate the problem, first create a simple DOM structure, as shown below:

<div class="demo">     <ul class="clearfix"><li id="first" class="first">1</li><li class="active important">2</li><li class="important items">3</li><li class="important">4</li><li class="items">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li id="last" class="last">10</li>     </ul></div>

Add some styles to this demo to make him look better.

    .demo {width: 300px;border: 1px solid #ccc;padding: 10px;    }    li {        float: left;height: 20px;line-height: 20px;width: 20px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;    }

The initial results are as follows:

1. wildcard selector (*)

The wildcard selector is used to select all elements. You can also select all elements under an element. For example:

      *{  marigin: 0;  padding: 0;      }

The above code shows a lot in the reset style file. It indicates that the margin and padding values of all elements are set to 0, you can also select all elements under an element:

      .demo * {border:1px solid blue;}

The effect is as follows;

From the above, as long as the element border under div. demo is added with a new style.All browsers support the wildcard selector.

Ii. Element selector (E)

The element selector is the most common and basic selector in css selectors. The element selector is actually a document element, such as html, body, p, div, and so on. For example, in this demo, the elements include div, ul, and li.

li {background-color: grey;color: orange;}

Select the li element of the page and set the background color and foreground color. The effect is as follows:

All browsers support element selectors (E ).

Iii. class selector (. className)

Class selectors specify styles independently of document elements. Class names must be defined on html elements before class selectors are used. In other words, class names must exist in html tags, in this way, you can select a class, such:

<li class="active important items">2</li>

In the "active, important, items" section, we add a class name to the class li so that the class selector can work normally, so as to better associate the style of the class selector with the element.

.important {font-weight: bold; color: yellow;}

The code above indicates that an "font in bold and color in yellow" style is added to the element with the important class name, as shown in

Class selectors can also be used with element selectors. For example, many elements in your document use the class name "items", but you only want to modify the style on the class name of the p element, then you can select and add the corresponding style as follows:

       p.items {color: red;}

The code above will only match all p elements whose class attribute contains important, but none of the other types of elements do match, including elements with the class name "items, as mentioned above, "p. items only applies to p elements and has a class named "items ". None of the two conditions will be selected.

The class selector can also have multiple class names. As we can see above, there are two or more class names in our li element, which are separated by spaces, the selector can also be connected by multiple classes, for example:

      .important {font-weight: bold;}      .active {color: green;background: lime;}      .items {color: #fff;background: #000;}      .important.items {background:#ccc;}      .first.last {color: blue;}

As shown in the code above, the selector ". important. items" takes effect only when the element contains both the "important" and "items" classes ,:

Note that if one of the class names in a multi-class selector does not exist, the selector will not be able to find matching elements, such as the following code, the corresponding element tag cannot be found, because there is only one li in our list. first and a li. last, there is no one called li. first. last list item:

 .first.last {color: blue;}

All browsers support class selectors, but multi-class selectors (. className1.className2) are not supported by ie6.

Iv. id selector (# ID)

The ID selector is similar to the class selector mentioned above. before using the ID selector, you must add the ID name in the html document, in this way, the corresponding elements can be found in the style selector. The difference is that the ID selector is a unique value in a page, when using a class, we add ". (. className) while the id selector uses "#" before the name, for example (# id ),

   #first {background: lime;color: #000;}   #last {background: #000;color: lime;}

The above code selects the list items with id "first" and "last". The effect is as follows:

Note that the ID selector defines the id of p as "# important" in "outputs". However, in test.htmland test1.html, only one id is called "# important.

All browsers support ID selectors.

So when should I use the id name? When Will class names be used? In my opinion, the key point isUnique use id selector; common, similar use class selector.It is recommended that the two selectors be case sensitive.

V. Descendant selector (e f)

The descendant selector is also called the include selector. It is used to select the descendant element of an element. For example, e f, E is the ancestor element, and F is the descendant element, the expression means that all descendant F elements of the E element are selected. Note that a space is required to separate them. Here, F will be selected regardless of the sub-element of the Eelement, the sun element, or a deeper relationship. In other words, no matter how many layers of F relationship is in E, it will be selected:

.demo li {color: blue;}

As shown above, select all li elements in div. demo.

All browsers support the descendant selector.

6. Child element selector (E> F)

The child element selector can only select the child element of an element. E is the parent element, and F is the child element. E> F indicates that all the child elements F under the E element are selected. This is different from the descendant selector (e f). In the descendant selector, F is the descendant element of E, and the child element selector E> F, where F is only the child element of E.

ul > li {background: green;color: yellow;}

In the code, select all sub-elements under ul. For example:

IE6 does not support child element selectors.

VII. Adjacent sibling element selector (E + F)

The adjacent sibling selector can select the elements that follow the other element, and they have the same parent element. In other words, EF has the same parent element, in addition, F elements are adjacent to the Eelement, so that we can use the adjacent sibling element selector to select F elements.

li + li {background: green;color: yellow; border: 1px solid #ccc;}

The above Code indicates that the adjacent element li of li is selected. Here we have a total of 10 li, so the above Code selects nine from 2nd li to 10 li, see the results:

Because the second li is the adjacent element of the first li, and the third is the second adjacent element, the third is also selected, therefore, the last nine li addresses have been selected. If we use another method, we may better understand the following:

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

According to the previous knowledge, this code clearly selects the adjacent li elements after li. active. Note that there is only one adjacent element after li. active.

IE6 does not support this Selector

8. General brother selector (E ~ F)

The common sibling element selector is a new selector added to CSS3. This selector Selects all sibling elements after an element. They are similar to adjacent sibling elements and need to be in the same parent element, in other words, the E and F elements belong to the same parent element, and the F element is after the Eelement, then E ~ The F selector selects the F element after all the eElements in. For example, the following code:

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

The code above indicates that all the sibling elements following the li. active Element are selected. li ,:

The common sibling selector is very similar to the adjacent sibling selector, except that the adjacent sibling selector only selects elements that are adjacent to the adjacent ones (only one selected element, the adjacent sibling element is selected, which may be confused. You can take a closer look at the adjacent sibling element.

IE6 does not support the usage of this selector.

9. Group selector1, selector2,..., selectorN)

The Group selector groups elements with the same style. Each selector is separated by a comma (,), as shown in the preceding figure: selector1, selector2,..., selectorN. This comma tells the browser that the rule contains multiple different selectors. If this comma is not included, the meaning of the expression is completely different. Without the comma, it becomes the descendant selector we mentioned earlier, be careful when using this. Let's take a simple example:

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

Because li. first and li. last have the same style effect, we will write them into a group:

All browsers support group selectors.

The preceding nine selectors are the basic selectors in CSS3, and the most common ones are:Element selector, class selector, ID selector, descendant selector, group SelectorIn addition, you can combine these selectors in practical applications to achieve the goal. The first part of the CSS3 selector-the basic selector is introduced here. It is a bit simple. I hope it will be helpful to those who first contact CSS, next, we will introduce the second part of the CSS3 selector-attribute selector. If you are interested, please refer to the updates on this site.

Thanks to W3CPLUS for providing the original article.

Welcome to the internet technology exchange group: 62329335

Decompressed pseudo-class selector in CSS3 selector of html 5: not example

"Select a pseudo-class selector: not
Example:
: Not (. class3)
Select all elements that do not contain class3
I am also learning about html5. I recommend you a New video. The eighth episode of the video series is about the CSS3 selector in Buid New World. You deserve it"

Selector added by CSS3

@ Media (min-width: 992px)
The minimum visible range of a browser is 992px. When the visible range of a browser is ≥992px, the maximum width of. container is 970px,
That is, no matter how large the browser is, as long as it is not less than 992px, the width of. container is always 970px.

When the visible range of the browser is smaller than 992px, the setting in. container is invalid.

Here, a default value should be set in container.

Another example:
@ Media (max-width: 1000px ){. similarly, the @ media {max-width: 970px ;}here means that if the maximum width of the browser is 1000px and its size is smaller than 1000px ,. the value in the container takes effect.

That is to say:
The value in @ media {} is the allowed condition. When this condition is set, the content in it takes effect.

Detailed translation is:

If the browser width is less than or equal to PX (Note: to understand the meaning of the maximum width, the minimum width is greater than or equal to this value ),. the maximum width of the container is 970px, no matter how much the browser is scaled ,. the container width is always 970px, but when it is greater than 1000px ,. the value in the container is invalid.

@ Media can also write a fixed width value, such:
@ Media (wdith: 1000px ){. when the width of the container {width: 970px} browser is PX ,. the container width is 970px. Obviously, this is definitely equal to the value, which is meaningless.

Above ~
Self-test results ......