Div的几种选择器

Posted 2020-10-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Div的几种选择器相关的知识，希望对你有一定的参考价值。

Div 是一个html标签，一个块级元素（单独显示一行），单独使用没有意义，需要结合CSS来使用，主要用于页面的布局。

div选择器：

1.元素选择器：

 1     <style>
 2                 div{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div >
 9             你停在了那条我们熟悉的街。
10         </div>
11     </body>

2.类选择器：

 1     <style>
 2                 .div2{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div  class="div2">
 9             你停在了那条我们熟悉的街。
10         </div>
11     </body>

3.id选择器：

 1     <style>
 2                 #div3{
 3             font-size: 5px; 
 4             color: red;
 5          }            
 6     </style>
 7     <body>
 8         <div  id="div3">
 9             你停在了那条我们熟悉的街。
10         </div>
11     </body>

4.层级选择器

 1     <style>
 2                div  font{
                font-size: 40px; 
                color:brown;
            }           
 6     </style>
 7     <body>
 8             <div>
            把你准备好的台词全念一遍。
            <font> 爱你到最后 不痛不痒</font>
        </div>
11     </body>

5.属性选择器：

 1     <style>
 2               input[type = ‘text‘]{
            font-size: 40; 
                color: yellow;
            }           
 6     </style>
 7     <body>
 8            <div>
            我们的爱 <input type="text" name="password" />
        </div>
11     </body>

6.行内引入：

1 <div style="color: orange; font-size:20px ;">
2 怪我没能力跟随。
3 </div>

7.外部引入

style1.css文件中
     div{
             font-size: 5px; 
             color: red;
           } 

利用link导入：
<html>
    <head>
        <meta charset="UTF-8">
        <title> div选择器</title>
            <link rel="stylesheet" href="style1.css" type="text/css"/>
    </head>
    <body>
        <div>
            你还要我怎样
        </div>
    </body>
</html>

以上是关于Div的几种选择器的主要内容，如果未能解决你的问题，请参考以下文章

Laravel：如何在控制器的几种方法中重用代码片段

vue3中获取ref元素的几种方式总结

高性能jquery的几种优化

一张图，理顺 Spring Boot应用在启动阶段执行代码的几种方式