前端学习:选择器的类别

全局选择器(通配符选择器)

可以和任何元素匹配,优先级最低,可以作为样式初始化。

*{

margin: 0;

padding: 0;

}

用上一篇的内部样式实战一下:

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>
      *{
        font-size:30px;
        color: black;
      }
    </style>
</head>
<body>
    <p>hello</p>
    <h1>css</h1>
</body>
</html>

运行结果是将下面的所有标签内容(hello,css)统一改成了大小为30px,颜色黑色的字体。

元素选择器

html文档中的元素,p,b,div,a,img,body等

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述'共性',无法描述一个元素的'个性'。

一句话怎们设置成两种样式呢?就像这样

代码部分:

类选择器

灵活,使用率最高

.类名{}

你想改那个那个标签价格class,类名就是那个class后面等于的,不能以数字开头。

类选择器可以被多种标签使用,一个标签可以使用多个类选择器,用空格隔开。

ID选择器

针对某一个特定的标签来使用,只能用一次。class中的ID选择器以#来定义。

id是唯一的,不能以数字开头。

<h2 id="mytitle">你好</h2>

#mytitle{

border:3px;

color: green;

}

合并选择器

.选择器1,.选择器2,.......{}

作用:提取共同样式,减少代码重复

选择器优先级

行内样式>ID选择器>类选择器>元素选择器(同级会覆盖)

相关推荐
格鸰爱童话几秒前
向AI学习项目技能(五)
java·学习
技术人生黄勇10 分钟前
拆解 Hermes Agent:开源 Agent 里唯一的闭环学习系统
学习
天若有情67313 分钟前
【C++原创开源】formort.h:一行头文件,实现比JS模板字符串更爽的链式拼接+响应式变量
开发语言·javascript·c++·git·github·开源项目·模版字符串
天***885217 分钟前
Edge 浏览器离线绿色增强版+官方安装包,支持win7等系统
前端·edge
漫游的渔夫25 分钟前
别再直接 `json.loads` 了!AI 返回的 JSON 坑位指南
前端·人工智能
凉、介27 分钟前
别再把 PCIe 的 inbound/outbound、iATU 和 eDMA 混为一谈
linux·笔记·学习·嵌入式·pcie
软件工程师文艺37 分钟前
从0到1:Claude Code如何用React构建CLI应用
前端·react.js·前端框架
M ? A1 小时前
Vue 迁移 React 实战:VuReact 一键自动化转换方案
前端·vue.js·经验分享·react.js·开源·自动化·vureact
yuki_uix1 小时前
重排、重绘与合成——浏览器渲染性能的底层逻辑
前端·javascript·面试
止观止1 小时前
拥抱 ESNext:从 TC39 提案到生产环境中的现代 JS
开发语言·javascript·ecmascript·esnext