Summarize 30 CSS3 selectors and 30CSS3 selectors.

Summarize 30 CSS3 selectors and 30CSS3 selectors.

You may always use the following selectors: # id. class and tag selector. However, this is far from enough. In order to be more comfortable in development, This article summarizes 30 CSS3 selectors, hoping to help you.

1 *: General Selector

* {   margin:0;   padding:0;  }

* The selector Selects all elements on the page. The code above sets the margin and padding values of all elements to 0. It is the most basic method to clear the default browser style.
* The selector can also be applied to the sub-selector, for example, the following code:

#container * {   border:1px solid black;  }

In this way, all sub-tag elements whose ID is container are selected and border is set.

2 # id: id Selector

#container {   width: 960px;   margin: auto;}

idThe selector is very strict and you cannot reuse it. You should be very careful when using it. Ask yourself: Do I have to assign an id to this element to locate it?

3. class: class selector

.error {  color: red;}

This isclassSelector. It followsidThe selector can locate multiple elements. You can useclass. When you want to modify a specific element, you can useidTo locate it.

4 selector1 selector2: descendant Selector

li a {  text-decoration: none;}

Descendant selector isCommonly usedSelector. If you want to locate an element more specifically, you can use it. For example, if you do not need to locate allaElement, but only need to locateliUnder the tagaTag? In this case, you need to useDescendantSelector.
Tip: If your selector is likeX Y Z A B.errorIn this way, you are wrong. Always remind yourself whether so many elements need to be modified.

5 tagName: Tag Selector

a { color: red; }ul { margin-left: 0; }

If you want to locate all the tags on the pageidOr 'class'. This is simple. You can directly use the type selector.

6 selector:Link selector: visited selector: hover selector: active pseudo-class selector

Generally, the selector is a tag. the preceding four pseudo-class selectors mean the following:

Link: the normal connection status.
Visited: after the connection is accessed.
Hover: place the cursor over the connection.
Active: when the connection is pressed.

When the link is not moved to the tag link: link, hover
Link, hover, and active
Link, visited
After clicking the button, move the link, visited, and hover to connect to the tag.
Click the link, visited, hover, and active
This is the style of all combinations.
If there are multiple identical styles, the subsequent styles will overwrite the previous styles. Therefore, the definition of these four pseudo classes requires order, this is why we call 'lvha. 7 selector1 + selector2: adjacent Selector

ul + p {   color: red;}

It only selects the direct successor element of the specified element. The above example Selects all ulThe first segment after the tag, and set their colors to red. 8 selector1> selector2: Sub-Selector

div#container > ul {  border: 1px solid black;}

It differs from the direct sub-element selected by the subsequent command. See the following example.

<div id="container">   <ul>      <li> List Item        <ul>           <li> Child </li>        </ul>      </li>      <li> List Item </li>      <li> List Item </li>      <li> List Item </li>   </ul></div>

#container > ulOnly selectedidFor 'Container'divAll directulElement. It won't be positioned as the firstliUnderulElement.
For some reason, using the child node combination selector has many advantages in performance. In fact, when usingcssWe strongly recommend that you do this when using selector.

9 selector1 ~ Selector2: sibling Selector

ul ~ p {  color: red;}

Sibling node combination selector andAdjacent SelectorVery similar, and then it is not so strict.ul + pThe selector selects only those elements next to the specified element. This selector Selects all matching elements following the target element.

10 selector [title]: attribute selector

a[title] {  color: green;}

In the preceding example, only the elements with the title attribute are selected. The anchor labels without this attribute will not be modified by this Code.

11 selector [href = "foo"]: attribute selector

