02-css的选择器

css的选择器:1.基本选择器 2.高级选择器

 

基本选择器包含:

1.标签选择器
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

body{color:gray;font-size: 12px;
}
/*标签选择器*/
p{color: red;
font-size: 20px;
}
span{color: yellow;
}

2.id选择器
# 选中id

同一个页面中id不能重复。
任何的标签都可以设置id 
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

 1 #box{2     background:green;3 }4             5 #s1{6     color: red;7 }8 9 #s2{
10     font-size: 30px;
11 }

 

3.类选择器

3.1 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。

3.2 同一个标签中可以携带多个类,用空格隔开


类的使用,能够决定前端工程师的css水平到底有多牛逼?

答案:一定要有”公共类“的概念

1 .lv{2     color: green;3 4 }5 .big{6     font-size: 40px;7 }8 .line{9     text-decoration: underline;
10 }

 

1 <!-- 公共类    共有的属性 -->
2     <div>
3         <p class="lv big">段落1</p>
4         <p class="lv line">段落2</p>
5         <p class="line big">段落3</p>
6     </div>
7     

 

总结:

  • 不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
  • 每个类要尽可能的小,有公共的概念,能够让更多的标签使用

玩好了类 就等于玩好了css中的1/2

到底使用id还是用class?
答案:尽可能的用class。除非一些特殊情况可以用id

原因:id一般是用在js的。也就是说 js是通过id来获取到标签

 

转载于:https://www.cnblogs.com/zh-lei/p/9244901.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iphoneX样式兼容

// 1.viewport meta 标签增加属性viewport-fitcover // 2.body元素增加样式 body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } // 3.如有fixed底部的元素&#xff0c;也增加上面样式 xxx { padding-bottom: constant…

学成在线--19.新增课程(数据字典)

文章目录一.介绍二.数据模型三.数据模型类四.字典查询API接口五.服务器端1.Dao2.Service3.Controller一.介绍 在新增课程界面需要选择课程等级、课程状态等&#xff0c;这些信息统一采用数据字典管理的方式。 本项目对一些业务的分类配置信息&#xff0c;比如&#xff1a;课程…

范式简介

范式是符合某一种级别的关系模式的集合。关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。范式的种类&#xff1a; 第一范式(1NF) 第二范式(2NF) 第三范式(3NF) BC范式(BCNF) 第四范式(4NF) 第五范式(5NF) 一个低一级范式的关系模式&#xff0c;通过模…

程序员的进化

对于很多同学来说&#xff0c;他们对程序员的职业生涯非常关注。而这本质上是一个进化的过程。我们将如何进化&#xff1f;在每个进化阶段我们应该如何提高自己&#xff1f;下面的文章根据我自己的切身经历和阅读过的书&#xff0c;为程序员每个阶段的进化提供了不同的学习思路…

【树形dp】vijos1144小胖守皇宫

细节很精妙 描述 huyichen世子事件后&#xff0c;xuzhenyi成了皇上特聘的御前一品侍卫。 皇宫以午门为起点&#xff0c;直到后宫嫔妃们的寝宫&#xff0c;呈一棵树的形状&#xff1b;某些宫殿间可以互相望见。大内保卫森严&#xff0c;三步一岗&#xff0c;五步一哨&#xff0c…

