Home > Developer > Web Develop
CSS style selector and css Selector
The Mind Map above has roughly described the important points of these six selectors. We will use the code to experiment one by one.
1. HTML selector (TAG selector)
Use the element of the style to be defined as the selector and define the style in the <style> label.
<Html>
Running result: (this selector should be relatively simple)
2. class selector
(1) Use different styles for the same element
<Html>
Running result:
(2) Remove the [tag] so that the selector applies to all elements and agree that one element can use multiple selectors in a single tag at the same time.
<Html>
Running result:
3. ID selector (each ID attribute value is unique in html)
<Html>
Running result:
4. Association Selector
<Html>
Running result:
Because the nested relationship between tags is involved here, we briefly mention style inheritance:
All HTML tags nested in an HTML Tag inherit the styles set by the outer tag.
Lab code:
<Html>
Running result:
5. Combined selector (separated by commas (,). Do not mix them with the Association selector)
<Html>
Running result:
6. pseudo element Selector
<Html>
Running result:
This is when the mouse is not put up, after the mouse is put up, the link will change, such:
There will be no other demos. Basically, the usage of these selectors has been passed through the code, and the rest is to be learned and used by us. It's not easy to look at the effect with a tag.
Which style selectors does css have?There are 10 types:
CATEGORY Selector
Tag Selector
ID Selector
Descendant Selector
Child Selector
Pseudo-class selector
General Selector
Group Selector
Adjacent compatriot Selector
Attribute Selector
What is the selector in the css style?The selector is not hard to understand, just like a person's name. For example, Lu's name is Ma huadeng and the nickname is Ma ge. Compared with css, "Ma huadeng", "Lu Ren jia", and "Ma ge" can all be the selector of this person. In short, the selector is a special attribute of the html Tag, such as id class tagname,
<Div id = "id-div" class = "class-div"> ..... Use # id-div \. class-div or direct div respectively, and then edit the corresponding style to control its style ......
In addition, we recommend a tool for you. You can learn how to use the plug-in firebug in the firefox browser :-)
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
