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 .
Click on a Tag Links ：link、hover、active
ul + p {
color: red;
}
ul The first paragraph after the label , And set their colors to red .
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">
<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 > 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 .
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 .
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="http://strongme.cn"] {
color: #1f6053; /* nettuts green */
}
The code above will put href The property value is http://strongme.cn 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 strongme.cn still strongme.com still www.strongme.cn 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$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
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;
font-size:1.2em;
}
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
label
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
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>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
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
- 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 ...
- 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 ...
- 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 . ...
- 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 ...
- What you need to know 30 individual CSS Selectors »
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 ...
- 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 ...
- 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 , ...
- 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 ...
- 30 One of the most commonly used css Selector parsing
from :http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html You may have mastered id.class. Background selector these basic css Selectors . But it's far away ...
Random recommendation
- 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 ...
- CSS Reset the article
CSS reset http://blog.bingo929.com/css-reset-collection.html
- System.OutOfMemoryException: Out of memory .（ turn ）
It's mainly encountered when the website generates watermark image Original address :http://www.cnblogs.com/longgel/archive/2010/03/24/1693776.html Debugging today asp.net Program ...
- 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 ...
- 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 ...
- 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 ...
- Android N and O Use in adb shell dpm set-device-owner 'com.android.cts.verifier/com.android.cts.verifier.managedprovisioning.DeviceAdminTestReceiver' setup Device Owner Failure
PC The end appears as follows log: D:\workspace\AndroidO\CTS\CTS_Verifier>adb shell dpm set-device-owner 'com.android.ct ...
- 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 ...
- 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 ...
- An operation ------ Bitwise AND 、 Press bit or 、 Bitwise XOR 、 Take the opposite 、<<、>>、>>>
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 ...