Magical CSS3 selector_html/css_WEB-ITnose-HTML Tutorial-php.cn

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>

Copy after login

　 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>

Copy after login

　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>

Copy after login

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>

Copy after login

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>

Copy after login

<strong>befor伪元素选择器</strong>

Copy after login

<!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>

Copy after login

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>

Copy after login

　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>

Copy after login

　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>

Copy after login

　 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>

Copy after login

　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>

Copy after login

　 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>

Copy after login

　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>

Copy after login

　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>

Copy after login

　　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>

Copy after login

　 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>

Copy after login