首页 > 其他分享 >【CSS】第九讲:CSS基本选择器(1)

【CSS】第九讲:CSS基本选择器(1)

时间:2024-01-21 22:33:12浏览次数:30  
标签:定义 示例 元素 选择器 第九 ID CSS 属性

不积跬步无以至千里@放纵lili

一、元素选择器

1、定义:

元素选择器就是使用HTML标签作为选择器

2、基本语法:

HTML元素名{

         属性1:属性值1;

         属性2:属性值2;

         .............

}

3、示例:

【CSS】第九讲:CSS基本选择器(1)_选择器

二、类选择器

1、定义:

类(class)选择器允许以一种独立于文档元素的方式来指定样式。类选择器的名称由用户自定义。类选择器可以定义所有元素通用的样式。需注意的是,类选择器以“:”定义,即在类选择器名前加上一点。

2、基本语法:

.类选择器名{

          属性1:属性值1;

          属性2:属性值2;

          ..........

}

3、应用示例:

【CSS】第九讲:CSS基本选择器(1)_选择器_02

注意: 类选择器的名称不能以数字开头

三、ID选择器

1、定义:

  ID选择器与类选择器一样,可以定义一个通用的样式,应用到任何需要的地方,但两者在定义和应用时存在比较大的差别。在定义时,选择器的前缀符号不同,类选择器使用的是“ .”,ID选择器使用的是“#”

2、基本语法:

#ID选择器名{

            属性1:属性值1;

            属性2:属性值2;

            ........

}

3、应用示例:

【CSS】第九讲:CSS基本选择器(1)_基本语法_03

  和类选择器一样,ID选择器的名称,仍然不能以数字开头。




标签:定义,示例,元素,选择器,第九,ID,CSS,属性
From: https://blog.51cto.com/u_16292324/9355893

相关文章

  • CSS基础
    什么是CSS:CSS(CascadingStyleSheets,层叠样式表)是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据CSS的样式定义将其选定的元素显示为恰当的形式。一条CSS的样式定义包括属性和属性值,它们共同决定网页的外观。CSS作用:CSS是用来指定文档如何展示给用户的一门语......
  • 前端学习-HTML/CSS刷题笔记03
    1布局单列布局单列布局是将头部、内容区、底部在页面上垂直排列,是非常实用的一种布局方式。主要对三个区域的宽度进行统一,然后通过设置自动外边距进行居中。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X......
  • CSS颜色
    1、RGB和RGBA  2、HEX或者HEXA(十六进制) HSL和HSLA  ......
  • 第九天:软件编译安装过程
    一、利用编译工具,通常只需要三个大的步骤./configure(1)通过选项传递参数,指定安装路径、启用特性等;执行时会参考用户的指定以及Makefile.in文件生成Makefile(2)检查依赖到的外部环境,如依赖的软件包make根据Makefile文件,会检测依赖的环境,进行构建应用程序makeinstall复......
  • 选择器优先级
    1、简单了解    2、详细了解选择器的优先级(a,b,c) 当鼠标悬浮选择器的时候会出现一组权重  行内样式是指在body里直接定义元素的样式 ......
  • 流式系统:第九章到第十章
    原文:StreamingSystems译者:飞龙协议:CCBY-NC-SA4.0第九章:流连接当我开始学习连接时,这是一个令人生畏的话题;LEFT、OUTER、SEMI、INNER、CROSS:连接的语言是富有表现力和广泛的。再加上流带来的时间维度,你会发现这似乎是一个具有挑战性的复杂话题。好消息是,连接实际上并不是一......
  • [代码随想录] 第九天
    232.栈实现队列[https://leetcode.cn/problems/implement-queue-using-stacks/description/]思路:无classMyQueue{Stack<Integer>stackIn;Stack<Integer>stackOut;inttemp;publicMyQueue(){stackIn=newStack<>();......
  • CSS3 grid 流式布局
    前言正文只需要这样就可以实现流失布局://html<divclass="container"><div>item</div>......</div>//css样式.container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}auto-fill和auto-fit的区别......
  • 【uniapp】CSS样式穿透(vue3 setup 微信小程序)
     如果想要在编译为微信小程序时使用样式穿透,光使用`::v-deep`没效果,查了文档发现需要设置`options:{styleIsolation:"shared"}`,但是此时我用的setup语法很离谱,查阅不到相关内容,尝试多次最后的解决方法如图所示,增加一个script标签设置即可。这样就能生效了。......
  • CSS clip-path
    clip-path用于定义一个剪切路径,该路径将被用来裁剪元素的可见部分。在clip-path属性中,我们可以使用各种形状、路径和图像来定义剪切路径。以下是一些常见的clip-path属性值:inset():创建一个内部剪切区域,该区域包含元素的内容,但不包括任何边框或外边距。circle():创建一个......