css的基本选择器

最新推荐文章于 2024-02-28 21:36:57 发布

summitjava

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量102

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/summitjava/article/details/82710752

版权

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

19 篇文章 0 订阅

订阅专栏

1. //标签选择器

<html>
   <head>
   <title>HTML示列</title>
   <style type="text/css">
       div{
           background-color:gray;
           color:green;
       }
       p{
           background-color:yellow;
           color:black;
       }
   </style>
   </head>
   <body>
       <div style="background-color:red;color:green;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
       <p>变化之由表</p>
   </body>
</html>

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

2. class选择器，每个HTML标签都有一个CLASS属性

<html>
   <head>
   <title>HTML示列</title>
   <style type="text/css">
   /*   div.haha{
           background-color:yellow;
           color:green;
       }
               p.haha{
           background-color:yellow;
           color:green;
       }*/
       .haha{
               background-color:orange;
       }

   </style>
   </head>
   <body>
       <div class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
       <p class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</p>

   </body>
</html>

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

3. ID选择器

<html>
   <head>
   <title>HTML示列</title>
   <style type="text/css">
   /*   div#haha{
           background-color:yellow;
           color:green;
       }
               p#haha{
           background-color:yellow;
           color:green;
       }*/
       #haha{
               background-color:orange;
       }

   </style>
   </head>
   <body>
       <div id="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
       <p id="haha">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm。</p>

   </body>
</html>

summitjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的基本选择器

1. //标签选择器&lt;html&gt; &lt;head&gt; &lt;title&gt;HTML示列&lt;/title&gt; &lt;style type="text/css"&gt; div{ background-color:gray; color:green; }...
复制链接

扫一扫

专栏目录