HTML选择器的四种使用方法
选择器<style>
为了让.html代码更加简洁,这里引入选择器style
本文总共介绍选择器的四种使用方式
一、选择器的四种形式
1.ID选择器
id表示身份,在页面元素中的id不允许重复,因此id选择器只能选择单个元素
2.类别选择器
选择拥有该类别的多个元素
3.标签选择器
根据标签名称,选择对应的所有标签
4.通用选择器
针对页面中的所以标签都生效
二、选择器的使用
这是一段没有使用选择器的html代码:
<!--这是一段未使用选择器的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png" style="width: 100%;" >
</div>
<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决方案</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a>
<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a>
</div>
<div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">
运用先进技术积极推动改变,让整个世界更美好。
</div>
</body>
</html>
使用选择器后:
<!--添加完选择器后的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
#botton{
height: 40px;text-align: center;line-height: 40px;color: grey;
}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
#banner img{
width: 100%;
}
</style>
</head>
<body style="margin: 0;">
<div id="banner">
<img src="img1/img2.png">
</div>
<div id="navigation">
<a href="#" class="nav" >关于我们</a>
<a href="#" class="nav">我们的故事</a>
<a href="#" class="nav">产品和解决方案</a>
<a href="#" class="nav">新闻和活动</a>
<a href="#" class="nav">联系我们</a>
</div>
<div id="botton">
运用先进技术积极推动改变,让整个世界更美好。
</div>
</body>
</html>
1. ID选择器:
(先在head中添加<style><style\>标签)
以这段代码为例:
<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
(1)为标签添加id属性,如:
<div id="navigation"><\div>
(2)将为标签属性style中的内容提取出来,移到head标签的style中,格式: #id{} 括号中存放css样式
<style>
#navigation{
height: 80px;text-align: center;line-height: 80px;background-color: white;
}
<\style>
一个简单的id选择器就完成了,为id为navigation的标签添加括号中的样式。
2.类别选择器
与id选择器类似
(1)为标签添加class属性
<a href="#" class="nav" >关于我们</a>
(2)head中的格式:.class名{}
.nav{
text-decoration: none; color: black; margin: 0 15px;
}
为所有class类名为nav的标签添加此属性
3.标签选择器
这个是最简单的,标签名加大括号
直接上例子:(为所有<a>标签添加属性)
a{
text-decoration: none; color: black; margin: 0 15px;
}
这里还有个特殊的使用方法
例如这段代码:
<div id="banner">
<img src="img1/img2.png">
</div>
为id为banner的div标签中的所有img标签添加属性:
#banner img{
width: 100%;
}
嗯。。。# id 标签名{}
4.通用选择器
*{}
※
这里涉及到一个选择器的权重问题,后面会专门介绍权重的计算问题,这里先简单的说一下。
选择器范围越小,优先级越高
行内样式>id选择器>类选择器>标签选择器>通用选择器
关于选择器权重问题,参考这篇文章:https://www.cnblogs.com/orangekk/p/14239135.html
HTML选择器的四种使用方法的更多相关文章
- C#四种深拷贝方法
//四种深拷贝方法 public static T DeepCopyByReflect<T>(T obj) { //如果是字符串或值类型则直接返回 if (obj is string || ...
- C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏
C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...
- CSS当中color的四种表示方法
这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...
- C语言中返回字符串函数的四种实现方法
转自C语言中返回字符串函数的四种实现方法 其实就是要返回一个有效的指针,尾部变量退出后就无效了. 有四种方式: 1.使用堆空间,返回申请的堆地址,注意释放 2.函数参数传递指针,返回该指针 3.返回函 ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- Django的POST请求时因为开启防止csrf,报403错误,及四种解决方法
Django默认开启防止csrf(跨站点请求伪造)攻击,在post请求时,没有上传 csrf字段,导致校验失败,报403错误 解决方法1: 注释掉此段代码,即可. 缺点:导致Django项目完全无法防 ...
- HashMap的四种遍历方法,及效率比较(简单明了)
https://yq.aliyun.com/ziliao/210955 public static void main(String[] args) { HashMap<Integer, Str ...
- 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core
百度地图和高德地图坐标系的互相转换 GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...
- AJPFX关于Java中运用数组的四种排序方法
JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法.快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现.冒泡法是运用遍历数组进行比 ...
随机推荐
- freecodecamp挑战
freecodecamp挑战 2020年3月21初次挑战 完成45关挑战 2020年3月22日 完成至101关 2020年3月23日 完成至144关 2020年3月24日 完成至187关 css结束 ...
- Redis常用技术
Xml配置: <?xml version='1.0' encoding='UTF-8' ?> <!-- was: <?xml version="1.0" e ...
- 回调与Promise
Promise 对象就是用于表示一个异步操作的最终状态(成功或失败).它的流程就是在什么状态下需要执行什么样的操作. resolve简单理解就是一步操作执行成功后的回调函数 then是Promise对 ...
- win7上帝模式详解
最近,Windows7"GodMode"(上帝模式)被国内各大网站和论坛炒得沸沸扬扬."GodMode"始见于国外网站"GeekInDisguise& ...
- 第一次实战:XX漫画的XSS盲打
第一次实战:XX漫画的XSS盲打 XSS盲打 盲打是一种惯称的说法,就是不知道有没有XSS漏洞存在的情况下,不顾一切的输入XSS代码在留言啊投诉窗口啊之类的地方,尽可能多的尝试XSS的语句,就叫盲打. ...
- throws声明异常中断式处理异常
1.throws 编译期异常,一直往上抛最后是JVM处理(打印并中断程序) 2.声明多个或者直接声明父类
- Vue设置全局cookies样式
''' 配置全局cookies样式 下载:cnpm install vue-cookies import cookies from 'vue-cookies' Vue.prototype.$cooki ...
- [第四篇]——Windows Docker 安装之Spring Cloud直播商城 b2b2c电子商务技术总结
Windows Docker 安装 Docker 并非是一个通用的容器工具,它依赖于已存在并运行的 Linux 内核环境. Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境, ...
- Map集和
目录 Map 特点 继承树 常用方法 entrySet 方法 HashMap 特点 HashMap 的重要常量 存储结构 jdk1.8 总结 面试题 HashMap存储自定义类型键值 LinkedHa ...
- 在springboot pom文件配置过程,`spring-boot-maven-plugin`配置出错的问题解决及配置过程出现问题的一些思考
在springboot pom文件配置过程,spring-boot-maven-plugin配置出错的问题解决及配置过程出现问题的一些思考 解决方法一: 也是最简单的方法,可能是maven没有来得及导 ...