a[href="http://strongme.cn"] {  color: #1f6053; /* nettuts green */}

The above code willhrefThe property value ishttp://strongme.cnBut other labels are not affected.
Note: We enclose the value in double quotation marks. When using Javascript, use double quotation marks. If possible, try to use the standard CSS3 selector.

12 selector [href * = "strongme"]: attribute selector

a[href*="strongme"] {  color: #1f6053;}

SpecifiedstrongmeThis value must appear inhrefAttribute, whether it isstrongme.cnOrstrongme.comOrwww.strongme.cnCan be selected.
But remember that this is a very broad expression. If the anchor tag is notstrongmeFor more specific restrictions on related sites, use^And$, Indicating the start and end of the string respectively.

13 selector [href ^ = "href"]: attribute selector

a[href^="http"] {   background: url(path/to/external/icon.png) no-repeat;   padding-left: 10px;}

You must be curious. Some sites have an external link icon next to the anchor tag. I believe you have seen this situation. This design clearly tells you that you will jump to another website.
You can easily use the carat symbol. It usually starts with an identifier in a regular expression. If you want to locate the anchor attributehrefTohttpThen we can use code similar to the above.
Note that we didn't search for http: //, which is unnecessary because it does not contain https ://.

14 selector[href000000000000.jpg "]: attribute Selector

a[href$=".jpg"] {  color: red;}

This time, we use a regular expression.$, Indicating the end of the string. This code is used to search for all the image links, or.jpg. But remember that this method is not correctgifsAndpngsIt works.

15 selector [data-* = "foo"]: attribute selector

a[data-filetype="image"] {   color: red;}

Back to the previous article, how do we select all the image types?png,jpeg, 'Jpg ', 'gif '? We can use multiple selectors. See the following:

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {   color: red;}

However, it is very easy to write, and the efficiency will be very low. Another way is to use custom attributes. We can add attributes to each anchor.data-filetypeSpecifies the image type that the link points.

a[data-filetype="image"] {   color: red;}

16 selector [foo ~ = "Bar"]: attribute Selector

a[data-info~="external"] {   color: red;} a[data-info~="image"] {   border: 1px solid black;}

I think this will surprise your friends. Few people know this technique. This~A symbol can be used to locate tags whose property values are separated by spaces.
To continue using the 15th example, we can setdata-infoAttribute, which can be used to set any space-separated values. In this example, we will indicate that they are external connections and image links.

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

After this flag is set for these elements, we can use~To locate these tags.

/* Target data-info attr that contains the value "external" */a[data-info~="external"] {   color: red;} /* And which contain the value "image" */a[data-info~="image"] {  border: 1px solid black;}

17 selector: checked: pseudo class selector

input[type=radio]:checked {   border: 1px solid black;}

The preceding pseudo-class writing method can locate the selected single-choice and multi-choice boxes, which is so simple.

18 selector: after: pseudo class selector
beforeAndafterThese two pseudo classes. It seems that every day everyone can find creative ways to use them. They will generate some content around the selected tag.
When using.clear-fixIn tips, many attributes are used for the first time.

.clearfix:after {    content: "";    display: block;    clear: both;    visibility: hidden;    font-size: 0;    height: 0;  } .clearfix {    *display: inline-block;    _height: 1%;}

The above Code fills in a blank section after the target tag, and then clears it. You must put this method in your cornucopia. Especially whenoverflow:hiddenThis is especially useful when the method is not used.
According to CSS3 standard, two colons can be used::. Then, for compatibility, the browser will accept a colon. In fact, it is wise to use a colon in this case.

19 selector: hover: pseudo class selector

div:hover {  background: #e3e3e3;}

Needless to say, everyone must know about it. The official statement is:user action pseudo class. It sounds a bit confused. Actually, it's okay. If you want to paint some color in the place where the user's mouse is floating, you can do this pseudo-class writing method.
Note: The earlier version of IE will only be added to the anchor.aTag:hoverThe pseudo class works.
It is usually used when you move the mouse over the anchor link and add the border.

a:hover { border-bottom: 1px solid black;}

Expert tip: border-bottom: 1px solid black; much better than text-decoration: underline.

20 selector1: not (selector2): pseudo class selector

div:not(#container) {   color: blue;}

InvertPseudo classes are quite useful. Suppose we want to divideidIscontainerAlldivAll labels are selected. Then the code above can be done.
Or I want to select all labels other than the paragraph label.

:not(p) {  color: green;}

21 selector: pseudo-class selector

p::first-line {  font-weight: bold;  font-size:1.2em;}

We can use::To select part of a tag, such as the first paragraph or the first word. But remember to use it on block labels.
A pseudo tag consists of two colons:
Locate the first word:

p::first-letter {   float: left;   font-size: 2em;   font-weight: bold;   font-family: cursive;   padding-right: 2px;}

The above code finds all sections on the page and specifies the first word of each section.

It is usually used in important news and newspapers.

Locate the first line of a segment

p::first-line {   font-weight: bold;   font-size: 1.2em;}

And::first-lineSimilarly, the first line of the paragraph is selected.
For compatibility, earlier versions of browsers are also compatible with single-colon writing, such:first-line,:first-letter,:before,:afterBut this compatibility does not work for the new features.

22 selector: nth-child (n): pseudo class selector

li:nth-child(3) {   color: red;}

Do you still remember the time when we had nowhere to get the first elements of stacked labels?nth-childThat day will be gone forever.
Note:nth-childAccept an integer parameter, and it does not start from 0. If you want to obtain the second element, the value you pass isli:nth-child(2).
We can even obtain the number of sub-tags defined by the variable name. For example, we can useli:nth-child(4n)Obtain the tag once every three elements.

23 selector: nth-last-child (n): pseudo class selector

li:nth-last-child(2) {   color: red;}

Assume that you areulTags have N more elements, and you only want to obtain the last three elements, or evenli:nth-child(397)You can usenth-last-childThe pseudo class replaces it.

24 selectorX: nth-of-type (n): pseudo class selector

ul:nth-of-type(3) {   border: 1px solid black;}

Once upon a time, we did not want to select a subnode, but wanted to select it based on the element type.
Imagine there are fiveulLabel. If you only want to modify the third one, and you do not want to useidAttribute, then you can usenth-of-type(n)The above code is only implemented by a third pseudo class.ulThe tag is set with a border.

25 selector: nth-last-of-type (n): pseudo class selector

ul:nth-last-of-type(3) {   border: 1px solid black;}

Similarly, it can be used in a similar way.nth-last-of-typeTo obtain tags in reverse order.

26 selector: first-child: pseudo class selector

ul li:first-child {   border-top: none;}

This structured pseudo class can be selected as the first sub-label, and you will often use it to retrieve the first and last border.
If there is a list and each label has an upper and lower border, the effect is that the first and last labels will look a little strange. This pseudo class can be used to handle this situation.

27 selector: last-child: pseudo class selector

ul > li:last-child {   color: green;}

Andfirst-childOn the contrary,last-childThe last tag of the parent tag is used.
For example
Tag

<ul>   <li> List Item </li>   <li> List Item </li>   <li> List Item </li></ul>

There is no content here, it is a List.

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;} li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

The above Code sets the background color to remove the default padding of the browser, for eachliSet borders to highlight depth.

28 selector: only-child: pseudo class selector

div p:only-child {   color: red;}

To be honest, you will find that you almost never use this pseudo class. However, it is quite useful. You may not use it any day.
It allows you to obtain the child tags under the parent tags with only one child tag. Just like the code above, there is only one paragraph labeldivColor.

<div><p> My paragraph here. </p></div><div>   <p> Two paragraphs total. </p>   <p> Two paragraphs total. </p></div>

In the above example, the seconddivNot selected. Once the firstdivWith multiple sub-paragraphs, this will no longer work.

29 selector: only-of-type: pseudo class selector

li:only-of-type {   font-weight: bold;}

Structured pseudo classes can be used very intelligently. It locates only one target of the same sub-tag under a tag. Imagine you want to get a sub-tag with only one sub-tagulWhat about the li label under the label?
Useul liAllliLabel. Useonly-of-type.

ul > li:only-of-type {   font-weight: bold;

Remember: when using tools like jQuery, try to use the native CSS3 selector. It may make your code run fast. In this way, the selector engine can use the browser native parser instead of the selector's own.
If you still do not know about nth-of-type and nth-child, you can go to this article to learn more about the differences between nth-child and nth-of-type in css3.