Html5-Getting Started 3.

CSS selectors.

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:

标签名称{

Properties: Property values

}

Tag Selector (tag name in HTML)

ID selector (The ID name that is bound in the HTML tag)

Category Selector (the class name that is bound in the HTML tag)

Descendant selector (a descendant of a tag-son, grandson ...) ）

child element Selector (son of a tag)

Pseudo-Class selector (sequencer selector)

Wildcard Selector

Intersection Selector

Note the point:
1. The tag Selector selects all the tabs in the current interface and cannot select a single label
2. Tag Selector can be selected regardless of how deep the label is hidden
3. As long as the tag in the HTML can be used as a tag selector (H/a/img/ul/ol/dl/input ...)

ID Selector

1. What is an ID selector?
Function: Locate the corresponding label according to the specified ID name, then set the property

Format:

#id名称{    属性:值;}

Note the point:
1. Each HTML tag has a property called ID, which means that each tag can set the ID
2. The name of the ID in the same interface can not be duplicated
3. Be sure to precede the ID name with # before you write the ID selector
The name of the 4.id is a certain specification

1. id的名称只能由字母/数字/下划线 a-z 0-9 _2. id名称不能以数字开头3. id名称不能是HTML标签的名称. 不能是a h1 img input ...

5. In enterprise development generally, if only to set the style, we will not use the ID, because in the front-end development of the ID is left for JS to use the

Class Selector

1. What is a class selector?
Function: finds the corresponding label according to the specified class name, and then sets the property

Format:

.类名{    属性:值;}

Note the point:
1. Each HTML tag has a property called class, which means that each tag can be set
2. The name of class can be duplicated in the same interface
3. Be sure to precede the class name when writing the class selector.
4. The naming conventions for class names are the same as the naming conventions for ID names
5. The class name is specifically used to set the CSS style
6. Each label in HTML can be bound to multiple class names at the same time

class="类名1 类名2 ...">错误的写法:<p class="para1" class="para2">

ID selector and class selector

What is the difference between 1.id and class?

1.id相当于人的身份证不可以重复class相当于人的名称可以重复2.一个HTML标签只能绑定一个id名称一个HTML标签可以绑定多个class名称

What is the difference between a 2.id selector and a class selector?

id选择器是以#开头* class选择器是以.开头

3. Do you use the ID selector or the class selector in enterprise development?

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

Descendant Selector

1. What is a descendant selector?
Function: Find all specific descendant labels for the specified label, set properties

Format:

标签名称1 标签名称2{    属性:值;}

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
Div p{}

Note the point:
1. Descendant selectors must be separated by a space
2. Descendants are not only sons, but also grandchildren/grandchildren, as long as they are eventually placed in the designated label.
3. Descendant selectors can not only use tag names, but also use other selectors
4. Descendant selectors can continue through the space

Child element Selector

1. What is a child element selector?
Function: Find all the specific direct child elements in the specified label and set the properties

Format:

标签名称1>标签名称2{    属性:值;}

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:
1. The child element selector will only find the son and will not look for other nested tags
2. The child element selector needs to be connected with > symbol, and cannot have spaces
3. Child element Selectors can not only use tag names, but also use other selectors
4. Child element Selector can be continued through the > symbol

Intersection Selector

Basic use in development

1. 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:

选择器1选择器2{    属性: 值;}

Note the point:
1. There is no connection symbol between selector and selector
2. Selector can use label name/ID name/class name

Brother Selector Neighbor Brother Selector CSS2

Function: Sets properties for the selected tag of the selector immediately following the specified selector

Format:

选择器1+选择器2{    属性:值;}

Note the point:
1. Adjacent sibling selector must be connected via +
2. The adjacent sibling selector can only select the tag that is immediately following it and cannot select the separated label

Universal Brotherhood Selector CSS3

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

Format:

选择器1~选择器2{    属性:值;}

Note the point:
1. Universal Brother selector must be connected by ~
2. The universal sibling selector selects all the labels selected by a selector after the specified selector, whether or not it is separated, can be selected

Pseudo-Class selector (sequencer selector)

These few are very common, especiallynth-of-type(n)
The advantage is that you don't have to take so many names (this is a big problem) and you can get the tag directly

The most representative of the new selectors in CSS3 is the sequencer selector.
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 same type of the first few
: 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

<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><title>19-sequence Selector</Title><Style> P: Nth-of-type (Odd) {color:red; }P: Nth-of-type (even) {Color:blue; }</Style></Head><Body><!--: Nth-child (odd) Select all odd numbers in the same level: Nth-child (even) Select all the 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--<p> I am the project</P><p> I am the project </p> <p> I am Project </ p><p> I am a project </p><p > I am Project </p>< p> I am the project </p> <p> I am Project </ p></body> </HTML>          

Property Selector

Go and see the documentation.

1. What is a property selector?
Function: finds the corresponding label based on the specified property name, and then sets the property

Format:
[Attribute]
Function: finds the corresponding label based on the specified property name, and then sets the property

[Attribute=value]
Function: Find the label with the specified attribute, and the value of the attribute equals value, then set the property

The most common scenario is to differentiate the input attribute

input[type=password]{}<input type="text" name="" id=""><input type="password" name="" id="">

Wildcard Selector

1. What is a wildcard selector?
Function: Set properties for all tabs on the current interface

Format:

*{    属性:值;}

Note the point:
Since the wildcard selector is a property of all the labels on the interface, all tags will be traversed before setting, if the current interface is more than the label, then the performance will be poor, so in enterprise development generally do not use a wildcard selector, there are other alternatives to replace

Html5-Getting Started 3.