首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy

发表评论
485 次浏览

A+

所属分类：Web前端

摘要

首尾元素伪类选择last-child和last-of-type的区别：:last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。

首尾元素伪类选择

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         article :first-child{             background:Pink;         }         article>:first-child{             color:red;         }         article h1:first-child{             font-style:italic;         }         article h2:last-child{             color:orange;         }         article h2:last-of-type{             background-color:rgb(182, 145, 182);         }     </style> </head> <body>     <a href="#cyy">cyy</a>      <ul>         <li>111</li>         <li></li>     </ul>      <main>         <a href="http://www.baidu.com" target="_blank">baidu</a>         <input type="text" value="111">         <article>             <h1 title id>h1-title-id</h1>             <h1 title='cyy'>h1-title</h1>             <h1 title='cyyhahaha'>h1-title</h1>             <h1 title='cyyhahahacyy'>h1-title</h1>             <h1 title='cyyhahaha cyy'>h1-title</h1>             <h1 title='cyy hahahacyy'>h1-title</h1>             <h1 title='cyy-hahaha cyy'>h1-title</h1>             <h2>h2</h2>             <aside>                 aside                 <h2>aside-h2</h2>             </aside>             <h2>h2</h2>             <div>111</div>         </article>     </main>     <div id="cyy">cyy</div> </body> </html>

last-child和last-of-type的区别：

:last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。

:last-of-type表示其父元素下的最后一个指定类型的元素。

伪类选择唯一子元素：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         article :only-child{             background:Pink;         }         article>div:only-of-type{             color:red;         }     </style> </head> <body>     <a href="#cyy">cyy</a>      <ul>         <li>111</li>         <li></li>     </ul>      <main>         <a href="http://www.baidu.com" target="_blank">baidu</a>         <input type="text" value="111">         <article>             <h1 title id>h1-title-id</h1>             <h1 title='cyy'>h1-title</h1>             <h1 title='cyyhahaha'>h1-title</h1>             <h1 title='cyyhahahacyy'>h1-title</h1>             <h1 title='cyyhahaha cyy'>h1-title</h1>             <h1 title='cyy hahahacyy'>h1-title</h1>             <h1 title='cyy-hahaha cyy'>h1-title</h1>             <h2>h2</h2>             <aside>                 aside                 <h2>aside-h2</h2>             </aside>             <h2>h2</h2>             <div>111</div>         </article>     </main>     <div id="cyy">cyy</div> </body> </html>

根据元素编号灵活选择：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         article :nth-child(1){             background:Pink;         }         li:nth-child(2n){             color:red;         }         li:nth-child(odd){             color:green;         }         article h1:nth-child(2){             color:purple;         }         article h1:nth-of-type(2){             background-color:purple;         }     </style> </head> <body>     <a href="#cyy">cyy</a>      <ul>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>     </ul>      <main>         <a href="http://www.baidu.com" target="_blank">baidu</a>         <input type="text" value="111">         <article>             <h1 title id>h1-title-id</h1>             <div>111</div>             <div>111</div>             <h1 title='cyy'>h1-title</h1>             <h1 title='cyyhahaha'>h1-title</h1>             <h1 title='cyyhahahacyy'>h1-title</h1>             <h1 title='cyyhahaha cyy'>h1-title</h1>             <h1 title='cyy hahahacyy'>h1-title</h1>             <h1 title='cyy-hahaha cyy'>h1-title</h1>             <h2>h2</h2>             <aside>                 aside                 <h2>aside-h2</h2>             </aside>             <h2>h2</h2>             <div>111</div>         </article>     </main>     <div id="cyy">cyy</div> </body> </html>

元素尾部伪类选择：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         /* 最后两个li */         ul li:nth-last-child(-n+2){             font-weight:bold;         }         article h1:nth-last-of-type(2){             color:red;         }     </style> </head> <body>     <a href="#cyy">cyy</a>      <ul>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>     </ul>      <main>         <a href="http://www.baidu.com" target="_blank">baidu</a>         <input type="text" value="111">         <article>             <h1 title id>h1-title-id</h1>             <div>111</div>             <div>111</div>             <h1 title='cyy'>h1-title</h1>             <h1 title='cyyhahaha'>h1-title</h1>             <h1 title='cyyhahahacyy'>h1-title</h1>             <h1 title='cyyhahaha cyy'>h1-title</h1>             <h1 title='cyy hahahacyy'>h1-title-ok</h1>             <h1 title='cyy-hahaha cyy'>h1-title</h1>             <h2>h2</h2>             <aside>                 aside                 <h2>aside-h2</h2>             </aside>             <h2>h2</h2>             <div>111</div>         </article>     </main>     <div id="cyy">cyy</div> </body> </html>

not排除选择器：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         /* 前4个里排除第2个 */         ul li:nth-child(-n+4):not(:nth-child(2)){             color:red;         }     </style> </head> <body>     <a href="#cyy">cyy</a>      <ul>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>         <li>111</li>     </ul>      <main>         <a href="http://www.baidu.com" target="_blank">baidu</a>         <input type="text" value="111">         <article>             <h1 title id>h1-title-id</h1>             <div>111</div>             <div>111</div>             <h1 title='cyy'>h1-title</h1>             <h1 title='cyyhahaha'>h1-title</h1>             <h1 title='cyyhahahacyy'>h1-title</h1>             <h1 title='cyyhahaha cyy'>h1-title</h1>             <h1 title='cyy hahahacyy'>h1-title-ok</h1>             <h1 title='cyy-hahaha cyy'>h1-title</h1>             <h2>h2</h2>             <aside>                 aside                 <h2>aside-h2</h2>             </aside>             <h2>h2</h2>             <div>111</div>         </article>     </main>     <div id="cyy">cyy</div> </body> </html>

通过表单伪类创建个性化表单：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         input:disabled{             background:pink;         }         input:enabled{             background:lightgreen;         }         input:checked+label{             color:red;         }         /* 必填项 */         input:required{             border:1px solid yellow;         }         /* 选填项 */         input:optional{             border:1px solid blue;         }         input:valid{             border-radius:5px;         }         input:invalid{             border-radius:50%;         }     </style> </head> <body>     <form action="">         <input type="text" disabled>         <input type="text">         <hr>         <input type="radio" id="boy">         <label for="boy">boy</label>         <input type="radio" id="girl" checked>         <label for="girl">girl</label>         <hr>         <input type="text" required>         <input type="email" name="" id="">         <button>提交</button>     </form> </body> </html>

文本伪类：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1，关键词2，关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         p::first-letter{             color:red;         }         p::first-line{             color:yellowgreen;         }         p+span::after{             content:'hh~';             color:red;             position:relative;             top:30px;             left:30px;         }         p+span::before{             content:'↓';             color:red;         }         .form{             border:1px solid #ddd;             width:200px;             margin:100px;         }         input[type='text']{             border:none;             outline:none;         }         input[type='text']+span::after{             content:'✔';             cursor:pointer;         }     </style> </head> <body>     <div style="width:300px;">         <p>             这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~         </p>         <p>             这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~         </p>         <p>             这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~这是cyy呀~         </p>         <span>cyy</span>     </div>      <div class="form">         <input type="text">         <span></span>     </div> </body> </html>