课时70.id选择器和类选择器(理解)
1.id和class的区别?
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称
2.id选择器和class选择器的区别?
id选择器是以#开头
class选择器是以.开头
3.在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的,除非特殊情况,否则不要使用id去设置样式
4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
在这里做一个练习,设置如下样式
我们应该怎么做呢?
第一种方法:
第二种方法:
这两者在显示样式上没有任何的区别
通过这个可以看出来你有没有开发经验,在以后的开发中,我们可以把公共的东西抽到一个类选择器里,然后让标签和这个类选择器绑定即可,然而这个是有一定前提条件的,在我们以后的开发中会慢慢知道什么时候应该抽取,什么时候不应该抽取。
课时70.id选择器和类选择器(理解)的更多相关文章
- id选择器、类选择器、属性选择器
在网页编辑时,通常要对样式进行各种设置.我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了. 今天,跟大家分享一下几个常用的选择器:id选择器.类选择器.属性选择器. id选择器 ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- html5--6-11 CSS选择器7--伪类选择器
html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...
- html5--6-10 CSS选择器7--伪类选择器
html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...
- html5--6-9 CSS选择器6--伪类选择器
html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
随机推荐
- Linux IO
Linux 系统编程(IO) 工具 strace: 根据系统调用 od -tcx: 查看二进制 函数参数 使用const修改的指针为传入参数 不使用const的指针为传出参数 string操作的函数 ...
- 【linux相识相知】sed命令
在之前的博客中我们介绍了文本三剑客中grep,本次博客就另外一名剑客——sed做出详细的描述,sed真的是一款强大的工具.下面让我们来一起看一下吧! 概述和工作机制 SED的英文全称为Stream E ...
- 如何优雅地进行错误处理(clean code阅读笔记之六)
错误处理是十分必要的,但是如果对错误处理使用不当则会让代码变得十分臃肿,让阅读者看不清代码的逻辑,更严重的是,这也会让程序变得十分脆弱.本文中将列出一些使用错误处理的技巧,帮助你写出既简洁又健壮的代码 ...
- Java 枚举 获取前后元素,下一个元素
https://blog.csdn.net/jiangshanwe/article/details/79119219
- hibernate事务管理 (jdbc jta)
hibernate的两种事务管理jdbc 和jta方式.下边说说两者的区别一.说明一下jdbc和jta方式事务管理的区别:JDBC事务由Connnection管理,也就是说,事务管理实际上是在JDBC ...
- Vector 、ArrayList、LinkedList比较
这三者都可以随机访问,也就是支持通过索引查找数据. 都是有序(可以实现元素怎么进怎么出) Vector和ArrayList比较 相同之处 1 它们都是List 它们都继承于AbstractList,并 ...
- 【Android】1.0 安卓生猛上手
1.Android操作系统,由安迪鲁宾发明,原发明用于照相机操作系统,市场反应惨淡,需求不足,后2005年被谷歌收购,用于智能手机操作系统. 2.logo来源:设计师上厕所看到男女厕所区别标志联想创作 ...
- 转:SQL Server附加数据库提示“版本为661,无法打开,支持655版本……”
在我们使用别人导出的数据库的时候,有时候我们会通过附加数据库的方法,把别人导出的数据库附加到我们的电脑中,这时,或许你会遇到这种问题,附加时,提示版本为XXX,无法打开,支持AAA版本. 这是怎么回事 ...
- Angular js ng-bind 和ng-module的区别
1.ng-bind 是从$scope ->view 的单向绑定 ,<span ng-bind="object.***"></span>只用于展示数据 ...
- Ruby系列文章之1---开发者应该熟悉的10个工具
1. Git Git是进入Ruby这个生态圈首先最应该学会的工具.几乎所有以Ruby开发出来的套件都放在Github上.也就是不管你要下载或修改协作都需要透过Git. 2. RVM Ruby有很多种i ...