Some things about CSS selectors the first chapter basic selector!

About the selector, a lot of people small partners only use the most basic of a few selectors, feel that this thing has no learning, reason, really did not learn. However, the more selectors are mastered, the easier it will be to write code. Give me an example! First a bunch of code and effects, you know what I want to express!

Above a five column of Li, the code is as follows

　　

<style>        *{margin:0;padding:0;List-style:None}ul{Display:Flex}Li{Flex:1;text-align:Center;Border-left:1px solid Red}li:nth-child (1){Border-left:None}    </style><ul>        <Li>Aaa</Li>        <Li>Bbb</Li>        <Li>Ccc</Li>        <Li>Ddd</Li>        <Li>Eee</Li></ul>

Everybody look carefully, this string of code is to all Li a left box a 1px red line, and then in a selector bar first Li's left line to remove! It's not very troublesome to do so, we have a much simpler way

*{margin:0;padding:0;list-style:none}ul{display:flex}li{flex:1;text-align:center;} Li:nth-child (n+2) {border-left:1px solid red}

We just need to give Li:nth-child (n+2) (second and later Li) The red line of the 1px border-left, is that clear?

When the sweetness tastes, start to re-wash and learn a CSS selector!

I divided the CSS selector into three sections, we learn in turn, the first part is that we are the basic selector; The second part is the property selector, the third part pseudo class selector!

The first part, the basic selector

1. Wildcard selector (*)

Generally everyone is using *{margin:0;padding:0} more bar, haha, the wildcard means that all elements,

For example: Demo *{color:yellow} This means that all the elements under the demo, the font is YELLOW!!

2. Element Selector

Similar to this h1{font-size:100px}//meaning that the H1 font is 100px;

3. Class Selector

This way. item{font-size:20px}/means that class= "item" has an element font size of 20px;

3-1. Class selectors can be used in conjunction with element selectors, such as

H1.item{color:red}//The elements of the H1 class named item are all red

3-2. Class selectors are used in conjunction with class selectors, such as

Item.tel{color:red}//The element font is red for both the class name item and Tel

* * If an element has a class name that does not exist, then this CSS style cannot be added

4.id Selector

The background color of the element with the #item {background:red}//id as item is red

* * Unlike the selector above, the ID selector is the only value for the page

5. Descendant Selector

P a{color:red}.//p element The A font color is red

6. Descendant Selector

p>a{color:red} All child elements of the//p element a color is red silk

* * Descendant selector and descendant selector is the difference between a descendant selector as long as the descendants can be selected, and the descendant selector must be a descendant, grandson, great-grandchild are not!

Like what

<style>. Box. Item{Color:Red;        }. Box>.item{background:Yellow}</style><Divclass= "box">    <Divclass= "BOX-SAMLL">        <Divclass= "Item">haha</Div>    </Div>    <Divclass= "Item">hehe</Div></Div>            

The effect of this piece of code is like this

Haha by this item package has color:red this property

But Hehe is possessed of color:red and Background:yellow, this is needless to say too thin, fully understand it.

7. Brother Selector +

P+.item {color:red}//The element with the class name "item" followed by P (not included by P, is an element after P)! is not a P-contained, is an element after P! is not a P-contained, is an element after P! ), have you ever felt like using this selector to force the grid full.

8. Don't panic, this is more fun Universal Brotherhood selector ~

P~.item means that all of the class names of P are the elements of item (as long as all the elements of the class named item with P under the same parent element)

9. Group Selector

This is for lazy people to use, haha (selector1,selector2,..., selectorn);

As an example,

. Frist,. Last,. Item, #tel {color:red}//means that the class name is. frist last item and all element fonts with ID tel are red

These nine kinds is the basic selector, but 6.7.8.9 this four class selector is not recognized by IE6, very embarrassing, in the IE6 below can not be recognized, very embarrassing is not, but, do not recognize the Bai, anyway, now do not have to be compatible to IE6.

Into this selector is finished, slipped, slipped!

Some things about CSS selectors the first chapter basic selector!