CSS selector, I think we will not be strange, because every day in use, but for CSS3 selector, to use the flexible in place, I think for many friends or a certain difficulty, especially IN CSS3: NTH selector. So for now let’s forget about the differences between their versions and look at CSS selectors from the beginning.
CSS is a language used for rendering HTML, XML and so on on the screen. CSS mainly applies styles in the corresponding elements to render the relative applied elements, so it is very important for us to select the corresponding elements. How to select the corresponding elements, at this time we need what we call the selector. Selectors are primarily used to determine DOM element nodes in the TREE structure of HTML. I’ve split the CSS selector into three parts. The first part is the one we use all the time, which I call the basic selector. The second part is what I call the attribute selector, and the third part is what I call the pseudo-class selector. This part is also the hardest part to understand and master. Today we will look at the first part — the basic selector. Let’s start with a commonly used selector list diagram
Let’s take a look at the basic selectors in the table above and their functions. To better illustrate the problem, let’s create a simple DOM structure as follows:
<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>
Copy the codeAdd some styling to the demo to make it 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;
}
Copy the codeThe preliminary results are as follows:
The wildcard selector is used to select all elements, and can also select all elements under an element. Such as:
*{
marigin: 0;
padding: 0;
}
Copy the codeMargin and padding are set to 0 for all elements. The other option is to select all elements under an element:
.demo * {border:1px solid blue; }Copy the codeThe effect is as follows;
As you can see from the above illustration, all elements under div.demo have their borders styled in a new way. All browsers support wildcard selectors.
Element selectors (E) Element selectors are the most common and basic CSS selectors. Element selectors are the elements of a document, such as HTML,body, P,div, etc. For example, in our demo: elements include div,ul,li, etc.
li {background-color: grey; color: orange; }Copy the codeSet the background color and foreground color to the li element of the selected page.
All browsers support element selectors (E).
Class selectors specify styles in a way that is independent of document elements. Before using class selectors, you need to define the className on the HTML element. In other words, you need to ensure that the className exists in the HTML tag.
<li class="active important items">2</li>
Copy the codeIn “active,important, items”, we add a class name to li so that the class selector can work properly and better associate the style of the class selector with the element.
.important {font-weight: bold; color: yellow; }Copy the codeAdd a bold font and a yellow color to the element with the important class name
Class selectors can also be used in conjunction with element selectors. For example, if you have several elements in your document that use the class name “items”, but you only want to change the style on the class name p element, you can make the selection and add the corresponding style:
p.items {color: red; }Copy the codeThe above code will only match all p elements with the class attribute important, but will not match any other elements, including elements with the class name “items”. As mentioned above, “p.tems” will only match p elements with a class name of “items”. Those that do not meet either of these criteria will not be selected.
Class selectors can also have multiple class names. As we saw above, we can have two or more class names in the li element separated by Spaces, so the selectors can also use multiple class names together, as in:
.important {font-weight: bold; } .active {color: green; background: lime; } .items {color: #fff; background: #000; } .important.items {background:#ccc; } .first.last {color: blue; }Copy the codeAs the code above shows, the “.import. items” selector works only if the element contains both “important” and “items”, as shown:
It is important to note that if a multi-class selector contains one of the class names that does not exist, then the selector will not be able to find the matching element. For example, in this code, it will not be able to find the matching element tag because we only have one Li.first and one Li.last in our list. There is no list item called Li.first. last:
.first.last {color: blue; }Copy the codeAll browsers support class selectors, but multi-class selectors (.classname1.classname2) are not supported by IE6.
The id selector is very similar to the class selector described above. Before using the ID selector, you need to add the ID name to the HTML document, so that you can find the corresponding element in the style selector. The difference is that the ID selector is a unique value in a page. When we use a class, we add a “before the corresponding class name. The id selector uses “#” before the name, such as (#id),
#first {background: lime; color: #000; } #last {background: #000; color: lime; }Copy the codeThe code above selects the list items with ids “first” and “last”, with the following effect
There are a few things to note about ID selectors. First, an ID selector is allowed to be used only once in a document, because ids are unique on the page. Second, id selectors cannot be combined like class selectors. An element can only be named with one ID name. Third, you can use the same ID name in different documents. For example, you can specify “#important” for h1 in “test.html” or “#important” for P in “test1.html”. Only one id “#important” is allowed in either test.html or test1.html.
All browsers support ID selectors.
So when do you name it by ID? When do you use class naming? I personally think the key thing is to be unique using id selectors; Common, similar use of class selectors. When using these two selectors, it is best to be case-sensitive.
Five, the descendant selectors (E, F) also called contains selector, descendant selectors role is can choose the offspring of the element, for example, E, F, E as the ancestor element, in front of the F element for posterity, expressed by the means to select all the offspring of the elements of E F element, please note that need to be separated by a space between them. Here F will be selected whether it is a child of E or a grandchild of E or a deeper relationship, in other words, it will be selected regardless of how many relationships F has in E:
.demo li {color: blue; }Copy the codeSelect all the li elements in div.demo
Descendant selector supported by all browsers.
The child element selector can only select the child elements of an element, where E is the parent element and F is the child element, where E>F indicates that all child elements F under E are selected. This is different from the descendant selector (E F), where F is a descendant of E, and the child selector E > F, where F is only a child of E.
ul > li {background: green; color: yellow; }Copy the codeSelect all child elements li under ul. Such as:
Internet Explorer 6 does not support child element selectors.
Seven, adjacent sibling selector (E + F) adjacent brother selector can choose one shortly after another element of the element, and they have the same parent element, in other words, the EF two elements have the same parent element, and F element behind E element, and the adjacent, so that we can use the adjacent sibling selector to choose F element.
li + li {background: green; color: yellow; border: 1px solid #ccc; }Copy the codeThe code above selects the adjacent element li from li. There are ten Li, so the code above selects nine li from the second li to the tenth Li.
Because the second Li is a neighbor of the first Li, the third is a neighbor of the second li, so the third is also selected, and so on, so the next nine Li are selected. If we look at it in a different way, we might understand it better:
.active + li {background: green; color: yellow; border: 1px solid #ccc; }Copy the codeActive = li.active = li.active = li.active = li.active = li.active As shown in figure:
IE6 does not support this selector
Brother, general selector (E ~ F) general sibling selector is CSS 3 new a selector, the selector will choose a certain elements behind all of the sibling elements, they are also similar to adjacent sibling elements, need with the same parent element, in other words, E and F elements belong to the same parent element, and F element after E element, The E ~ F selector then selects the F element following all E elements in the. For example:
.active ~ li {background: green; color: yellow; border: 1px solid #ccc; }Copy the codeThe code above shows that all siblings of the li.active element li are selected, as shown in the figure below:
Universal sibling selectors are very similar to neighboring sibling selectors, except that neighboring sibling selectors select only the next element that is an element (only one element is selected). The universal sibling selector, on the other hand, selects the next sibling of an element, which may be confusing, but you can take a closer look at the renderings of its adjacent siblings.
IE6 does not support this use of selectors.
Group selector (selector1,selector2,… A group selectorN group is a group of elements with the same style separated by a comma “, “, as shown above: selector1,selector2… , selectorN. This comma tells the browser that the rule contains several different selectors. Without this comma, the meaning is completely different. Leaving out the comma becomes the descendant selectors we mentioned earlier. Let’s look at a simple example:
.first, .last {background: green; color: yellow; border: 1px solid #ccc; }Copy the codeSince li.first and Li. last have the same style effect, we put them in a group:
All browsers support group selectors.
The above nine kinds of selector is the basic selector in CSS3, and we are most commonly used is the element selector, class selector, ID selector, descendant selector, group selector, at the same time we can combine these selectors in the practical application, to achieve the purpose of the line. So about the first part of CSS3 selector – basic selector is introduced here, a little simple, I hope to help the students who contact CSS for the first time, the next section will introduce the second part of CSS3 selector – attribute selector, interested friends please view the update of this station.
If need to be reproduced, please note the source: W3CPLUS
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source. Original text: © https://www.w3cplus.com/css3/basic-selectors w3cplus.com