Application of 30 CSS3 selectors

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 development, this paper summarizes 30 CSS3 selected

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

More Highlights: http://www.icketang.com/

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;}

idThe selector is very strict and you can't 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. It id differs from selectors in that it can locate multiple elements. You can use it when you want to make a style decoration on multiple elements class . When you want to decorate a particular element, it is used id to locate it.

4 Selector1 Selector2: descendant Selector

Li a {  text-decoration:none;}

The descendant selector is the 比较常用的 selector. If you want to be more specific about positioning elements, you can use it. For example, if you don't need to locate all of the a elements, you just need to locate li the label under the label a ? At this point you need to use 后代 selectors.
Tip: If you have a selector like X Y Z A B.error this, 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 through 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 moves to the 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 example above is the selection of all ulThe first paragraph after the label and set their color to red. 8 Selector1 > Selector2: Sub-selector

Div#container > UL {  border:1px solid black;}

It differs from the direct sub-element that the following command chooses it. Look at 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 id div all direct elements under ' container ' are selected ul . It does not navigate to elements such as the first one li ul .
For some reasons, using a sub-node combination selector can have many advantages over performance. In fact, css this is strongly recommended when using selectors in JavaScript.

9 Selector1 ~ selector2: Brother Selector

UL ~ p {  color:red;}

The sibling Combo selector 相邻选择器 is very similar, and then it's 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 href http://strongme.cn set the anchor label for the attribute value 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;}

Specifies that the strongme value must appear in the properties of the anchor label href , whether or not it is strongme.cn strongme.com www.strongme.cn selected.
But remember this is a very broad way of expression. If the anchor label is pointing to a strongme site that is not related, if you want more specific restrictions, then use ^ and $ , respectively, the start and end of the string.

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 href http the tag at the beginning of the anchor attribute, 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 a regular expression $ to represent the end of the string. The meaning of this code is to search all the image links, or other links to .jpg the end. But remember that this writing is not right gifs and pngs works.

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 to data-filetype Specify the type of picture the 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. This ~ symbol can be used to locate a label whose property 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 them ~ to locate the tags.

/* Target Data-info attr that contains the value "external" */a[data-info~= "external"] {   color:red;}/* and which con Tain 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
beforeAnd after these two pseudo-classes. It seems that everyone can find creative ways to use them every day. They will generate some content around the selected tag.
.clear-fixMany properties are used for the first time when using tricks.

. 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. This is especially useful when overflow:hidden the method is not working.
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

div:hover {  background: #e3e3e3;}

Needless to say, everyone must know it. The official saying is 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 pseudo-classes that are added to the anchor a tag :hover .
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

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

取反Pseudo-classes are quite useful, assuming we want to id container Select all the tags except for div . 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;}

::first-linesimilar, the first line of the paragraph is selected
For compatibility, previous versions of the browser would also be 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 nowhere to start, and nth-child that day was gone.
Note that you nth-child accept a shaping parameter, and then it is not starting with 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) every 3 elements to get a label once.

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

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

Suppose you ul have n-many elements in a tag, and you just want to get the last three elements, even so li:nth-child(397) you can nth-last-child replace it with pseudo-classes.

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 tabs. If you only want to modify the third one, and you do not want to use id attributes, you can use pseudo- nth-of-type(n) 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 similar 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;}

first-childinstead, the last-child last label of the parent tag is taken.
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-botto M:1PX solid black; border-top:1px solid #3c3c3c;}

The above code sets the background color, removes the default padding for the browser, and li sets the border for each to highlight a certain depth.

Selector:only-child: Pseudo class Selector

Div 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 tag is div colored.

<div><p> My paragraph here. P>div><div>   <p> paragraphs total. p>   <p> Both paragraphs total. p>div>

In the example above, the second one div will not be selected. Once the first one div has multiple sub-paragraphs, 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 that you want to get an LI tag under a label that has only one child tag ul ?
ul liall labels are selected using li . It will be used at only-of-type this time.

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's own



More Highlights: http://www.icketang.com/

Application of 30 CSS3 selectors