手机号码归属地及运营商查询

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL;public class NewMobile {public stati…

redhat6.5手动配置网络

2、手动设置ip地址如果虚拟机不能自动获取IP&#xff0c;只能手动配置&#xff0c;配置方法如下&#xff1a;输入命令#vi /etc/sysconfig/network-scripts/ifcfg-eth0 [编辑网卡的配置文件]输入上述命令后回车&#xff0c;打开配置文件&#xff0c;使用方向键移动光标到最后一行…

学成在线--20.新增课程(最后完善)

文章目录一.效果展示二.服务端1.Api接口2.Dao3.Service4.Controller三.前端1.页面完善1&#xff09;创建course_add.vue页面2&#xff09;course_add.vue页面路由3&#xff09;course_list.vue中添加链接2.查询数据字典1&#xff09;视图中代码2&#xff09;定义Api方法3&#…

http协议工作流程

用户单机鼠标后所发生的事件过程如下&#xff1a; &#xff08;1&#xff09;浏览器分析链接所指向页面的URL。 &#xff08;2&#xff09;浏览器向DNS服务器请求解析URL的IP地址。 &#xff08;3&#xff09;域名系统DNS解析出URL对应的IP地址。 &#xff08;4&#xff09…

html里面表格问题

表格问题汇总&#xff1a; 现代网站中表格的用武之地已经很少了&#xff0c;但是一些框架&#xff0c;如bootstorp还是会用到的&#xff0c;所以还是需要了解掌握。本随笔只涉及开发过程中遇到的表格问题&#xff0c;不做其他拓展。 1、caption代表的是表格元素的标题。至于标题…

利用Underscore求数组的交集、并集和差集

1 数组交集函数——intersection 数组的交集是指包含多个数组中的共同元素的一个数组&#xff0c;求数组的交集就是找出给定数组中的共有元素。 下面实现一个求两个数组交集的函数。 判断数组是够包含指定值&#xff0c;使用Array.indexOf就可以。所以我们可以遍历第一个参数数…

RT-Thread简介

RT-Thread简介 RT-Thread是一款完全由国内团队开发维护的嵌入式实时操作系统&#xff08;RTOS&#xff09;&#xff0c;具有完全的自主知识产权。 经过16个年头的沉淀&#xff0c;伴随着物联网的兴起&#xff0c;它正演变成一个功能强大、组件丰富的物联网操作系统。 RT-Thre…

调用第三方API ,实现手机号码归属地及运营商查询

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 运行结果&#xff1a; 中国电信 西双版纳 西双版纳,中国电信 代码&#xff1a; import java.io.BufferedReader; import java.io.I…

学成在线--21.课程信息修改

文章目录一.需求分析二.课程管理导航页面1.定义course_manage.vue为课程管理页面2.创建各个信息管理页面3.创建路由三.服务端1.Api接口1&#xff09;根据课程ID查询课程信息2&#xff09;修改课程信息2.Dao3.Service4.Controller四.前端1. 完成course_baseinfo.vue页面2.API方法…

HTTP协议特点

&#xff08;一&#xff09;HTTP协议是无状态的。也就是说&#xff0c;同一个客户第二次访问同一个服务器上的页面时&#xff0c;服务器的响应与第一次被访问时相同。服务器不记得访问过得这个用户&#xff0c;也不记得为这个客户服务过多少次。 &#xff08;二&#xff09;HT…

C#曲线分析平台的制作(四,highcharts+ajax加载后台数据)

在上一篇博客&#xff1a;C#曲线分析平台的制作&#xff08;三&#xff0c;三层构架echarts显示&#xff09;中已经完成了后台的三层构架的简单搭建&#xff0c;为实现后面的拓展应用开发和review 改写提供了方便。而在曲线分析平台中&#xff0c;往往有要求时间轴联动功能&…

国际C语言混乱代码大赛结果公布

国际C语言混乱代码大赛&#xff08;IOCCC, The International Obfuscated C Code Contest&#xff09;是一项国际编程赛事&#xff0c;从1984年开始&#xff0c;每年举办一次&#xff08;1997年、1999年、2002年、2003年和2006年例外&#xff09;。目的是写出最有创意的最让人难…

JDBC连接数据库(一)

原文地址http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html JDBC连接数据库 创建一个以JDBC连接数据库的程序&#xff0c;包含7个步骤&#xff1a; 1、加载JDBC驱动程序&#xff1a; 在连接数据库之前&#xff0c;首先要加载想要连接的数据库的驱动到JVM…

eclipse加速之禁用 JS、jsp 等文件的语法验证

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 去除eclipse的JS验证&#xff1a; 将windows->preference->Java Script->Validator->Errors/Warnings-> Enable Javascr…

学成在线--22.课程营销

文章目录一.需求分析二.数据模型三.服务端1.Api接口1&#xff09;查询课程营销信息2&#xff09;更新课程营销信息2.Dao3.Service4.Controller四.前端1.Api 方法2.编写 course_marketinfo.vue1&#xff09;template2&#xff09;数据对象3&#xff09;保存方法4&#xff09;在m…