30 x CSS3 Selector

This paper summarizes 30 CSS3 selectors, small series feel very good, and now share to everyone, but also for everyone to do a reference. Let's take a look at it with a little knitting.

Perhaps all the selectors that people usually use are: #id. class and Tag Selector. But these are not enough, in order to be more handy in the development, this article summarizes the 30 CSS3 selector, hope to be helpful to everyone.

1 *: Universal Selector

* {   margin:0;   padding:0;  }

* Selector is the selection of all elements on the page, the above code is to set all the elements of margin and padding to 0, the most basic way to clear the browser default style.

* Selectors can also be applied to sub-selectors, such as the following code:

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

All child tag elements with ID container are selected, and border is set.

2 #id: ID Selector

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

The ID selector is very strict and you have no way to reuse it. We still have to be very careful when it comes to use. Need to ask yourself: do I have to assign an ID to this element to locate it?

3. Class: Category Selector

.error {
  color: red;
}

This is a class selector. Unlike the ID selector, it can locate multiple elements. You can use class when you want to decorate multiple elements with a style. When you want to decorate a particular element, it is to use the ID to locate it.

4 Selector1 Selector2: descendant Selector

li a {
  text-decoration: none;
}

Descendant selectors are more commonly used selectors. If you want to be more specific about positioning elements, you can use it. For example, if you don't need to locate all the a elements, you just need to locate the a tag under the LI tag? Then you need to use the descendant selector.

Tip : If your selector is like x Y Z A b.error, then you're wrong. Always remind yourself if you really need to modify so many elements.

5 TagName: Tag Selector

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

If you want to locate all of the labels on the page, not by ID or ' class ', this is simple, use the type selector directly.

6 Selector:link selector:visited selector:hover selector:active pseudo class Selector

In general, selector are a-tag, the above four pseudo-class selectors represent the following meanings:

Link: Connect to the usual state.

Visited: After the connection has been accessed.

Hover: When the mouse is placed on the connection.

Active: When the connection is pressed.

When you do not move into a label link: link

When moving into a-label link: link, hover

When you click the A tag link: link, hover, active

When clicked does not move into a label connection: link, visited

When you click and move into the A-label connection: link, visited, hover

Click on the A tab to connect again: link, visited, hover, active

This is the style of all the combinations.

If you have more than one style, the following style overrides the previous style, so the definition of these four pseudo-classes is ordered, and what everyone calls ' LVHA ' is for this reason.

7 Selector1 + Selector2: adjacent selector

ul + p {
   color: red;
}

It only selects the immediate successor element of the specified element. The above example is to select the first paragraph behind all the UL tags and set their color to red.

8 Selector1 > Selector2: Sub-selector

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

It differs from the direct sub-element that the following command chooses it. Look at the following example

<p 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>
</p>

#container > UL will only select all direct UL elements under P with Id ' container '. It does not locate the UL element under the first li. For some reasons, using a sub-node combination selector can have many advantages over performance. In fact, this is strongly recommended when using CSS selectors in JavaScript.

9 Selector1 ~ selector2: Brother Selector

ul ~ p {
  color: red;
}

The sibling combo selector is similar to the adjacent selector, and then it is not so strict. The UL + P selector Selects only those elements that follow the specified element. This selector selects all matching elements that follow the target element.

Ten Selector[title]: Property Selector

a[title] {
  color: green;
}

In this example above, only the element with the title attribute is selected. Anchor labels that do not have this attribute will not be decorated with this code.

Selector[href= "foo"]: Property Selector

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

This piece of code will set the anchor label with the href attribute value http://strongme.cn to green, while the other labels are unaffected.

Note: We enclose the value in double quotation marks. Use a double quotation mark when using JavaScript. If possible, use the standard CSS3 selector as much as possible.

Selector[href*= "Strongme"]: Property Selector

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

Specified Strongme This value must appear in the href attribute of the anchor label, whether strongme.cn or strongme.com or www.strongme.cn can be selected.

But remember this is a very broad way of expression. If the anchor label is pointing to a site that is not Strongme related, use ^ and $, respectively, to indicate the start and end of the string, if you want more specific restrictions.

selector[href^= "href"]: Property Selector

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

We must have been curious, some sites will have an anchor tag next to the chain icon, I also believe you have seen this situation. Such a design will be very clear to tell you will jump to other sites.

You can do it easily with the carat symbol. It is typically used to identify the beginning of a regular expression. If we want to locate the tag in the anchor attribute href that begins with HTTP, then we can use code similar to the one above.

Note that we did not search http://, that is not necessary, because it does not contain https://.

selector[href$= ". jpg"]: Property Selector

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

This time we used the regular expression $ to represent the end of the string. The meaning of this code is to search all the image links, or the other links end in. jpg. But remember that this writing does not work for GIFs and PNGs.

Selector[data-*= "foo"]: Property Selector

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

Back to the previous section, how do we make all the picture types selected? png,jpeg, ' jpg ', ' gif '? We can use multiple selectors. See below:

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

