Home >Web Front-end >HTML Tutorial >Magical CSS3 selector_html/css_WEB-ITnose
Magical CSS3 selector_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:591454browse
I have been involved in the garden for many years, but I have never written a blog. If I want to write some basics, let’s start with the css3 selector.
Css3 selector
Let’s first talk about why we advocate the use of selectors.
- Using selectors, you can directly bind styles to elements. It is clear at a glance which styles match which elements in the style sheet, and it is also easy to modify.
- Reduce the amount of code in style sheets.
Attribute Selector
1.[att*=val]Attribute Selector
Meaning: Representation If the attribute value of the element's attribute represented by att contains the character represented by val, then the element uses this style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id*=demo] { width: 100px; height: 100px; background-color: #000099; } </style></head><body><div id="demo"></div></body></html>
2.[att^=val ] Attribute selector
Meaning: If the attribute value of the attribute represented by att of the element starts with a string represented by val, then the element uses this style.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id^=demo] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demo1"></div></body></html> 3.[att$=val]Attribute selector
Meaning: Indicates the attribute value of the attribute represented by att of the element Ending with a string represented by val, the element uses this style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id$=o] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>
Structural pseudo-class selector
Pseudo-class selectors refer to defined selectors and cannot be named casually.
For example: a:link, a:visited, a:hover, a:active.
Pseudo element selectors refer to selectors that have been defined for elements.
- first-line pseudo-element selector
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-line { color: red; } </style></head><body> <p> hello world <br/> 你好 </p></body></html> 2.first-letter pseudo-element Selector
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-letter { color: red; } </style></head><body> <p> hello world </p> <p> 你好</p></body></html> <strong>befor伪元素选择器</strong>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:before { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html> after pseudo-element selector
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:after { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html> root selector
The root selector binds styles to the root element of the page. When using: the background of root and body elements, the display effect is different according to different conditions
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :root { background-color: #003300; } body { background-color: yellow; } </style></head><body><p>你好</p></body></html> not selector
Exclude Substructural element under the structural element so that it does not use the element
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body *:not(h1) { background-color: yellow; } </style></head><body><h1>大家好</h1><p>你好</p></body></html> empty selector
Used when the element content is empty style.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td:empty { background-color: yellow; } </style></head><body><table border="1"> <tr> <td width="100px">1</td> <td width="100px">2</td> <td width="100px"></td> </tr></table></body></html> target selector
Use the target selector to style the target element in the page
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :target { background-color:yellow; } </style></head><body><table border="1"> <a href="#text3">示例1</a> <div id="text1"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text2"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text3"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div></table></body></html> First-child, last-child selectors
Specify the style of the first and last child elements
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:first-child { background-color: yellow; } li:last-child { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html> nth-child, nth-last-child selectors
Specify the style for a child element with a specified sequence number in the parent element.
You can also use Nth-child(even) to specify styles for even-numbered elements, and Nth-child(odd) to specify styles for odd-numbered elements.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:nth-child(2) { background-color: yellow; } li:nth-last-child(2) { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html> nth-of-type nth-last-of-type selector
These two selectors are to make up for the shortcomings of nth-child and nth-last-child selectors. These two choices The handler only specifies styles for elements of the same type.
UI element status selector
E:horver,E:active,E:focus selector
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:hover { background-color: yellow; } input[type="text"]:focus { background-color: green; } input[type="text"]:active { background-color: red; } </style></head><body><input type="text" name="name"></body></html> E:enabled,E:disabled,E:read-only,E:read-write selector
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:disabled { background-color: green; } input[type="text"]:read-only { background-color:darkgrey; } </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html> E: checked, E: default selector
E: checked specifies the style when the check box is selected
E: default specifies Default selection box style
E::selection selector
Specifies the style when the element is selected
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p::selection { background-color: goldenrod; } </style></head><body> <p>测试测试</p></body></html>