3.CSS三种基本选择器
三种选择器的优先级：
id选择器 > class选择器 > 标签选择器
1.标签选择器：会选择到页面上所有的该类标签的元素
格式：
标签{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>标签选择器</title>
6 <style>
7 /*标签选择器，会选择到页面上所有的这个标签的元素*/
8 h1{
9 color: #66fd01;
10 background:#3cbda6;
11 border-radius: 23px;
12 }
13 p{
14 font-size: 23px;
15 }
16 </style>
17 </head>
18 <body>
19 <h1>学习java</h1>
20 <h1>你今天学习了吗？</h1>
21 <p>听网课学习css</p>
22 </body>
23 </html>
2.类选择器：可以多个标签归类，是同一个class,可以复用,可以跨标签
格式:
.class的名称{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 /*类选择器的格式
7 .class的名称{}
8 优点：可以多个标签归类，是同一个class,可以复用,可以跨标签
9 */
10 <style>
11 .lm{
12 color: coral;
13 }
14 .lz{
15 color: hotpink;
16 }
17 </style>
18
19 </head>
20 <body>
21 <h1 class="lm">我是标题1</h1>
22 <h1 class="lz">我是标题2</h1>
23 <h1 class="lm">我是标题3</h1>
24 <p class="lz">另一个标签</p>
25 </body>
26 </html>
3.id选择器:id必须保证全局唯一，不遵循就近原则
格式:
#id名称{}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 /*
7 id选择器：id必须保证全局唯一，不遵循就近原则
8 格式: #id名称{}
9 优先级：
10 id选择器 > class选择器 > 标签选择器
11 */
12 <style>
13 #style1{
14 color: #3cbda6;
15 }
16 #style2{
17 color: hotpink;
18 }
19 .lm{
20 color: blue;
21 }
22 h1{
23 color: crimson;
24 }
25 </style>
26 </head>
27 <body>
28 <h1 id="style1" class="lm">标题1</h1>
29 <h1 id="style2">标题2</h1>
30 <h1>标题3</h1>
31 <h1>标题4</h1>
32 </body>
33 </html>
3.CSS三种基本选择器的更多相关文章
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
随机推荐
- mainWindow = new BrowserWindow 打开慢的原因 electron 已解决 Windows Defender 拦截导致
Windows Defender 导致拦截 不是变量的事儿 解决方案: win10 开始 设置 - windows 安全中心 - 病毒和威胁防护 - 病毒和威胁防护设置 - 排除项 - 添加排除项 将 ...
- vue3 markdown 读取文件的两种方法 有gitee发布地址
方法一: markdown-loader html-loader import的时候就转换成html了,每次需要build,但是可以本地双击就能看,放哪个目录页不限制 方法二: axios + mar ...
- python的替换函数strip(),replace()和re.sub()实例分析
前记: python是一个非常好用的语言,能够帮忙处理很多日常的耗费体力的事情.今天做一个脚本的时候,遇到了python替换的问题,这里就梳理一下知识点吧. 概念: 1.replace() 基本用法: ...
- 网络io与select
我们知道网络IO模型一共有5种,这里我们主要讨论同步IO和select多路复用的情况. 我们先从一个简单的TCP服务器的代码出发,来讨论一下这个是怎么实现的. 一个十分简单的TCP服务器 一个简单的T ...
- Oracle注入—报错注入
Oracle注入-报错注入 1.Oracle报错注入知识扫盲 一.Oracle报错注入知识扫盲 报错注入 报错注入就是,输入的一些能让数据库出错的语句,数据库会把这个错误回显给我们 OK,,什么语句能 ...
- 【个人笔记】VirtualBox7+Debian11基础环境搭建
本文主要是对在最新的VirtualBox7上搭建Debian11的笔记记录,方便后续个人回顾,同时搭配对配置的浅析. sudoers配置 非root用户想要使用sudo命令,需要两个条件: 系统安装了 ...
- iis管理器界面打不开
iis管理器界面打不开 图形界面打不开 服务正常运行 开始->运行->输入以下重置下 inetmgr.exe /reset
- 用phpStudy配置apache服务器
一:下载phpStudy 1进入官网https://www.xp.cn/download.html 选择稳定的2018版本 2执行下载好的文件,选择下载地址 注意!这里的安装路径不能有中文 3亮两个绿 ...
- ProtoBuf-gRPC实践
目录介绍 01.gRPC学习背景 1.1 为什么要学RPC 1.2 RPC是什么 1.3 网络库收益分析 1.4 学习计划说明 1.5 学习问题思考 02.ProtoBuf的介绍 2.1 ProtoB ...
- 记录--一道字节面试题引出的this指向问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 var length = 10; function fn () { return this.length + 1; } var obj = ...