CSS basics note (2) selector, css Selector

CSS basics note (2) selector, css Selector
CSS Selector

Selector {style ;}

Each css style Declaration (Definition) consists of two parts, in the form of: the part before {} is the "selector ", the "selector" specifies the object to which the "style" in {} acts, that is, the elements that the "style" acts on the webpage.

The tag selector is actually a tag in html code. For example,

p{font-size:12px;line-height:1.6em;}

The preceding css style code sets a 12px font size for the p tag and a 1.6em style for the row spacing.

 

Class Selector

Class selectors are most commonly used in css style encoding. For example, the code in the code editor on the right can be used to set the font "timid" and "courageous" to red.

Syntax: .Class selector name {css style code;} Note: 1, Starting with an English dot2. Class selector nameYou can use any name (but do not use Chinese characters). Step 1: Use a proper tag to mark the content to be modified, as shown below: <span> MyCSS </span> Step 2: Use class = "class selector name" to set a class for the label, as shown below: <span Class = "stress"> MyCSS </span> Step 3: Set the css style of the class selector as follows:. stress {color: red ;}/* Before the class, add an English Dot*/

ID Selector

The ID selector is similar to the class selector, but there are also some important differences:

1. Set id = "ID name" for the tag, instead of class = "class name ".

2. The ID is preceded by the well ID.(#)Rather than English dots.(.).

 

Difference between # And. In CSS

Id: used to define a large style on a page, such as column division, top, body, and bottom. It is defined in the form of # top;

Class: used to define detailed styles, such as a specific menu and a line of text, which are defined in the form of. text.

When defining tags in HTML, such as ul, img, and p, directly write: img {}

Class is a style group defined by. style. class = "style ":
. Style defines the style group, which can be called repeatedly, that is, you can have multiple elements in a page using the same style;

ID is a fixed tag, defined by # style1, ID = "style1"

# What is the difference between main and. main:

# Main defines the style of the element ID "main"
. Main is to create a new style named "main ".
# Main can only define the style of the element "main ".
. Main 1. After definition, other elements can be called. The method is class = "main"

Use # To define CSS styles. ID must be used for calling, CSS styles must be defined with., and CLASS must be used for calling. The # defined style is generally used to define the structure framework, some large containers, and can only appear once on the same page. the defined styles are usually modified or repeated. In addition, the ID and CLASS style appear at the same layer, and the ID is better than the CLASS.

To put it simply: # main is the proprietary attribute that defines the specific object main;. main is the common attribute that defines the abstract object main. It is widely used to define the web page framework. It is used to define various web page elements. # Main in main can only appear once on the webpage, while main in. main can appear countless times.

Eg:

.setBlue{   color: blue;}#setRed{   color: red;}

Similarities:Can be applied to any element
Differences:

1,The ID selector can only be used once in the document.. Unlike the class selector, in an HTML document, the ID selector can only be used once and only once. The class selector can be used multiple times.

2,You can use the class selector word list method to set multiple styles for an element at the same time.We can set multiple styles for an element at the same time, but it can only be implemented using the class selector method. The ID selector is not allowed (You cannot use the ID word list ).

Child Selector

Child selector, that is, greater than the symbol (>), used to select the first child element of the specified Tag Element.The following code:

 

Contains (descendant) Selector
Contains selector: adds spaces to select the generation element under the specified tag element..For example, the code in the code editor on the right:
.first  span{color:red;}
This line of code changes the font color of the first text to red.
Note the difference between this selector and child selector. child selector only refers to its direct descendant, or you can understand it as acting on the first generation of child elements. The descendant selector acts on all child elements. The child selector selects the child selector by space, and the Child selector selects the child selector by ">.
Summary:>Act on the first generation of the element,SpaceAct on all descendant of an element.
.setGreen option{   color: green;}<select multiple="multiple" class="setGreen">   <option value="House Blend">House Blend</option>   <option value="Caffee Latte">Caffee Latte</option>   <option value="Cappuccino">Cappuccino</option>   <option value="Chain Tea">Chai Tea</option></select>

 
General Selector
A general selector is the most powerful selector. It is specified by a (*) Number and matches all tag elements in html, the following code uses the font size of any Tag Element in html as 16px.
*{   font-size: 16px;}
 
Pseudo-class selector
The pseudo-class selector allows you to set styles for tags that do not exist in html (the status of tags). For example, you can set the font color for the mouse sliding status of a Tag Element in html:

a:hover{color:red;}
The above line of code sets the font color to red for the sliding status of tag. In this way, the first paragraph of the text content will be added to the "timid" TextMove the mouse overThe font color changes to red.
For the pseudo-class selector, the "pseudo-class selector" that is compatible with all the tokens so far is used on the tag: hover (in fact, there are many pseudo-class selector characters, especially in css3. In fact, hover can be placed on any label, such as p: hover, but their compatibility is also very poor, so it is usually a combination of a: hover.
 
Group Selector
When setting the same style for multiple tag elements in html, you can use the group selector (,). The following Code sets the font color to red for the h1 and span tags in the code editor on the right:
h1,span{color:red;}
It is equivalent to the following two lines of code:
h1{color:red;}span{color:red;}
eg:
<style type="text/css">/*h1,span{color:red;}*/.first,#second>span{            color:green; }</style>