Css selector summary, css Selector

Css selector summary, css Selector

I am a little busy recently, so I didn't post a blog post. Now I am idle. I have to sort out my knowledge. Today I will summarize some selectors in css.

There are many selectors in css. I will write the ones I have learned below. If there are incomplete or incorrect ones, please leave a correct message. Thank you very much.

I. Selector

1. * wildcard Selector

This selector matches all elements on the page and is generally used to clear the default style of the browser.

*{margin:0; padding:0}

2. Element Selector

Use the tag name to select an element.

div{width:100px; height:100px;}

3. class selector

Class selector/use the class attribute to name the element. It can appear many times on the page, which is equivalent to the name of a person.

.box{width:100px; height:100px;}<div class="box"></div><p class="box"></p>

4. id Selector

It is named by the id attribute and can only appear once on the page. It is unique and has the highest weight, which is equivalent to a person's id card.

#box{width:100px; height:100px;}<div id="box"></div>

Ii. Advanced selector 1

1. e f descendant Selector

All F elements (including child and Sun) under the Eelement are matched and separated by spaces.

Div ul li {width: 100px; height: 100px ;}
// Match all ul values under the div, and all descendants of ul, li <div> <ul> <li> </ul> </div>

2. E, F Multi-Element Selector

Both the Eelement and F element are matched and separated by commas.

Div, # box {width: 100px; height: 100px; background: #000 ;} // match the div tag and the p tag with the id box in the following text. <div> </div> <p id = "box"> </p>

3. E> F child element Selector

Select the direct child F of the E element and select only the child.

ul>li{width:100px; height:100px;}

<ul>
　　<li>
 　</li>
</ul>

4. E + F (adjacent selector) adjacent sibling Selector

The peer element F next to the Eelement has the same parent level as the adjacent sibling selector.

　　

Div +. box {width: 100px; height: 100px; background: pink ;} // only the p element in the second row below can be selected. The last one does not meet the condition following the div element <div> </div> <p class = "box"> </p> <p class = "box"> </p> <div> </div> <p> </p> <p class = "box"> </p>

　　　

Div p + p {width: 100px; height: 100px; margin-top: 2px; background: pink ;} // You can select all the following elements except the first p element. <Div> <p> </div>

3. Advanced selector 2 attribute Selector

1. E [attr] matches the Eelement with the attr attribute

Div [title] {width: 100px; height: 100px; margin-top: 2px; background: pink ;} // match the first and third div elements below because they contain the title attribute <div title = "width"> </div> <div title = "height"> </div>

2. E [attr = val]

Match the Eelement with the attr attribute and the value is only val (note that the attribute value must be enclosed by quotation marks. I tried it myself and it seems that no parentheses are needed .)

Div [title = "height"] {width: 100px; height: 100px; margin-top: 2px; background: pink;
} // Match the third div element <div title = "width"> </div> <div title = "height"> </ div>

3. E [attr ~ = Val]

An Eelement that matches a property value of attr and contains this value. It is used to select an element whose property value contains the specified word.

Div [class ~ = "C1"] {width: 100px; height: 100px; margin-top: 2px; background: pink ;} // select the first and second div elements below <div class = "c1"> </div> <div class = "c1 c2"> </div> <div class = "c2c1"> </div>

4. E [attr | = val]

Matches all Eelements whose attributes are attr and whose values are val or start with var -.

Div [class | = "c1"] {width: 100px; height: 100px; margin-top: 2px; background: pink ;} // select the first and third elements <div class = "c1"> </div> <div class = "c1cs"> </div> <div class = "c1-c2"> </div>

5. E [attr] [attr2 = val] matches all the eElements with the attr1 attribute and the attr2 attribute, and the attr2 value is val. This is to write several attribute selectors, and both must satisfy their conditions at the same time.

Div [title = "width"] [class] {width: 100px; height: 100px; margin-top: 2px; background: pink ;} // select the first div element <div title = "width" class = "box"> </div> <div title = "width"> </div>

IV. a pseudo-class selector

1. link matches all the links that have not been clicked. a: link {color: green;} 2.: hover matches the element a: hover {color: gold ;} 3. active match: Click the unreleased Element a: active {color: blue;} 4. visited matches all the clicked links a: visited {color: red ;}

The use of hover is just a selector, which must be his descendant.

