CSS第一课------基础选择器

最新推荐文章于 2024-05-21 21:13:29 发布

柠檬山楂荷叶茶

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量317

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_46344220/article/details/107395225

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器

选择器的作用：找到特定的HTML页面元素。
选择器分为基础选择器和复合选择器。

一、标签选择器

标签选择器就是用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

作用：可以把某一类标签全部选择出来。
优点：能快速为页面中同类型标签统一样式。
缺点：不能设计差异化样式。
例：

<!DOCTYPE html>
<html lang="en">
<head>   
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>  
    h2{       
            color: aqua;  
              }
              </style>
</head>
<body>   
   <h1>这是h1标签</h1> 
   <h2>这是h2标签1</h2>
   <h2>这是h2标签2</h2>  
   <h2>这是h2标签3</h2>
 </body>
</html>

在这里插入图片描述

二、类选择器

类选择器使用“ . ”（英文）进行标识，后面紧跟类名。
语法：
.类名{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
优点：可以为元素对象定义单独或相同的样式，可以原则一个或多个标签。

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <title>Document</title>
 <style>  
  .red{     
          color: brown;
             }
 </style>
 </head>
 <body>    
 <h1>这是h1标签</h1> 
 <h2>这是h2标签1</h2>
  <h2>这是h2标签2</h2>
   <h2 class="red">这是h2标签3</h2>
   </body>
   </html>

在这里插入图片描述特殊用法：可以给标签指定多个类名，从而达到更多的选择目的。
例：

<!DOCTYPE html>
<html lang="en">
<head>   
 <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  <title>Document</title>
  <style>  
   .red{      
          color: crimson;      
          font-size: 20px;   
     } 
   .blue{     
          color: cyan;     
          font-size: 20px;  
           } 
   .grn{    
          color: forestgreen;       
          font-size: 20px; 
                 }
   .org{   
          color: darkorange;    
           font-size: 20px;
                  }
 </style>
 </head>
 <body>
            <h2 class="org">这是h2标签1</h2> 
            <h2 class="blue">这是h2标签2</h2> 
            <h2 class="red">这是h2标签3</h2>
            <h2 class="grn">这是h2标签4</h2>
</body>
 </html>

这段代码和下面的等价

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>   
 .font20{   
      font-size: 20px;   
                      }  
 .red{       
        color: crimson; 
                      }  
 .blue{  
        color: cyan; 
                       }
 .grn{     
        color: forestgreen;  
                       }
 .org{  
        color: darkorange;
                        }
 </style>
 </head>
 <body>    
             <h2 class="org font100">这是h2标签1</h2> 
             <h2 class="blue font100">这是h2标签2</h2>
             <h2 class="red font100">这是h2标签3</h2>
             <h2 class="grn font100">这是h2标签4</h2>
 </body>
 </html>

在这里插入图片描述

三、ID选择器

ID选择器使用“ # ”进行标识，后面紧跟ID名。
元素的ID是惟一的，只能对应于文档中某一个具体的元素。
语法：
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
W3C规定，在同一个页面里，不允许相同名字的ID对象出现，但是也许相同名字的class。
例：

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <title>Document</title>
 <style>   
  #blue{      
    color: deepskyblue;  
      }
  </style>
  </head>
  <body>     
    <h2>这是h2标签1</h2>
    <h2 id="blue">这是h2标签2</h2>
    <h2>这是h2标签3</h2>
    <h2>这是h2标签4</h2>
 </body>
 </html>

在这里插入图片描述

四、通配符选择器

通配符选择器用“ * ”表示，*就是所有的，是选择器中作用范围最广的，能匹配页面中所有的元素，但是会降低页面响应速度。
语法：
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
例：

<!DOCTYPE html>
<html lang="en">
<head>   
 <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
    <style> 
      *{      
       color: fuchsia; 
         }
   </style>
   </head>
   <body>    
 <h2>这是h2标签1</h2>
 <h2>这是h2标签2</h2>
 <h2>这是h2标签3</h2> 
 <h2>这是h2标签4</h2>
 </body>
 </html>

在这里插入图片描述

五、选择器总结

在这里插入图片描述

柠檬山楂荷叶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第一课------基础选择器

选择器选择器的作用：找到特定的HTML页面元素。选择器分为基础选择器和复合选择器。一、标签选择器标签选择器就是用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。语法：标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}作用：可以把某一类标签全部选择出来。优点：能快速为页面中同类型标签统一样式。缺点：不能设计差异化样式。例：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