HTML selector serial 17-id & class selector

First, the problem: we speak in front of the tag selector has a defect that it indiscriminately to all the same label all become unified style, which for us personalize created obstacles, we will lead to the id selector, to configure the specified style

Two, id selector

1. Definitions: find the corresponding tag name in accordance with the specified id, and then set the properties

2. Format:

#id name {

Property: value;

｝

3. For example:

 

 <style>

        p{

            color: rgb(255,45,45);

        }

        #label1{

            color:black;

        }

        #label2{

            color: #37fa1e;

        }

        #label3{

            color: blue;

        }

        #label4{

            color:green;

        }

</style>

</head>

<body> 

< B ID = "Label1" > </ B > 

< P ID = "label2" > late destroy life </ P > 

< P ID = "Label3" > early leave poor Three Generations </ P > 

< P ID = "Label4" > to work on time </ P > 

< P ID = "Label5" > Beecham high handsome </ P >

4. Note:

(1) each HTML tag has a property called id, which means that each tag can be set id

(2) in the same interface name is not duplicated id

(3) at the time of writing id selector must be in front of the id name with #

(4) id name is standard: only letters, numbers, underscores, and can not start with a number; id name can not be named HTML tag names

(5) in the enterprise development in general, if only to set the style, we generally do not use id, because the id is reserved for front-end development using js, you can use the class selector

Third, the class selector

1. Definitions: find the specified tag corresponding to the class name, and then set the properties

2. Format:

(1) written in HTML format and is consistent with id

(2) in the style of:

The class name {

Property: value;

｝

3. Examples:

    < Style > 

        .pp2 { 

            Color : Aqua ; 

        } 

        .pp3 { 

            Color : Blue ; 

        } 

</ style > 

</ head > 

< body > 

< P class = "PP2" > late destroy life </ P > 

< P class = " PP3 " > early leave poor Three Generations </ P > 

< P class =" PP2 " >To work on time </ P> 

< P class = "PP2" > Beecham high handsome </ P > </ body >

4. Notes:

(1) each HTML tag has an attribute called the class, which means that each tag can be set class

(2) in the same interface class names can be repeated

(3) must be added in front of the class name at the time of writing class selector.

(4) class name is standard: only letters, numbers, underscores, and can not start with a number; class name can not be named HTML tag names (like naming conventions and id)

(5) is to use the class selector styled

(6) In each of the HTML tags you can simultaneously bind multiple class name

Format:

E.g:

 

        {.ppp 

            font-size: 50px; 

        } 

        .pppp { 

            Color: Red; 

        } 

        .ppppp { 

            font-Family: Microsoft yahei; 

        } 
....... (intermediate omitted) 



< P class = "PPP pppp PPPPP " > little experiment </ the p- >

A plurality of class names to control different properties.

Fourth, the source code:

d69_class_selector

d68_id_selector

address:

https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)

3. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, backstage reply "gifts" big data acquisition Java Learning Video Package

HTML selector serial 17-id & class selector

Guess you like