Maybe the selectors you always use are :#id  .class  And the label selector . But that's not enough , In order to be more handy in development , This article summarizes 30 individual CSS3 Selectors , I hope that's helpful .

1 *: Universal selector

* { margin:0; padding:0; }

* A selector is to select all the elements on the page , The purpose of the above code is to convert all the elements into margin and padding Set to 0, The most basic way to clear the browser default style .

* Selectors can also be applied to sub selectors , For example, the following code :

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

such ID by container All child tag elements of are selected , And set up border.

2 #id:id Selectors

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

id The selector is very strict and you can't reuse it . We have to be very careful when using it . You need to ask yourself : Do I have to assign a value to this element id To locate it ?

3 .class: Class selectors

.error {
color: red;

This is a class Selectors . It goes with id The difference is , It can locate multiple elements . When you want to style multiple elements, you can use class. When you want to modify a particular element, that is to use id To locate it .

4 selector1 selector2: Descendant selector

li a {
text-decoration: none;

The next generation selector is 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 position all of them a Elements , And just positioning li Label under a label ? And then you need to use Progeny The selector is .

Tips : If your selector looks like X Y Z A B.error such , Then you're wrong . Remind yourself all the time , Is it really necessary to modify so many elements .

5 tagName: tag chooser

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

If you want to locate all the tags on the page , Not through id Or is it ’class’, It's simple , Use the type selector directly .

6 selector:link  selector:visited  selector:hover  selector:active  Pseudo class selector

In general selector All for a label , The meanings of the above four pseudo class selectors are as follows :

link: Connect to the normal state .
visited: After the connection has been accessed .
hover: When the mouse is on the connection .
active: When the connection is pressed .

Not moved into a Tag Links :link
move a Tag Links :link、hover
Click on a Tag Links :link、hover、active

Click and don't move in a When tags are connected :link、visited

Click and move in a When tags are connected :link、visited、hover

Click and then click again a When tags are connected :link、visited、hover、active

This is the style of all combinations .

If there are more than one of the same styles , The latter style will override the former style , So the definition of these four pseudo classes has the requirement of order , And what you're saying is ‘lvha’ That's why .
7 selector1 + selector2 : Adjacent selector

ul + p {
color: red;
It directs the selection of the immediate successor to the specified element . The above example selects all ul The first paragraph after the label , And set their colors to red .
8 selector1 > selector2 : Child selectors

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

The difference is that the latter commander chooses its direct sub element . See the following example :

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

#container > ul I'll just pick id by ’container’ Of div Under all direct ul Elements . It won't be positioned as the first li Under the ul Elements .
For some reason , There are many performance advantages to using a child node combination selector . in fact , When in javascript Use in css This is strongly recommended at this time .

9 selector1 ~ selector2 : Brother selector

ul ~ p {
color: red;

Brother node combination selector with Adjacent selector Very similar , And then it's not that strict .ul + p The selector selects only those elements that are immediately following the specified element . And this selector , All matching elements that follow the target element are selected .

10 selector[title] : Attribute selector

a[title] {
color: green;

In the example above , Only choose to have title Attribute elements . Anchor tags that do not have this property will not be modified by this code .

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

a[href=""] {
color: #1f6053; /* nettuts green */

The code above will put href The property value is The anchor label of is set to green , Other labels are not affected .
Be careful : We put the value in double quotation marks . So in use Javascript You should also use double quotation marks when you write . If you can , Try to use standard CSS3 Selectors .

12 selector[href*=”strongme”]   : Attribute selector

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

It specifies strongme This value must appear on the anchor label href Properties of the , Whether it's still still Can be selected .
But remember it's a very broad expression . If the anchor label does not point to strongme Related sites , If you want more specific restrictions , Use it ^ and $, Represents the beginning and end of a 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 have been curious , Some sites have an outside chain icon next to the anchor label , I'm sure you've seen this before . This design will tell you clearly that you will jump to other websites .
It's easy to do with carats . It's usually used to identify the beginning of... In regular expressions . If we want to locate anchor properties href China and Israel http Label at the beginning , Then we can use code similar to the above .
Notice we didn't search http://, That's not necessary , Because it doesn't contain https://.

14 selector[href$=”.jpg”]  : Attribute selector

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

This time we use regular expressions $, Represents the end of a string . This code means to search all the image links , Or other links with .jpg At the end of the . But remember that this way of writing is not right gifs and pngs It works .

15 selector[data-*=”foo”] : Attribute selector

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

Back to the previous one , How can we select all the image types png,jpeg,’jpg’,’gif’? We can use multiple selectors . Look below :

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

But it says it hurts , And it's going to be very inefficient . Another way is to use custom properties . We can add an attribute to each anchor data-filetype Specify the type of image this link points to .

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;

This, I think, will make your little partner exclaim wonderful . Few people know this technique . This ~ Symbols can locate labels whose attribute values are space separated multi values .
Continue to use the second 15 That example , We can set up a data-info attribute , It can be used to set any space separated value we need . In this example, we will indicate that they are external links and image links .

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

After setting this flag to these elements , We can use ~ To locate these labels .

/* 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 above pseudo class writing method can locate the selected single box and multiple box , It's that simple .

18 selector:after : Pseudo class selector
before and after These two pseudo classes . It's like every day you find creative ways to use them . They generate something around the selected tag .
When using .clear-fix 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 will fill in a blank space after the target tag , And then remove it . You have to put it in your cornucopia . Especially when overflow:hidden When the method doesn't work , That's what works .
according to CSS3 The standard stipulates , You can use two colons ::. And then for compatibility , Browsers also accept a colon . In fact, in this case , It's wise to use a colon .

19 selector:hover  : Pseudo class selector

div:hover {
background: #e3e3e3;

Needless to say , You must know it . It's official user action pseudo class. It sounds a little confused , Actually, it's OK . If you want to paint some color on the place where the user's mouse floats over , So this pseudo class writing method can do .
Be careful : The old version of IE It's just going to be added to the anchor a On the label :hover Pseudo classes work .
We usually use it when we add the bottom border when the mouse floats over the anchor link .

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

Expert tips :border-bottom:1px solid black; Than text-decoration:underline; It's a lot to look at .

20 selector1:not(selector2) : Pseudo class selector

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

Take the opposite Pseudo classes are quite useful , Suppose we're going to divide id by container All but div The labels are all selected . Then the above code can do it .

Or I want to select all the tags except the paragraph tags

:not(p) {
color: green;

21 selector::pseudoElement  : Pseudo class selector

p::first-line {
font-weight: bold;

We can use :: To select part of a label , Like the first paragraph , Or the first word . But remember that it has to be used on block tags to work .

The pseudo tag is made up of two colons :: Composed of .

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 designated as the first word of each paragraph .

It is usually used to highlight the content of some newspapers .

Locate the first line of a paragraph

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

Follow ::first-line be similar , The first line of the paragraph is selected .

For compatibility , Previous versions of browsers were also compatible with the single colon notation , for example :first-line,:first-letter,:before,:after. But this compatibility doesn't work with the newly introduced features .

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

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

Remember the time when we had no place to start when we were faced with how to get the first few elements of a stacked label , With nth-child Those days are gone forever .

Please note that nth-child Accept a shaping parameter , And then it's not from 0 At the beginning . If you want to get the second element, then the value you pass is li:nth-child(2).

We can even get several sub tags defined by variable names . For example, we can use li:nth-child(4n) Go every other day 3 One element gets a label .

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

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

Suppose you're in a ul There are tags in the tag. N Many elements , And you just want to get the last three elements , Even so li:nth-child(397), You can use it. nth-last-child Pseudo class to replace it .

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

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

Only a short while ago , We don't want to choose child nodes , You want to choose according to the type of element .

Imagine having 5 individual ul label . If you just want to decorate the third one , And you don't want to use id attribute , Then you can use nth-of-type(n) Pseudo class , The code above , There's only a third ul The label will be framed .

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

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

Again , It can be used in a similar way nth-last-of-type To get tags in reverse order .

26 selector:first-child : Pseudo class selector

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

This structural pseudo class can select the first sub tag , You will often use it to remove the first and last border .

Suppose there is a list , Each label has a top and bottom border , So the effect is that the first one and the last one will look a little strange . At this time, you can use this pseudo class to deal with this situation .

27 selector:last-child : Pseudo class selector

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

Follow first-child contrary ,last-child Take the last label of the parent label .
for example

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

There's nothing here , It's just one 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 code above will set the background color , Remove browser default inner margin , For each li Set borders to highlight a certain depth .

28 selector:only-child : Pseudo class selector

div p:only-child {
color: red;

Tell the truth , You'll find that you rarely use this pseudo class . However , It's quite useful , You don't know when you'll use it .

It allows you to get the child tag under the parent tag that has only one child tag . Like the code above , With only one paragraph label div It's colored .

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

In the example above , the second div Will not be selected . Once the first one div There are several subparagraphs , Then this doesn't work anymore .

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

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

Structural pseudo classes are smart to use . It will locate only one target of the same sub tag under a tag . Imagine you want to get a single child tag ul Label under li What about the label ?

Use ul li Will pick all li label . It's time to use only-of-type 了 .

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

Finally remember : Use something like jQuery While waiting for tools , Try to use native CSS3 Selectors . It might make your code run fast . So the selector engine can use the browser native parser , Not your own .
If there are other students to nth-of-type And nth-child My understanding is still unclear , You can move to In depth understanding of css3 in nth-child and nth-of-type The difference between This article .

summary 30 individual CSS More about selectors

  1. 30 class css Selectors

    As you probably know id,class as well as descendant Selectors , And they're used as a whole , So you're making the mistake of having a more flexible choice . Most of the selectors mentioned in this article are in CSS3 Under standard , So they can only be in phase ...

  2. this 30 class CSS Selectors , You have to understand !

    CSS Selector is a mode , Used to select elements to add styles to . The most commonly used and the simplest is #id..class And tag selector , stay CSS There are many more powerful and flexible options , Especially in CSS3 in , Added ...

  3. What the front end must master 30 individual CSS Selectors

    Maybe you've learned CSS Three simple common selectors for :#ID,.class, tag chooser , But is that enough ? With CSS3 The arrival of the , As a front-end developer, you need to master the following 30 basic selectors , Only in this way can we use our hands and hearts in the normal development . ...

  4. What must be remembered 30 class CSS Selectors

    You may know that `id`,`class` as well as `descendant` Selectors , And they're used as a whole , So you're making the mistake of having a more flexible choice . Most of the selectors mentioned in this article are in CSS3 Under standard , therefore ...

  5. What you need to know 30 individual CSS Selectors &#187;

    You may have mastered id.class. Background selector these basic css Selectors . But this is far from css All . The following system analysis to you css in 30 The most commonly used selectors , Including our biggest browser compatibility problem . Master them , To really get ...

  6. Front end page design common 30 individual CSS Selectors

    1. *   -->   Wildcard selector * { margin: 0; padding: 0; } The asterisk selects each element of the page . Many developers use it to put all margin and padding Zeroing . It's a quick test, of course ...

  7. Just read this one ,css It's a collection of knowledge

    It's familiar to most technicians CSS Selectors , For example , Suppose you give a p Tag adds a class (class), But after the execution, we should class Some of the attributes in don't work . adopt Firebug see , It is found that the properties that do not work are overridden , ...

  8. 30 One of the most commonly used css Selector parsing (zz)

    You may have mastered id.class. Background selector these basic css Selectors . But this is far from css All . The following system analysis to you css in 30 The most commonly used selectors , Including our biggest browser compatibility problem . Master them , To really get ...

  9. 30 One of the most commonly used css Selector parsing

    from : You may have mastered id.class. Background selector these basic css Selectors . But it's far away ...

Random recommendation

  1. SpringMVC Study

    1, Yes SpringMVC The understanding of the a, be based on MVC Design concept of b, Adopt loosely coupled pluggable component structure , More than any other MVC The framework is more extensible and flexible c, Support REST Style URL request d, The framework revolves around DispatcherSer ...

  2. CSS Reset the article

    CSS reset

  3. System.OutOfMemoryException: Out of memory .( turn )

    It's mainly encountered when the website generates watermark image Original address : Debugging today Program ...

  4. Server installation Linux Should pay attention to the problem

    Installation mode : 1. CD installation 2. Ruijie guides the installation 3.u Disk installation 4. Hard disk installation 5.IPMI Remote installation among , Ruijie is the most convenient way , The driver will be installed directly , But Ruijie supports Linux There are only two systems , Limited : CD and ...

  5. selenium+eclipse+python Environmental Science

    1. Download and install jdk, Configure environment variables : 2. Download and install python, To configure path System environment variable :D:\Program Files\python34: 3. install selenium, After installation python route D ...

  6. Android Special effects Five kinds Toast Specific explanation

    Toast yes Android A mechanism for displaying information in , and Dialog The difference is ,Toast There is no focus , also Toast The display time is limited , After a certain period of time, they will take the initiative to disappear . 1. Default effect : Code : Toas ...

  7. Android N and O Use in adb shell dpm set-device-owner &#39;; setup Device Owner Failure

    PC The end appears as follows log: D:\workspace\AndroidO\CTS\CTS_Verifier>adb shell dpm set-device-owner ' ...

  8. 5.QT-QString class

    Qt String class in Introduce use Unicode code   Using implicit sharing technology , Save memory and unnecessary data copies Implicit sharing is between shallow copy and deep copy , When two string Object assignment , Will achieve shallow copy ( Share a piece of memory ), If an object ...

  9. Postgres——pgadmin Copy single table without primary key to local database

    There is a single table without primary key in the database gongan_address_all , You need to export the data of Yuhang District to another table , Because the amount of data is too large ,sql Sentence efficiency is too poor . adopt sql Statement to query the data of Yuhang District , And export to csv,sql Equiform , Reintroduction ...

  10. An operation ------ Bitwise AND 、 Press bit or 、 Bitwise XOR 、 Take the opposite 、&lt;&lt;、&gt;&gt;、&gt;&gt;&gt;

    All the numbers in the program are stored in the computer memory in binary form , Bit operation is to operate the binary bit of integer in memory directly . Knowledge point : 1. Original code . Inverse code . Complement code ( With byte Of 1.-1 give an example ) Example                 ...