课时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 类选择器.属性 ...
随机推荐
- xss攻击汇总--转
(1)普通的XSS JavaScript注入<SCRIPT SRC=http://3w.org/XSS/xss.js></SCRIPT>(2)IMG标签XSS使用JavaScr ...
- nyoj 139——我排第几个|| nyoj 143——第几是谁? 康托展开与逆康托展开
讲解康托展开与逆康托展开.http://wenku.baidu.com/view/55ebccee4afe04a1b071deaf.html #include<bits/stdc++.h> ...
- jQuery前端数据通用验证库,解放你的双手
这个简易的验证库,应该能完成90%的基本验证,包括失去焦点时的验证,以及点击提交按钮时的验证.后端的那我就无能为办了,只能是谁用就谁自个儿去写了:). 先上一段调用的代码吧,JS代码说少也不少了,就不 ...
- 循环结构 while
while 循环语句可以根据某些条件重复执行一条t-sql 语句或一个语句块 语法: while (条件) begin 语句或语句块 end 程序调试 alt+f5 启动调试 f9 切换断点 f10 ...
- javascript学习:闭包和prototype原型使用基础
闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 t ...
- servlet中this.getServletContext(); this.getServletConfig().getServletContext(); 的区别
WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.ServletConfig对象中维护了ServletContext对象的引用,开发人 ...
- 机器学习kNN
from numpy import * import operator def createDataSet(): group = array([[1.0, 1.1], [1.0, 1.0], [0, ...
- 移除script标签引起的兼容性问题
一.应用场景: 有时候我们需要动态创建script标签实现脚本的按需加载,我们会为script标签绑定onload或者onreadystatechange事件,用于检测动态脚本是否加载并执行完毕,在事 ...
- jquery简介(一)
摘要:简要介绍jquery的起源,以及为什么需要使用jquery. jquery的优点 jquery体量小,加载速度快,其本身具有的功能使JavaScript应用程序开发人员的工作变得分外轻松.其中最 ...
- wxpyhon 对话框
Python内置了好多定义好了的对话框供我们使用,这里先介绍三个最常用的: 1 Message dialog 2 Text entry 3 Choosing from a list 当然python还 ...