650) this.width=650; "Src=" http://upload-images.jianshu.io/upload_images/647982-273a34dbeb1ac8f1.png?imageMogr2/ auto-orient/strip%7cimageview2/2/w/1240 "alt=" 1240 "/>
Companion video
CSS Selector
650) this.width=650; "Src=" http://upload-images.jianshu.io/upload_images/647982-818da2e694534f3b.png?imageMogr2/ auto-orient/strip%7cimageview2/2/w/1240 "alt=" 1240 "/>
Tag Selector
ID Selector
What is an ID selector?
Format:
#id名称 {property: value;}
Note the point:
Each HTML tag has a property called ID, which means that each tag can be set with an ID
The name of the ID in the same interface can not be duplicated
Be sure to precede the ID name with # before you write the ID selector
The name of the ID is a certain specification
The name of the ID can only be by letter/number/underscore (A-Z 0-9 _)
ID name cannot start with a number
The ID name cannot be the name of the HTML tag () cannot be a h1 img input ...)
In the general case of enterprise Development if only to set the style, we will not use the ID, because in the front-end development of the ID is generally left for JS to use the
Class Selector
ID selector and class selector
What is the difference between ID and class?
1.1
ID is equivalent to a person's identity card can not be duplicated
Class is equivalent to a person's name can be repeated
1.2
An HTML tag can only bind an ID name
An HTML tag can bind multiple class names
What is the difference between the ID selector and the class selector?
is the ID selector or class selector used in enterprise development?
In enterprise development, a developer's use of the class can be seen in the developer's skill level.
In general, in enterprise development to pay attention to redundant code extraction, you can extract some common code into a class selector, and then let the tag and this class selector binding to
Descendant Selector
What is a descendant selector?
Format:
Label Name 1 Tag name 2{property: value;}
First find all the tags called "tag name 1", and then under this tab to find all the names called "tag name 2" label, and then set the property
Note the point:
Descendant selectors must be separated by a space
Descendants are not only sons, but also grandchildren/grandchildren, as long as they are eventually placed in the specified label.
Descendant selectors can not only use tag names, but can also use other selectors
Descendant selectors can continue through spaces
Child element Selector
What is a child element selector?
Format:
Label name 1> tag name 2{property: value;}
First find all the tags called "tag name 1", and then look in this tab for all elements of the direct child element name called "tag Name 2"
Note the point:
Child element selectors only look for sons and do not look for other nested tags
A > symbol is required between child element selectors and cannot have spaces
Child element selectors can not only use label names, but can also use other selectors
The child element selector can be continued through the > symbol
Descendant selectors and child element selectors
What is the difference between a descendant selector and a child element selector?
1.1
Descendant selectors use spaces as connection symbols
child element Selectors use > as connection symbols
1.2
The descendant selector selects all of the specific descendant tags in the specified tag, that is, the son/grandson ..., as long as the specific label that is placed on the specified label will be selected
The child element selector only selects all specific direct tags in the specified label, that is, only the specific son tag is selected.
Common denominator between descendant selectors and child element selectors
2.1
Descendant selectors and child element selectors can be used as selectors using the tag name/ID name/class name
2.2
Descendant selectors and child element selectors can all continue through their respective connection symbols.
Selector 1> selector 2> selector 3> selector 4{}
How to choose in the enterprise development
If you want to select all the specific labels in the specified label, then use the descendant selector
If you only want to select all the specific son tags in the specified tag, use the child element selector
Intersection Selector
and set Selector
Brother Selector Neighbor Brother Selector
General Brothers
Sequencer Selector
The sequence selector is the most representative of the new selectors in CSS3
What is a sequencer selector?
Format:
1. Number of peers
: First-child Select the first label in the same level
: Last-child Check the last label in the same level
: Nth-child (n) Select the nth label in the same level
: Nth-last-child (n) Check the reciprocal nth label in the same level
: Only-child Select a label that is unique in the parent element
Note: Do not differentiate between types.
2. The first of the same type
: First-of-type Select the first label of the same type in the same level
: Last-of-type Select the last label of the same type in the same level
: Nth-of-type (n) Select Nth label of the same type in the same level
: Nth-last-of-type (n) Check the reciprocal nth label of the same type in the same level
: Only-of-type Select a label of the unique type in the parent element
3. Other uses
: Nth-child (odd) selects all odd numbers in the same level
: Nth-child (even) selects all even numbers in the same level
: Nth-child (Xn+y)
X and y are user-defined, and n is a counter that increments from 0
: Nth-of-type (odd) selects all odd numbers of the same type in the same level
: Nth-of-type (even) selects all even numbers of the same type in the same level
: Nth-of-type (Xn+y)
X and y are user-defined, and n is a counter that increments from 0
Property Selector
What is a property selector?
Format:
[Attribute=value]
-Action: Find a label with the specified attribute, and the value of the property equals the tag of value, then set the property
-The most common application scenario is to differentiate the input attribute
Input[type=password]{}<input type= "text" name= "" id= "" ><input type= "password" name= "" id= "" >
The value of the property begins with what
[Attribute|=value] CSS2
[Attribute^=value] CSS3
The difference between the two:
Only the beginning of value is found in CSS2, and value is separated by-and other content
The CSS3 can be found as long as the value begins with, whether or not it is separated
What is the end of the value of the property?
property contains a specific value that is worth
[Attribute~=value] CSS2
[Attribute*=value] CSS3
The difference between the two:
Only separate words can be found in CSS2, that is, contains value, and value is separated by a space
CSS3 can be found as long as it contains value, whether or not it is separated
Wildcard Selector
HTML Tutorial-css Selector-Li Nanjiang