欢迎光临
我的个人博客网站

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

首尾元素伪类选择

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

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