But it says it hurts, and it's very inefficient. Another option is to use a custom attribute. We can add a property to each anchor point Data-filetype Specify the type of picture this link points to.

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

Selector[foo~= "Bar"]: Property Selector

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

This I think will make your little friend exclaim wonderful. Few people know this technique. The ~ symbol can be used to locate a label whose attribute value is a space-delimited multi-value.

Continuing with the 15th example, we can set a Data-info property that can be used to set any space-delimited value we need. This example will indicate that they are links to external connections and images.

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

After setting this flag for these elements, we can use ~ to locate the 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;
}

Selector:checked: Pseudo-Class Selector

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

The above pseudo-class can be used to locate the selected box and the multi-box, which is so simple.

Selector:after: Pseudo-class selector

Before and after both pseudo-classes. It seems that everyone can find creative ways to use them every day. They will generate some content around the selected tag.

Many properties are used for the first time when using the. Clear-fix technique.

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

The above code will fill a blank after the target label and then clear it. This method you must put in your cornucopia inside. Especially when the Overflow:hidden method does not work, this trick is particularly useful.

According to the CSS3 standard, two colons can be used::. Then for compatibility, the browser will also accept a colon notation. In fact, in this case, it is wiser to use a colon.

Selector:hover: Pseudo class Selector

p:hover {
  background: #e3e3e3;
}

Needless to say, everyone must know it. The official statement is the user action Pseudo class. It sounds a bit confusing, but it's okay. If you want to apply a bit of color in the place where the user's mouse is drifting, this pseudo-class can be done.

Note: Older versions of IE will only work on the hover pseudo-class that is added to the anchor's a tag.

It is usually used when the mouse hovers over the anchor link while adding a border.

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

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

Selector1:not (SELECTOR2): Pseudo class Selector

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

It is quite useful to take the anti-pseudo class, assuming that we want to select all P tags except the id container. So the code above can do it.

Or I want to select all the labels except the paragraph labels.

:not(p) {
  color: green;
}

Selector::p seudoelement: Pseudo class Selector

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

We can use:: To select parts of a tag, such as the first paragraph, or the first word. But remember that it must be used on a block label before it works.

A pseudo-label is made up 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 will find all the paragraphs on the page and specify the first word for each paragraph.

It is usually used in the emphasis of some journalistic content.

Position the first line of a segment

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

Follow:: First-line similar, the first line of the paragraph is selected

For compatibility, the previous version of the browser is also compatible with the single colon, for example: First-line,:first-letter,:before,:after. However, this compatibility does not work with the newly introduced features.

Selector:nth-child (n): Pseudo-Class Selector

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

Remember when we were faced with the idea of how to get the first element of a stacked label when there was no time to start, and the days of Nth-child were gone.

Note that Nth-child accepts a shaping parameter, and then it is not starting from 0. If you want to get the second element then the value you pass is Li:nth-child (2).

We can even get the number of child tags defined by the variable name. For example, we can use Li:nth-child (4n) to get a label every 3 elements.

Selector:nth-last-child (n): Pseudo class Selector

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

Suppose you have n-many elements in a UL tag, and you just want to get the last three elements, even this li:nth-child (397), you can use Nth-last-child pseudo-class to replace it.

Selectorx:nth-of-type (n): Pseudo class Selector

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

Once in a while, we didn't want to choose a child node, but we wanted to choose based on the type of element.

Imagine having 5 ul tags. If you only want to modify the third one, and you do not want to use the id attribute, then you can use the Nth-of-type (n) pseudo-class to implement, the above code, only the third UL label will be set border.

Selector:nth-last-of-type (N): Pseudo-class selector

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

Similarly, you can use Nth-last-of-type to get tags in reverse order.

Selector:first-child: Pseudo-Class Selector

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

This structural pseudo-class can be selected to the first sub-tab, and you will often use it to remove the first and last borders.

Assuming there is a list, each label has a top and bottom border, then the effect is the first and last one will look a bit strange. This pseudo-class can then be used to handle this situation.

Selector:last-child: Pseudo-Class Selector

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

Instead of First-child, Last-child takes the last label of the parent tag.

For example

Label

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

There's nothing here, it's 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, removes the default padding for the browser, and sets a border for each Li to highlight a certain depth.

Selector:only-child: Pseudo class Selector

P P:only-child {   color:red;}

To tell you the truth, you will find that you hardly ever use this pseudo-class. However, it is quite useful to say that you will use it someday.

It allows you to get to that child tag under the parent tag that has only one child tag. Just like the code above, only one paragraph label p is colored.

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

In the example above, the second p will not be selected. Once the first p has more than one sub-paragraph, that doesn't work anymore.

Selector:only-of-type: Pseudo-Class Selector

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

Structural pseudo-classes can be used very intelligently. It locates only one target of the same sub-label under a label. Imagine you want to get the Li tag under the UL tag with only one sub-label?

Use UL Li to select all the LI tags. This is the time to use Only-of-type.

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

Finally, remember: use a native CSS3 selector when using tools like jquery. It might make your code run fast. This allows the selector engine to use the browser's native parser instead of the selector itself.