伪类选择器和伪元素

<html lang=“zh或者en”> zh=中文

                                           en=英文

           <head>

                    <meatcharset=“UTF-8”>

                      <title>题目</title>

                  <style>

                      ul  >  li{

                              color: red;【<li>里的内容全部变成红色】

                             }

                  </style>

           </head>

           <body>主体内容,网页所显示的

                  <ul>

                        <li>第一个</li>

                        <li>第二个</li>

                  </ul>

            </body>

</html>

 

如何选中第一个li标签自动变为红色,那么就要用到伪类

伪类:不存在的类,特殊的类

            伪类用来描述一个元素的特殊状态

比如,第一个子元素,被点击的元素,鼠标移入的元素……

            伪类一般情况下都是使用:开头

            :first  child【第一个子元素】

           【示例】

<head>

                    <meatcharset=“UTF-8”>

                      <title>题目</title>

                  <style>

                      ul  >  li :first-child{

                              color: red;【第一个li自动变成红色

                             }

                  </style>

 </head>

<body>主体内容,网页所显示的

          <ul>

                  <li>第一个</li>

                  <li>第二个</li>

            </ul>

</body>

 

:last-child【最后一个子元素】(这个不写了)

 

:nth-child()选中第n个子元素

特殊值:直接写n,表示第n个,n的范围(0到正无穷)           2n[或者even]表示选中偶数位的元素

                 2n➕1[或者odd]表示选中奇数位的元素

 

【以上这些伪类都是根据所有子元素进行排序】

 

:first-of-type

:last-of-type

:nth-of-type()

这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序

:not()否定伪类

将符合条件的元素从选择器中去除

                 <style>

                      ul  >  li :not(:nth-of-type(2)){【除了第二个其他的都是红色】

                              color: red;【第一个li自动变成红色

                             }

                  </style>

 </head>

<body>主体内容,网页所显示的

          <ul>

                  <li>第一个</li>

                  <li>第二个</li>

                  <li>第三个</li>

            </ul>

</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值