选择器<style>

为了让.html代码更加简洁,这里引入选择器style

本文总共介绍选择器的四种使用方式

一、选择器的四种形式

1.ID选择器

id表示身份,在页面元素中的id不允许重复,因此id选择器只能选择单个元素

2.类别选择器

选择拥有该类别的多个元素

3.标签选择器

根据标签名称,选择对应的所有标签

4.通用选择器

针对页面中的所以标签都生效

二、选择器的使用

这是一段没有使用选择器的html代码:

  1. <!--这是一段未使用选择器的代码-->
  2. <!DOCTYPE html>
  3. <html style="background-color: gainsboro">
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. </head>
  8. <body style="margin: 0;">
  9. <div id="banner">
  10. <img src="img1/img2.png" style="width: 100%;" >
  11. </div>
  12. <div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
  13. <a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a>
  14. <a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a>
  15. <a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决方案</a>
  16. <a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a>
  17. <a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a>
  18. </div>
  19. <div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">
  20. 运用先进技术积极推动改变,让整个世界更美好。
  21. </div>
  22. </body>
  23. </html>

使用选择器后:

  1. <!--添加完选择器后的代码-->
  2. <!DOCTYPE html>
  3. <html style="background-color: gainsboro">
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <style type="text/css">
  8. #navigation{
  9. height: 80px;text-align: center;line-height: 80px;background-color: white;
  10. }
  11. #botton{
  12. height: 40px;text-align: center;line-height: 40px;color: grey;
  13. }
  14. .nav{
  15. text-decoration: none; color: black; margin: 0 15px;
  16. }
  17. #banner img{
  18. width: 100%;
  19. }
  20. </style>
  21. </head>
  22. <body style="margin: 0;">
  23. <div id="banner">
  24. <img src="img1/img2.png">
  25. </div>
  26. <div id="navigation">
  27. <a href="#" class="nav" >关于我们</a>
  28. <a href="#" class="nav">我们的故事</a>
  29. <a href="#" class="nav">产品和解决方案</a>
  30. <a href="#" class="nav">新闻和活动</a>
  31. <a href="#" class="nav">联系我们</a>
  32. </div>
  33. <div id="botton">
  34. 运用先进技术积极推动改变,让整个世界更美好。
  35. </div>
  36. </body>
  37. </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样式

  1. <style>
  2. #navigation{
  3. height: 80px;text-align: center;line-height: 80px;background-color: white;
  4. }
  5. <\style>

一个简单的id选择器就完成了,为id为navigation的标签添加括号中的样式。

2.类别选择器

与id选择器类似

(1)为标签添加class属性

<a href="#" class="nav" >关于我们</a>

(2)head中的格式:.class名{}

  1. .nav{
  2. text-decoration: none; color: black; margin: 0 15px;
  3. }

为所有class类名为nav的标签添加此属性

3.标签选择器

这个是最简单的,标签名加大括号

直接上例子:(为所有<a>标签添加属性)

  1. a{
  2. text-decoration: none; color: black; margin: 0 15px;
  3. }

这里还有个特殊的使用方法

例如这段代码:

  1. <div id="banner">
  2. <img src="img1/img2.png">
  3. </div>

为id为banner的div标签中的所有img标签添加属性:

  1. #banner img{
  2. width: 100%;
  3. }

嗯。。。# id 标签名{}

4.通用选择器

  1. *{}



这里涉及到一个选择器的权重问题,后面会专门介绍权重的计算问题,这里先简单的说一下。

选择器范围越小,优先级越高

行内样式>id选择器>类选择器>标签选择器>通用选择器

关于选择器权重问题,参考这篇文章:https://www.cnblogs.com/orangekk/p/14239135.html

HTML选择器的四种使用方法的更多相关文章

  1. C#四种深拷贝方法

    //四种深拷贝方法 public static T DeepCopyByReflect<T>(T obj) { //如果是字符串或值类型则直接返回 if (obj is string || ...

  2. C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏

    C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...

  3. CSS当中color的四种表示方法

    这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...

  4. C语言中返回字符串函数的四种实现方法

    转自C语言中返回字符串函数的四种实现方法 其实就是要返回一个有效的指针,尾部变量退出后就无效了. 有四种方式: 1.使用堆空间,返回申请的堆地址,注意释放 2.函数参数传递指针,返回该指针 3.返回函 ...

  5. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  6. Django的POST请求时因为开启防止csrf,报403错误,及四种解决方法

    Django默认开启防止csrf(跨站点请求伪造)攻击,在post请求时,没有上传 csrf字段,导致校验失败,报403错误 解决方法1: 注释掉此段代码,即可. 缺点:导致Django项目完全无法防 ...

  7. HashMap的四种遍历方法,及效率比较(简单明了)

    https://yq.aliyun.com/ziliao/210955 public static void main(String[] args) { HashMap<Integer, Str ...

  8. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  9. AJPFX关于Java中运用数组的四种排序方法

    JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法.快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现.冒泡法是运用遍历数组进行比 ...

随机推荐

  1. freecodecamp挑战

    freecodecamp挑战 2020年3月21初次挑战 完成45关挑战 2020年3月22日 完成至101关 2020年3月23日 完成至144关 2020年3月24日 完成至187关 css结束 ...

  2. Redis常用技术

    Xml配置: <?xml version='1.0' encoding='UTF-8' ?> <!-- was: <?xml version="1.0" e ...

  3. 回调与Promise

    Promise 对象就是用于表示一个异步操作的最终状态(成功或失败).它的流程就是在什么状态下需要执行什么样的操作. resolve简单理解就是一步操作执行成功后的回调函数 then是Promise对 ...

  4. win7上帝模式详解

    最近,Windows7"GodMode"(上帝模式)被国内各大网站和论坛炒得沸沸扬扬."GodMode"始见于国外网站"GeekInDisguise& ...

  5. 第一次实战:XX漫画的XSS盲打

    第一次实战:XX漫画的XSS盲打 XSS盲打 盲打是一种惯称的说法,就是不知道有没有XSS漏洞存在的情况下,不顾一切的输入XSS代码在留言啊投诉窗口啊之类的地方,尽可能多的尝试XSS的语句,就叫盲打. ...

  6. throws声明异常中断式处理异常

    1.throws 编译期异常,一直往上抛最后是JVM处理(打印并中断程序) 2.声明多个或者直接声明父类

  7. Vue设置全局cookies样式

    ''' 配置全局cookies样式 下载:cnpm install vue-cookies import cookies from 'vue-cookies' Vue.prototype.$cooki ...

  8. [第四篇]——Windows Docker 安装之Spring Cloud直播商城 b2b2c电子商务技术总结

    Windows Docker 安装 Docker 并非是一个通用的容器工具,它依赖于已存在并运行的 Linux 内核环境. Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境, ...

  9. Map集和

    目录 Map 特点 继承树 常用方法 entrySet 方法 HashMap 特点 HashMap 的重要常量 存储结构 jdk1.8 总结 面试题 HashMap存储自定义类型键值 LinkedHa ...

  10. 在springboot pom文件配置过程,`spring-boot-maven-plugin`配置出错的问题解决及配置过程出现问题的一些思考

    在springboot pom文件配置过程,spring-boot-maven-plugin配置出错的问题解决及配置过程出现问题的一些思考 解决方法一: 也是最简单的方法,可能是maven没有来得及导 ...