首页 > 其他分享 >595 CSS语法格式 and 596 CSS选择器_基础选择器

595 CSS语法格式 and 596 CSS选择器_基础选择器

时间:2022-10-22 15:34:48浏览次数:47  
标签:595 元素 选择器 语法 id CSS 属性

CSS语法格式

css语法:
     格式:
        选择器 {
            属性名1:属性值1;
            属性名2:属性值2;
            ...
        }
      选择器 : 筛选具有相似特征的元素
      注意:
          每一对属性需要使用;隔开,最后一对属性可以不加;

 

 

  选择器:筛选就有相似特征的元素

    分类:

      ·基本选择器
        1.id选择器:选择具体的id属性值,建议在html页面中id值唯一
               语法:#id的属性值{}
        2.元素选择器:选择具有相同标签名称的元素
                语法:标签名称{}
                注:id选择器高于优先级高于元素选择器
        3.类选择器:选择具有相同的class属性值的元素
                语法:.class属性值{}
               主语:类选择器优先级高于元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: blue;
        }
        .class01{
            color: chartreuse;
        }
    </style>
</head>
<body>
        <!--
        基本选择器
          1.id选择器:选择具体的id属性值,建议在html页面中id值唯一
               语法:#id的属性值{}
          2.元素选择器:选择具有相同标签名称的元素
                语法:标签名称{}
                注:id选择器高于优先级高于元素选择器
          3.类选择器:选择具有相同的class属性值的元素
                语法:.class属性值{}
                主语:类选择器优先级高于元素选择器
        -->
        <div id ="div1">哈嗨</div>
        <div>哈嗨</div>
        <p class="class01"></p>

</body>
</html>

 


 

标签:595,元素,选择器,语法,id,CSS,属性
From: https://www.cnblogs.com/agzq/p/16816177.html

相关文章

  • css
    div.forFlow{border:1pxsolid#5f9ea0;border-right:3pxsolid#5f9ea0;border-bottom:3pxsolid#5f9ea0;background:#5f9ea0;padding......
  • CSS选择器_基础选择器和扩展选择器
    5.选择器:筛选具有相似特征的元素 *分类: 1.基础选择器 1.id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 *语......
  • 选择器-基础选择器、扩展选择器、CSS属性
    选择器-基础选择器 <title>选择器</title><style>#div1{color:red;}#class1{color:gray;}......
  • CSS与HTML结合方式和CSS语法格式
    3.CSS的使用:CSS与html结合方式 1.内联样式 *在标签内使用style属性指定css代码 *如:<divstyle="color:red;">hellocss</div> 2.内部样......
  • CSS概述
    1.概念:CascadingStyleSheets层叠样式表*层叠:多个样式可以作用在同一个html的元素上,同时生效2.好处: 1.功能强大 2.将内容展示和样式控制分离 ......
  • CSS与html的结合方式、CSS语法格式
    CSS与html的结合方式<!--内联样式,在标签内使用style属性指定css代码--><divstyle="...">Hello</div><head><metacharset="UTF-8"><title>Title</ti......
  • CSS速览
    CSS样式引入样式种类外部样式表:<linkrel="stylesheet"type="text/css"href="mystyle.css">内部样式表:<style>内联样式表:style=""优先级:通用选择器(*)标签选......
  • css模块化导致antd引入无效的问题
    我用的是webpack5,在react18中配置cssmodule后导致antd全局样式失效,这时候可以考虑css单独配置不用模块化,less也单独有一套自己的配置,启用模块化,less用于业务代码,css用于第......
  • 伪类选择器
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>伪类选择器</......
  • HTML-案例-注册页面,CSS-概述
    HTML-案例-注册页面<!--定义表单from,post:获取#号--><formaction="#"method="post"><!--边框1集中,宽度500--><tableborder="1"align="center"width......