css扩展选择器

最新推荐文章于 2022-10-09 16:21:15 发布

summitjava

最新推荐文章于 2022-10-09 16:21:15 发布

阅读量290

点赞数

分类专栏： html学习笔记

本文链接：https://blog.youkuaiyun.com/summitjava/article/details/82750464

版权

html学习笔记专栏收录该内容

19 篇文章

订阅专栏

1. 关联选择器

<html>
   <head>
       <title>HTML示例</title>
       <style type="text/css">

div p{

           background-color:red;
           color:greed;
           }
       </style>
   </head>
   <body>
   
   
   
   <div><p>它在中国文学史上具有开拓性意义，是我国古典小说的分水岭</p></div>

   <P>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
   </body>
</html>

————————————————————————————————————————

2. 组合选择器

<html>
   <head>
       <title>HTML示例</title>
       <style type="text/css">

div,p{

           background-color:red;
           color:greed;
           }
       </style>
   </head>
   <body>
   
   
   
   <div>它在中国文学史上具有开拓性意义，是我国古典小说的分水岭</div>

   <P>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>

   </body>
</html>

————————————————————————————————————————————————

3. 伪元素选择器

<html>
   <head>
       <title>HTML示例</title>
       <style type="text/css">
           //原始状态
           a:link{

           background-color:red;
           color:greed;
           }
           //鼠标放上去状态
           a:hover{

           background-color:green;
           }
           //激活状态
                   a:active{

           background-color:blue;
           }
           //点击状态后
                   a:visited{

           background-color:gray;
           }
       </style>
   </head>
   <body>
   
   
   
   <a href="http://www.baidu.com.cn" target="_blank">超级链接它在中国文学史上具有开拓性意义</a>


   </body>
</html>