. Box {width: 100px; height: 100px; color: # fff; background: #000 ;}
. Box: hover p {color: red;} // move the cursor over the div, p font color change <div class = "box"> <p> my font </p> </div>

2. a pseudo-element Selector

1>: before in the element

Div: before {content: "before inserted element";} // insert this

<Div>
<P> This is p </p>
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>

2>: after inserts content behind the element and inserts it to the end of the last child element.

div:after{content:"";}<div></div>

　

Selector added by css3

V. Association Selector

E1 ~ E2 (select brother E2 after E1)

Div ~ P {width: 100px; height: 100px; margin-top: 2px; background: #000 ;} // select <div> </div> <p> </p>

6. New attribute Selector

1. [attr ^ = "..."] elements starting...

Div [class ^ = "de"] {width: 100px; height: 100px; margin-top: 2px; background: #000 ;} // select the first three div elements <div class = "de1"> </div> <div class = "de"> </div> <div class = "dedkjsfkld"> </div> <div class = "1fde"> </div>

2. [attr $ = "..."] elements ending...

Div [class $ = "de"] {width: 100px; height: 100px; margin-top: 2px; background: #000 ;} // select the first three <div class = "de1de"> </div> <div class = "de"> </div> <div class = "dedkjsfklde"> </div> <div class = "1f"> </div>

3. [attr * = ""] select the element containing the value

Div [class * = "de"] {width: 100px; height: 100px; margin-top: 2px; background: #000 ;} // select 1 2 and 4 below and all contain the de letter <div class = "de1de"> </div> <div class = "de"> </div> <div class = "dld"> </div> <div class = "1def"> </div>

7. p is used as an example for the selector added to the pseudo class. The same applies to others.

The following is an example. If you want to experiment with others, you can use this example.

Here, of is to select p from the p element.

1.: first-of-type

P: first-of-type {width: 100px; height: 100px; background: #000 ;} // The first <div> <p> </ p> </div>

2.: last-of-type

P: last-of-type the last of all p elements under the parent level

3. only-of-type

P: only-of-type has only one p element under the parent level. Other elements cannot be p. If there are other elements, no p element is selected.

4.: nth-of-type

P: nth-child (n) Select the nth p in the parent Element

5.: nth-last-of-type (n)

Select p. The last n p elements in the parent Element

 

Which of the following is not selected in the sub-element?

6.: only-child

P: select p for only-child, and p must be the only child element of their parent.

　　

P: only-child {width: 100px; height: 100px; background: #000 ;}
// Select only p <div> <p> </p> <span> </span> </div> <p> </div>

7.: last-child

P: select p for last-child. p must be the last child element of the parent level.

8. nth-child (n)

P: nth-child (n) the nth element of the parent element, called the p element.

9 nth-last-child (n)

P: nth-last-child (n) select p, that is, the last n elements of the parent level, p.

 

There is no pattern behind the pseudo classes. Don't worry, one by one.

For example, do not think that the content in the brackets is fixed.

1.: not (. c1) selects the class except for the content in the p brackets of c1, such as id.

P: not (. c1) {width: 100px; height: 100px; margin-top: 2px; background: #000;
} // Among the following elements, except the p element whose first class is c1, are all selected. <Div> <p class = "c1"> </p> <p class = "c2"> </p> <p id = "box"> </p> <p> </div>

2.: empty selects the required element with the inverted label content being empty.

P: empty {width: 100px; height: 100px; margin-top: 2px; background: #000 ;}// select the second p element below, because he has no content <div> <p> 11 </p> <p> 11 </p> <p> 11 </p> <p> 1 </p> </div>

3. p: target: Select reverse current activated by the anchor.

P: target {width: 100px; height: 100px; margin-top: 2px; color: # fff; background: #000 ;}// click the content of, the p tag style is selected and activated. <a href = "# a1"> click me </a> <div> </div> <p id = "a1"> p tag content </p>

4.: What is the meaning of p selected by the user in selection? Let's take a look at the following results:

p::selection{    width:100px;    height: 100px;    margin-top: 2px;    color:#fff;    background: #000;}    <p>111</p>    <p>222</p>    <p>333</p>    <p>444</p>    <p>555</p>

　　

5. input: disable

Select an input box that cannot be operated

6. input: enable

Select the input box that can be operated by cao

Input: enabled {background: yellow;} input: disabled {background: red;} // generally, all content that can be written can be operated, <input type = "text" value = ""> <input type = "text" value = ""> <input type = "text"> <input type = "text"> <input type =" text "disabled =" diabled ">

7. input: checked

Select the selected input, which is generally used for js

 

Input: checked {width: 40px; height: 40px;} // The box is checked, <input type = "checkbox" checked = "" value = "> football <input type =" checkbox "value =" "> basketball

I have shared all my knowledge with you. If you have any questions, please leave a message to correct them. If you have learned this article, I will be very happy.