Css conquer Selectors 1, Css conquer Selectors
Selectors)
--------------- Refer to css learning in MDN.
First, there are many css selectors, but in general there are two types:
Tag selector ~ Single tag
The name of a single tag. You can use this tag for style operations. For example, you can operate the values in the <strong> tag in this html section.
<!DOCTYPE html>You can use its tag in a css file to style the attributes in the tag, for example, changing letters to red.
strong { color: red;}
Tag selector ~ Multiple tags
Official version
| Selector | Selected Element |
A E |
Any descendant Element E of Element A (descendant node refers to child node of A, child node of child node, and so on) |
A > E |
Child element of any element |
E:first-child |
The first sub-element E of any element |
B + E |
The next sibling Element E of any element B |
B ~ E |
Brother Element E following element B with a common parent Element |
Interpretation
Let's list a typical application, such
The effect in should be more common, and underline each menu. My previous implementation is: Add a border-bottom to each li, and remove the border-bottom of the last li.
In fact, there is no need for such trouble. The following style settings can be solved:
ul li+li{ border-top: 1px solid #ccc;}
Chestnut reference: http://www.cnblogs.com/wangfupeng1988/p/4282954.html
Attribute selector ~
First of all, of course, we need to come up with two heavyweight players: class and id.
(Class selectors)By settingclassAttribute. You can specify the class name for the element. The class name is specified by the developer. Multiple Elements in the document can have the same class name.
When writing a style sheet, the class selector starts with an English period.
(ID selectors)By settingidThe attribute specifies the ID of the element. The ID is specified by the developer. Each ID must be unique in the document.
When writing a style sheet, the ID selector starts.
Let's look at a chestnut:
<p class="key" id="principal">
.key { color: green;}#principal { font-weight: bolder;}
The above p tag also hasclassAttributes andidAttribute,
In css, the id selector principal must be unique, while the class selector can be the same as the key in other labels, so that multiple labels can be operated simultaneously.
You can also combine multiple selectors to form a more definite selector. For example, selector. key Selects all elements whose class attribute is key. selector p. key selects <p> elements whose class attribute is key. In addition to class and id, you can also specify other attributes in square brackets. For example, the selector [type = 'click'] Selects all elements whose type attribute is "button ".Instance: Use the class selector and ID Selector
<!doctype html>
strong { color: red; }.carrot { color: orange; }.spinach { color: green; }#first { font-style: italic; }
3. Save the file and run it in the browser.
Re-organize the order of rules in the style. You will find that changing the order of these rules will not affect the final effect.
Class Selector.carrotAnd.spinachThan the tag SelectorStrong has a higher priority.
ID Selector#firstHigher priority than class selector and label selector.
End:
Record this in the first article. There are also pseudo classes and pseudo elements in the later part. I am not very familiar with it, so I will learn it first and then summarize it.
At the beginning of my blog writing, I still have many shortcomings. I hope you can understand the rhythm. I will optimize it slowly. If you have any omissions, I hope you will learn it with hope. Thank you ~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
