Python Full stack development * CSS Selector floating * 180808

CSS Selector

I. Basic Selector

1. Tag Selector

Tag Selector can select all of the label elements, such as Div,ul,li, p, etc., regardless of how deep the tag is hidden, can be selected, select All, not one, so say "commonality" rather than "feature"

body{    Color:gray;    Font-size:12px;} /* Tag Selector */p{    color:red;font-size:20px;} span{    Color:yellow;}

2.id Selector

The ID in the same page cannot be duplicated.
Any label can set the ID
ID naming specification to have a numeric underscore in letters-case is strictly distinguished between AA and AA are two different attribute values

# box{        background:green;  }                 # s1{      color:red;  }     # s2{     font-size:30px;}

3. Class Selector

The so-called classes are class. Class and ID are very similar to any of the tags can be added class but the class is repeatable, belonging to the concept of collation.

Multiple classes can be carried in the same label, separated by a space

. lv{    Color:green;}. big{    Font-size:40px;}. line{    Text-decoration:underline;}

<!--common    Properties--    <div>        class="LV big"> paragraph 1</p >        class="LVline"> Paragraph 2</p>        class=" line Big"> paragraph 3</p>    </div>

4. Wildcard Selector

*{} contains head body

Summarize:

• Don't try to use a class to finish writing our page. This tag takes more than one class and sets the style together.
• Each class should be as small as possible, with a public concept that allows more labels to be used

Interview

Do you use ID or class?
Answer: Use the class as much as possible. Unless some special cases can be used with ID

Reason: The ID is usually used in JS. In other words, JS is the ID to get to the label

Two. Advanced Selector

1. Descendant Selector

Use a space to represent the descendant selector. As the name implies, the descendants of the parent element (including son, grandson, heavy grandson)

1 . Container p{2     color:red;         3 }4 . Container. Item p{5     color:yellow; 6}

2. Descendant Selector

Use > to represent descendant selectors. Div>p, for example, represents only the descendants selected by the current DIV element (not including grandson ...). Element P.

1 .container>p{2     color:yellowgreen; 9 ·

3. Set Selector

Use commas to separate multiple selectors. Represents multiple labels in a selected page. Some common elements that can be used with the set selector

1/* Set selector */2 h3,a{3     #008000; 4     text-decoration:none; 5                 6}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th , TD {      margin:0;      padding:0   }/* Use this set selector to select all the tabs on the page, and the page layout will be used */

4. Intersection Selector

Use. Represents the intersection selector. The first label must be a tag selector, and the second tag must be the class selector syntax: div.active

12     3     font-456     7     text-8  9/* Intersection selector */10 h4.active{one     #00BFFF; 12}

It represents the attributes common to the elements after they have been selected.

Three. Property selector (typically used for form controls)

Select the current tab according to the attributes in the tag

1.[for]

2.[for= "username"]{Color:yellow} found the element with the for property equal to username font color set to Yellow

3.[for^= "user"] {color: #008000;} Start with user

4.[for$= ' VVIP ']{color:red} ends with VVIP

5.[for*= "VIP" {color: #00BFFF} contains the label of the VIP element

6. Specify the properties of the word

lable[for~= ' user1 ' {color:red}

Input[type= "text"] {background:red}

Example:

/* Search by attributes *//*[ for]{color:red; }*/* Find the username element with the for property equal to the font color set to Red *//*[ for='username']{Color:yellow; }*/* with .... Opening ^*//*[ for^='User']{Color:#008000;}*//* To .... End $*//*[ for$='VVIP']{color:red; }*/* contains a label for an element *//*[ for*="VIP"]{Color:#00BFFF;}*//**//* Specify the properties of the word */label[ for~='User1']{color:red; } Input[type='text']{background:red; }

Four. Pseudo-class selectors

Pseudo-class selectors are generally used in the hyperlink a tag, using the A-tag pseudo-class selector, we must follow the "love and Hate Guidelines," HAte

1. The style of a tag that is not accessed a:link {color: #666}

2. The style of a tag after access a:visited {Color:yellow}

3. The model a:hover {Color:green} when hovering over a label

4. When the mouse is pressed, the style of a tag a:active{color:yellowgreen

1/               * style of a tag not visited */2         3              4             #666; 5         6/         * style of a tag after access */7           8              9             Color:yellow; Ten         }//         * The style of a tag is */12 when the mouse hovers         . Box ul li.item3 a:hover{                          Color : Green; +         /         * The style of a tag is */17 when the mouse is pressed         . Box ul li.item4 a:active{                          Color:yellowgreen; (         }

5. Introduction of a CSS3 selector nth-child ()

(1) Tags: first-child{font-size:20px; color:red} Select the first element

(2 Tags: last-child{font-size:20px; Color:red} Choose the last one

(3 Tags: nth-child (3) {font-size:20px; Color:red} selects the currently specified element value starting from 1

(4) Tags: nth-child (n) {font-size:20px; Color:red} n means all selected, starting at 0, 0 means not selected

(5) Tags: nth-child (2n) even

(6) Label Nth-child (2n-1) odd

Change color Alternating color  

Copy Code/* Select the first element */Div ul Li:first-child{Font-size:20px;        color:red; }        /* Select the last element */Div ul Li:last-child{Font-size:20px;        Color:yellow; }                /* Select the currently specified element value starting at 1 */Div ul Li:nth-child (3) {font-size:30px;        Color:purple; }                /*n means check all, this must be N, from 0 to 0 is not selected */Div ul Li:nth-Child (n) {font-size:40px;        color:red; }                /* even * *Div ul Li:nth-Child (2n) {font-size:50px;        Color:gold; }        /* ODD */Div ul Li:nth-child (2n-1) {font-size:50px;        Color:yellow; }        /*a few color change interlaced color 4 color change is 5n+1, every 3 color change is 4n+1 */Div ul Li:nth-child (5n+1) {font-size:50px;        color:red; }

Five. Pseudo element Selector

1. Set the initial letter style

p:first-letter{            color:red;            Font-size:30px; }

2. In .... Before adding content using this pseudo element selector Be sure to combine the contents property

p:before{            content:'Alex';        }

3. In ... After adding content layout about (clear floating)

p:after{            content:'&';            color:red;            Font-size:40px;        }

Add:

Reset style: *{padding:0; margin:0}

Go to Dot: tag {list-style:none}

Display Related Settings

Inline in-line display

Inline-block inline block

Block blocks

None hidden (no occupy position shown)

Visible-hidden (hide occupied position) height:0

Python Full stack development * CSS Selector floating * 180808