笨鸟先飞，笨猪先肥 2024-09-25 15:51 采纳率: 0%
浏览 4

类名选择器与标签选择器设置长宽高的区别

img

img


用类名选择器为长方形，div标签选择器为正方形，这是为什么呢

  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺@新空间代码工作室 2024-09-25 15:52
    关注

    下午好🌅🌅🌅
    本答案参考ChatGPT-3.5

    类名选择器和标签选择器的区别主要在于它们在HTML中的应用和所代表的元素类型。

    1. 类名选择器（如:class="red"）： 类名选择器是一种CSS选择器，用于选择具有特定类名的所有HTML元素。它以“:”符号开始，并在之后跟着元素的名称。例如，:后面是类名red。

    优点：方便定位到特定类型的元素。 缺点：如果多个元素都有相同的类名，那么可能会造成问题，因为只有一个元素可以匹配给定的类名。

    1. 标签选择器（如:tag="div"）： 标签选择器用于选择HTML文档中的某个特定元素，如<div>。它可以用于定义元素的外观或行为。例如，:后面是标签名div。

    优点：通过这种方式可以确保元素具有特定的属性或样式。 缺点：如果标签数量过多，可能需要更多的选择器才能找到所有所需的元素。

    根据你的需求，你可以使用类名选择器来创建一个具有不同宽度和高度的红色长方形。但是，如果你希望所有具有该类名的元素都具有相同的颜色和样式，那么使用标签选择器将更合适。如果你想将<div>标签与红色文本链接在一起，那么你需要使用CSS代码来实现这个目标。

    下面是一个示例代码片段：

    <!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 {
            width: 100px;
            height: 100px;
            background-color: red;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="red"></div>
    <!-- 其他div元素 -->
</body>
</html>

    在这个例子中，我们使用了类名选择器:class="red"来创建两个红色长方形。我们还添加了一个段落<p>来显示这些红色长方形。现在，所有的div元素都将显示为红色，而且字体颜色、文本对齐方式等都是由red类决定的。

    评论

报告相同问题？

  • 如何利用css选择器选中纯文字元素 css javascript 前端
    2022-09-19 12:23
    回答 4 已采纳 没法直接选中，先在父亲div上设置你要的样式（会继承给它），再设置两个兄弟节点a11跟a22使用其他的样式，使父亲的样式作用不到两个兄弟节点上。如果有条件的话还是给纯文本加个标签包起来吧好控制些
  • css 派生选择器的结构是怎样的？ css
    2015-11-23 09:21
    回答 1 已采纳 不需要写全，下面的就行，testcss下的p为蓝色，写全就需要限定结构一定是那样的才会生效。 ``` .testcss p{ color:blue; } ``` 如你第一个样
  • CSS关于伪类选择器的使用 css3 html5 前端
    2022-02-28 13:27
    回答 4 已采纳 这玩意儿就像地址一样，从上到下，便于查找和区分位置，其次他有些地方并非固定的，就像你截图的那块导航，他不一定是固定的，他有可能是后台传过来的数据，前端只是用于渲染，在渲染过程中为某个类别添加固定的类名
  • 前端笔记 | CSS基础
    2021-03-13 08:48
    Huffiee的博客 CSS的主要使用目的就是美化网页，布局页面。...CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  • 关于CSS选择器问题，求解答 css css3 html
    2022-03-03 16:39
    回答 2 已采纳 这种写法是为了区分多个span的时候，加个.leftbtn优先级会更高一点
  • 如何在PHP（DOM选择器）中按类名获取元素？ php
    2016-08-28 12:21
    回答 1 已采纳 Use DOMXPath with a custom XPath query. See How can I find an element by CSS class with XPath?
  • 关于js给元素添加类名失效的问题 javascript 前端
    2022-03-31 17:02
    回答 3 已采纳 你打印下哪里的className有问题
  • 前端（三）
    2023-04-07 19:49
    Outcast-的博客 none} 结构伪类选择器： 作用：根据元素在html中的结构关系查找元素，常用于查找父级选择器中的子元素 减少对html中类的依赖，保持代码整洁 伪元素：一般页面中的非主体内容可以使用伪元素 区别：html中的标签是元素...
  • CSS类名加点和不加的区别 css html5
    2022-03-27 11:36
    回答 2 已采纳 命名的时候？应该不是命名的时候吧，你说的是选择器吗？ 加点的指的是类选择器，就是带有 class 属性的 HTML 元素 不加点的是元素选择器，这个是根据标签元素名称来选择HTML 元素
  • js解决标签类名的切换问题 ..... css html5 javascript
    2019-07-06 17:46
    回答 2 已采纳 首先，对该按钮添加 id ,添加 事件，根据当前样式设置为另一种样式： ``` 设置背景 ``` 在 http://www.w3school.c
  • js 判断是否有类名，在另外一个在增删类名 html jquery 前端
    2022-01-10 17:34
    回答 8 已采纳 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script&gt
  • 【牛客网-公司真题-前端入门篇】——奇安信春招笔试-前端-卷2
    2022-08-24 16:16
    菜菜的变强之路的博客 public class Solution { /** * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * * 得到体积的最大可能值 * @param n long长整型 长方形的长宽高之和。长宽高都为质数。 * @return ...
  • Java 对象名.方法名与类名.方法名的使用 eclipse java
    2021-12-28 16:25
    回答 3 已采纳 类名.方法名就是对某个类的方法就行调用，一般格式如：classA.funB();类名.对象名就是对某个类中的某个对象(字段)进行访问或者赋值，比如对classB中的String类型 的s进行赋值：cl
  • 前端基础（一） HTML && CSS
    2020-09-24 22:36
    是你得不到的人的博客 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值” 长宽高属性的属性值像素和百分比的区别：像素不会随网页变化，百分比使图片随网页变化 列表标签 分为有序和无序列表 常用标签 标签 属性 取值 ...
  • CSS知识小结1-CSS基础属性
    2022-09-28 22:54
    叫我毛同学的博客 内部样式表：css样式定义写在head的style里，结构标签写在body里。行内元素：,,,...默认是他本身宽度，一行可以有多个行内元素，内部可以放行内元素。文本颜色：color: red 或者16进制颜色（开发最常见） 或者 rgb...
  • 移动web及css空间平面
    2022-03-24 21:33
    陈闲之的博客 meta标签 , initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/> 1.meta标签对网页设置语言，设置seo关键字 name告诉meta标签要设置什么地方 content设置的内容 1.width=device-width 视口的...
  • Qt基础知识大全
    2019-06-19 19:24
    传奇永不熄灭的博客 本文章记录着我学Qt几个月来的笔记，其中包括着控件的使用，样式表，...笔记多来源与书籍以及广大互联网大神，以及自己理解的知识点。 qt文件最好没有中文路径 Qt库（qt-4.8.6）: qt-opensource-windows-x86-mi...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 9月25日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？