Parsing of CSS selectors commonly used in front-end development (I.)

You may have mastered the basic CSS selectors for the ID, class, background selector. But this is far from the whole of CSS. The following is a systematic introduction of CSS in the most commonly used selectors, including our most headache browser compatibility issues. Mastering them, you can really appreciate the great flexibility of CSS.

1.*

* {    margin: 0;    padding: 0;}

The star selector will work on every element on the page. Web designers often use it to set the margin and padding of all elements in a page to 0. * Selectors can also be used in sub-selectors.

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

The code above applies to all child elements with an ID of container element. Unless necessary, I don't recommend using a star-shaped selector in a page because his scope is too large to consume the browser resources.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

2. #X

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

#号作用域有相应id的元素. ID is one of our most commonly used CSS selectors. The advantage of the ID selector is precision, high priority (the priority base is 100, much higher than the class 10), as the best choice for JavaScript script hooks, the same drawback is obviously too high priority, reusability is poor, so before using the ID selector, we'd better ask ourselves, Really to the point where the ID selector is not used?

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

3.. X

.error {    color: red;}

This is a class (class) selector. The difference between the class selector and the ID selector is that the class selector can be used for a set of elements that are expected to be styled.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

4. X Y

li a {    text-decoration: none;}

This is also one of our most commonly used selectors-descendant selectors. To select the element y of the x element, the point to note is that this way the selector will select all the matching sub-elements below, ignoring the hierarchy, so some cases are not suitable for use, such as the above code to remove all the A under Li's underline, but Li also has a UL, I do not want to ul Li's a minus underline. When using this descendant selector, consider whether you want a style to work for all descendant elements. This descendant selector also has the effect of creating a similar namespace. For example, the scope of the above code style is obviously li.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

5. X

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

Tag Selector. Use the Tag Selector to act on all corresponding labels within the scope range. The priority level is only higher than *.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

6. X:visited and X:link

a:link {    color: red;}a:visited {    color: purple;}

Use: Link pseudo-class acts on a linked label that has not been clicked. : The hover pseudo-class acts on a clicked link.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

7. X+y

ul + p {    color: red;}

Adjacent selectors, the above code will match the first p after UL, the text color within the paragraph is set to red. (matches only the first element)

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

8. X>y

div#container > ul {    border: 1px solid black;}<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>    

The child selector. Unlike the descendant selector X y, the sub-selector works only on the direct child y under X. In the above CSS and HTML examples, Div#container>ul only works on the most recent level of UL in container. Theoretically x > y is worth advocating the selector, but IE6 does not support it.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

9. X ~ Y

ul ~ p {    color: red;}

The adjacent selector, unlike the x+y mentioned earlier, x~y matches all y elements of the same level as X, and x+y only matches the first one. Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

Ten. X[title]

a[title] {    color: green;}

The property selector. For example, the above code matches a LINK element with the title attribute.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[title= "FOO"]

a[href="http://58img.com"] {    color: #1f6053;}

The property selector. The above code matches all links that have the href attribute and href is http://58img.com.

This is a good function, but it is somewhat limited. What if we want to match all the links in the href containing 58img.com? Look at the next selector.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[href^= "HTTP"]

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

The property selector. The above code matches all the links in the href that begin with HTTP.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[href$= ". JPG "]

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

The property selector. Use $ in the property selector to match an element that ends with a specific string. In the above code, all links to a. jpg image are linked. (Note that this is just a. jpg image, if you want to do all the picture links what to do, look at the next selector.) ）

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[data-*= "Foo"]

Mentions how to match all the picture links in the previous selector. If you use the x[href$= ". jpg"] implementation, you need to do this:

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

It looks more troublesome. Another solution is to add a specific attribute to all the image links, such as ' Data-file '

HTML code

The CSS code is as follows:

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

This way all links to the picture have a red color for the link font.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[foo~= "Bar"]

The property selector. The wavy line symbol in the property selector allows us to match one of the multiple values in the property value separated by a space. Look at the following example:

HTML code

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

CSS Code

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

In the example above, the font color of the match Data-info attribute containing the "external" link is red. Matches the link in the Data-info property that contains "image" to set the black border.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X:checked.

The checked pseudo-class is used to match interface elements in the selected state, such as radio, checkbox.

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

The above code matches all selected radio, setting the black border of 1px.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

Parsing of CSS selectors commonly used in front-end development (I.)