CSS伪元素,伪类选择器

伪类选择器是CSS中已经定义好了的选择器,不能谁便取名,常用的味蕾选择器是使用在a元素上的几种,如a:link  a:visited  a:hover  a:active

伪元素选择器斌不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种伪元素选择器(first-line, first-letter, berfore ,after)

CSS四种伪元素选择器

<1>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        p:first-line { /*伪元素: 本来p元素的第一行是一句文字,并不是一个元素,但是这里将p元素的第一行伪装成一个元素了,然后给它设置样式; */
            font-size: 30px;
            font-family: Arial;
            color: red;
        }

        p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素,然后给他设置样式*/
            font-size: 3cm;
        }
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa<br />
        bbbbbbbbbbb<br />
        ccccccccccc<br />
    </p>
</body>
</html>


<2>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
    
        p:before {  /*在p元素前面追加一个“你好”文字*/
            content:"你好!";
            

        }
        p:after { /*在p元素后面追加一个“大家好”文字*/
            content:"大家好!"
        }

          
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa
    </p>
</body>
</html>

CSS四个最基本的结构性伪类选择器

1> :root 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        :root { /*将样式绑定到页面的根元素中,所有根元素是指位于文档中最顶层结构的元素,即<html> 即将HTML的背景设置为黄色*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa
    </p>
</body>
</html>


2>:not

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        li:not(.two) { /*排除某个元素; 这里不同于Jquery的伪选择器; 这里括号里是一个“选择器”*/
            color:red;
            font-size:30px;
        }        
    </style>
</head>
<body>
    <ul>
        <li>aaaaaaaaaaa</li>
        <li class="two">aaaaaaaaaaa</li> 
        <li>aaaaaaaaaaa</li>
           
    </ul>
</body>
</html>



3>:empty

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        li:empty { /*将空的li元素隐藏掉*/
            display:none;
        }             
    </style>
</head>
<body>
    <ul>
        <li>aaaaaaaaaaa</li>
        <li></li> 
        <li>aaaaaaaaaaa</li>
           
    </ul>
</body>
</html>


4>:target

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        :target { /*将目标元素设置一个样式 ;当点击“去到one锚点”后将one锚点的背景颜色设为绿色,当点击“去到tow锚点”的时候将two锚点的背景颜色设为绿色 */
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">去到one锚点</a><br>
    <a href="#two">去到tow锚点</a><br><br><br>

    <a name="one">
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br> <br> <br> <br>    
    </a>



    <a name="two">
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
    
    </a>
</body>
</html>


其他的伪类选择器

强调一下:找元素的时候不是找它的外层,而是直接z直接用里层的li,所以我们这里都是直接用找到li元素;

:first-child  找每组第一行; :last-child 找每组最后一行  (每个ul下的li为一组)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        li:first-child { /*找出相同一级中的li元素,然后再找出它们各自的第一个元素,给它设置样式; 比如:url1与url2下面都有li元素,url1下的li元素为一组,url2下面的li为一组,url1下的这一组li元素,与url2下的那一组li元素是同一个级别的。 然后将url1下的那一组li元素的第一个li元素 和url2下的那一组li元素的第一个li元素的背景设置为红色*/
            background-color: red;
        }

        li:last-child { /*找出相同一级中的li元素,然后再找出它们各自最后的那个元素,给它设置样式   (例子:如上)*/
            background-color: green;
        }

        li:nth-child(3) { /*找出相同一级中的li元素,然后再找出它们指定下标的那个元素,给它设置样式 , (例子:如上),注意:下标从1开始的*/
            background-color: yellow;
        }

    </style>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错,挺风和日丽的</li>  
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
    </ul> 
</body>
</html>

奇偶伪类选择器

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        li:nth-child(even) { /*找出相同一级中的li元素,然后将每组中的偶数设置为红色 (不知为什么和jquery不一样,实验得知:下标从1开始的,所以第一行而奇数,所以第一行是蓝色的,第二行是偶数,所以第二行才是红色的)*/
            background-color:red;
        }

        li:nth-child(odd) { /*找出相同一级中的li元素,然后将每组中的奇数设置为蓝色(不知为什么和jquery不一样,实验得知:下标从1开始的)*/
            background-color: blue;
        }

    </style>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错,挺风和日丽的</li>  
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
    </ul> 
</body>
</html>


CSS中的奇偶选择器,对比jquery中的奇偶选择器有什么不同

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错,挺风和日丽的</li>  
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
       <li>今天天气不错,挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
        <li>人生能有几回搏,今天不博何日博</li>
    </ul> 
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("li:even").css("background-color", "red");  //jquer这个奇偶选择器的下标从开始的,0是偶数,所以第一行为红色,而且它是获取页面所有的li,将所有的li视为一组,然后查找奇偶,它与CSS的li:nth-child(odd), 或li:nth-child(even) 不一样。(css是将每个ul下面的li都各自视为一组 而且每组元素的下标都是从1开始的)

        $("li:odd").css("background-color", "blue");
    })
</script>

自定义隔N行进行变色

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        p:nth-child(3n+4) {  /*我们用:nth-child(even) 或者:nth-child(odd) 可以找出奇偶元素,但是假如我想每隔3个元素就变色呢?*/
                             /*3n表示每隔3个元素,4表示从第四个元素开始,每隔三个元素就将他们的颜色设为红色*/
            background-color:red
        }
    </style>
</head>
<body>
    <div>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
    </div>
</body>
</html>


找同一类型的元素::nth-of-type(n)   |  :nth-last-of-type(n)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /*最外层的div里有4个p元素,2个div元素*/

        p:nth-child(4) {
            background-color:red;  /*我们想将第四个p元素的背景颜色设为红色,可是发现大的div里面的第四个元素是一个div元素,并不是一个p元素,所以我们这样根本就没有取到第四个p元*/
        
        }

        p:nth-of-type(4) { /*找出大的div里的同一类型的元素,排除其他类型的元素;(注意:下标从1开始)*/
                           background-color:blue; /*这样我们就找到了大的div里的第四个p元素,然后将它的背景颜色设为蓝色*/
        }

        p:nth-last-of-type(3) { /*找出大的div里的同一类型的元素,排除其他类型的元素  然后 从后往前数,找到第3个p元素 (注意:下标从1开始)*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <div>是啊,还不错,要出去走走</div>
        <div>是啊,还不错,要出去走走</div>
        <p>今天天气还可以</p>
    </div>
</body>
</html>



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值