css3伪类选择器

白泽的笔记

已于 2022-07-26 19:35:08 修改

阅读量78

点赞数

文章标签： css html 前端

于 2022-07-04 18:55:44 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/125606566

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>css3伪类选择器</title>
       <style type="text/css">
           .list li:first-child{
               color: #aa00ff;
           }
           /* 指定只有当li元素是其父级的第一个子级的样式。 */
           .list li:last-child{
               color: #f00;
           }
           /* 指定只有当li元素是其父级的最后子级的样式。 */
           .list li:nth-child(3){
               color:#0f0;
           }
           /* 选择每个li元素是其父级的第三个li元素 */
           .list li:nth-last-child(4){
               color: #00ffff;
           }
           /* odd奇数 even偶数 */
           /* 选择每个元素的是其父级的倒数第四个li元素 */
           /* .list1 :first-child{
               color: #f00;
           } */
           .list1 :first-of-type{
               color: #00aaff;
           }
           /* 选择同种类型中的第一个 */
           .list1 :nth-of-type(2){
               color: #0f0;
           }
           /* 选择同种类型中的第二个 */
           p::first-letter{
               color: #f00;
           }
           /* 选择每一个p元素的第一个字母 */
           P::first-line{
               color: #0f0;
           }
           /* 选择每一个p元素的第一行 */
           p::selection{
               color: #ffff00;
               background-color: #f00;
           }
           /* 被用户选中的部分 */
       </style>
   </head>
   <body>
       <ul class="list">
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
       </ul>
       <div class="list1">
       <span>he11o span1</span>
       <span>he11o span2</span>
       <a href-="#" >超链接a1</a>
       <a href-="#" >超链接a1</a>
       <a href-="#" >超链接a1</a>
       <span>he1lo span3</span>
       </div>
       <div class="p">
           <p>qwertyuiopasdfghjklzxcv<br>bnm,jium,8um9i,</p>
       </div>
   </body>
</html>