Selectors for 3.4 CSS style sheets
Description: Selectors commonly used in CSS
1. Label selector
Format: Label name {css style code;}
For example, set the line height tr{heigth:100px}
Features: One of them is that the tags corresponding to the web page will take effect on the css style code.
2.id selector
Format: # id name {css style code;}
Features: 2.1 ID name must be the unique name of the entire page (no duplicate names allowed)
2.2 indicates that the scope is small, and only for the label where the id name is located, the css style will take effect.
For example, setting background color for a column in a row of a table can consider using id selector.
3. Class selector
Format:. Class name {css style code;}
Features: 3.1 represents range <= label selector >= ID selector
For example, if the corresponding label (such as td) writes a class attribute with the same name, it is equivalent to the scope of the label selector.
Label selector td{css style code;}
In some cases, css style changes are made only for certain td Tags
4. Progeny selector
Format: label name / id selector / class selector sublabel name {css style code;}
Features: 4.1 Range of action, optional
5. Pseudo-class selector
Format: Label / Selector Name a Label: Event Name {css Style Code;}
For example: nav a:hover{color:red; text-decoration:underline}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Common selectors</title> <style type="text/css"> /*1.tag chooser*/ tr{ height: 100px; } a{ color: #999999; text-decoration: none; } /*2.id selector*/ #t1{ background:green; } /*3.Class selector*/ .t3{ text-align: center; } .t4{ background: red; } /*4.Descendant Selectors*/ ul > span{ color: green; } /*5.Pseudo-class selector*/ a:hover{ color: red; text-decoration: underline; } </style> </head> <body> <table border="1px"> <tr> <td class="t2" width="150px">1</td> <td class="t2" width="150px">2</td> <td class="t2"width="150px">3</td> </tr> <tr> <td class="t2">4</td> <td class="t2" id="t1">5</td> <td class="t2">6</td> </tr> <tr> <td class="t3">7</td> <td class="t3">8</td> <td class="t3">9</td> </tr> <tr> <td class="t2">10</td> <td class="t2">11</td> <td class="t4">12</td> </tr> </table> <hr/> <ul> <li> <span>Now you are trying to make more choices in the future.!</span> </li> <span>The economic base decides the superstructure!</span> </ul> <a href="#">Use Baidu Search</a> </body> </html>