HTML Tutorial-css Selector-Li Nanjiang

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

• What is a tag selector?

  • Function: Finds all labels for the name in the current interface according to the specified tag name, and then sets the property

• Format:

  Label name {property: value;}

• Note the point:

  • The tag Selector selects all the tabs in the current interface and cannot select a single label

  • Tag Selector can be selected no matter how deep the label is hidden

ID Selector

• What is an ID selector?

  • Function: Locate the corresponding label according to the specified ID name, then set the property

• 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

• What is a class selector?

  • Function: finds the corresponding label according to the specified class name, and then sets the property

• Format:

  . Class Name {property: value;}

• Note the point:

  • Each HTML tag has a property called class, which means that each tag can be set

  • The name of class can be duplicated in the same interface

  • When writing the class selector, be sure to precede the class name with a dot

  • The naming conventions for class names are the same as the naming conventions for ID names

  • The class name is the one that is designed to set the style for CSS.

  • Each label in HTML can be bound to multiple class names at the same time

    Format:< Label name class= "class Name 1 class Name 2 ..." > Wrong wording: <p class= "para1" class= "Para2" >

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?

  • The ID selector starts with #

  • The class selector starts with a.

• is the ID selector or class selector used in enterprise development?

  • ID is usually used for JS, so do not use ID to set the style unless special circumstances

• 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?

  • Function: Find all specific descendant labels for the specified label, set properties

• 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?

  • Function: Find all the specific direct child elements in the specified label and set the properties

• 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

• What is the intersection selector?

  • Function: Sets the properties of the part of the tag that intersect in the selected label for all selectors

• Format:

  Selector 1 Selector 2{property: value;}

• Note the point:

  • There is no connection symbol between the selector and the selector

  • Selectors can use the label name/ID name/class name

  • Intersection selector as a mere understanding, not much in enterprise development

and set Selector

• What is a set selector?

  • Function: Set properties for all selectors selected tags

• Format:

  Selector 1, Selector 2{property: value;}

• Note the point:

  • The set selector must be used to connect

  • Selectors can use the label name/ID name/class name

Brother Selector Neighbor Brother Selector

• What is the neighboring brother selector CSS2

  • Function: Sets the property to the tag immediately following the specified label

• Format:

  Selector 1+ Selector 2{property: value;}

• Note the point:

  • Adjacent sibling selector must be connected via +

  • The adjacent sibling selector can only select the tag that is immediately following it and cannot select the separated label

General Brothers

• What is the Universal Brotherhood selector CSS3

  • Function: Sets properties for all tags selected by all selectors following the specified selector

• Format:

  Selector 1~ Selector 2{property: value;}

• Note the point:

  • The Universal Brotherhood selector must be connected by ~

  • The Universal sibling selector selects all the labels selected by a selector after the specified selector, whether or not they are separated, and can be selected

Sequencer Selector

• The sequence selector is the most representative of the new selectors in CSS3

• What is a sequencer selector?

  • Function: Select any label you specify and set the property

• 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?

  • Function: finds the corresponding label based on the specified property name, and then sets the property

• Format:

  • [Attribute]
    -function: Find the corresponding label according to the specified property name, then set the property

• [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?

  • [Attribute$=value] CSS3

• 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

• What is a wildcard selector?

  • Function: Set properties for all tabs on the current interface

• Format:

  *{property: Value;}

• Note the point:

  • Since the wildcard selector is a property of all the labels on the interface, all tags are traversed before setting, and if there are more labels on the current interface, the performance will be poor, so the wildcard selector is not generally used in enterprise development

HTML Tutorial-css Selector-Li Nanjiang