css选择器

目录 BOM window对象 window的子对象 navigator对象 screen对象 history 对象 location对象 弹出框 计时 DOM 查找标签 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点 替换节点 属性节点 获取值操作 class操作 指定css操作 事件 常用事件 js绑定事件的方式 解决 js代码体现运行报错的情况 jQuery jQuery介绍 jQuery的使用 jQuery语法结构 查找标签 基本选择器 层次选择器 BOM BOM指浏览器对象模型， 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window； window对象 所有浏览器都支持window对象，它表示浏览器窗口。 window是浏览器中的顶级对象，所有JavaScript的全局对象、函数以及变量都会成为window中的对象的属性或者方法，在调用window是可以省略“window” 常用的window方法 window.innerHeight // 获得浏览器窗口的内部高度 window.innerWidth // 获得浏览器窗口的内部宽度 window.open() // 打开新窗口 window.close() // 关闭当前窗口 window的子对象 navigator对象 window.navigator浏览器对象

目录 BOM window对象 window的子对象 navigator对象 screen对象 history 对象 location对象 弹出框 计时 DOM 查找标签 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点 替换节点 属性节点 获取值操作 class操作 指定css操作 事件 常用事件 js绑定事件的方式 解决 js代码体现运行报错的情况 jQuery jQuery介绍 jQuery的使用 jQuery语法结构 查找标签 基本选择器 层次选择器 BOM BOM指浏览器对象模型， 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window； window对象 所有浏览器都支持window对象，它表示浏览器窗口。 window是浏览器中的顶级对象，所有JavaScript的全局对象、函数以及变量都会成为window中的对象的属性或者方法，在调用window是可以省略“window” 常用的window方法 window.innerHeight // 获得浏览器窗口的内部高度 window.innerWidth // 获得浏览器窗口的内部宽度 window.open() // 打开新窗口 window.close() // 关闭当前窗口 window的子对象 navigator对象 window.navigator浏览器对象

css基础选择器 标签选择器(元素选择器) 标签选择器是指html标签名作为选择器，按标签名分类 标签名 {属性:属性值;**} or 元素名{属性:属性值;**} 标签选择器的最大优点就是能快速为页面中同类型的的标签统一样式，不能涉及差异化 类选择器 类选择器使用"."来进行标识，后面紧跟类名 .类名 {属性: 属性值} 标签调用的时候用 class="类名" 即可 类选择最大的优势是可以为元素对象定义单独或相同的样式 1.长名称或词组可以使用中横线来为选择器命令 2.不建议使用下划线来命名css选择器 3.不要纯数字、中文等命名，尽量使用英文来命名 ID选择器 类选择器使用"#"来进行标识，后面紧跟id #类名 {属性: 属性值} 标签调用的时候用 id="id" 即可 来源： https://www.cnblogs.com/ivy-blogs/p/11884545.html

1、html常用标签 常用标签 html head body div span br hr a img i b u h1~h6 p ul>li table>(caption)thead|tbody|tfoot>tr>th|td form>input|label|textarea|select>option 2、css选择器，css三种布局 选择器： 基础：* div .div #div !important 群组：div,h1,a {} 后代子代：body div | body > div 兄弟相邻：.d1~.d2 | .d1+.d2 交叉选择器：.d1.d2 | div.d1 div.d1#d.d2 <div class="d1 d2" id="d"> 属性选择器：[titile] 伪类选择器：:hover :active :focus :blur :change :checked :after{content:""} :before{content:""} :nth-child() :nth-of-type() 3、js四种变量，js字符串、数组、对象的操作方法，js可变长参数 四种变量： let a = 1; // 不可以重复声明var b = 2; // 可以重复声明 var b = 4;const c = 3; // 常量d = 4; // 全局js字符串、数组

display:none和visibility:hidden的区别？ display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。 visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。 CSS中 link 和@import 的区别是？ (1) link属于HTML标签，而@import是CSS提供的; (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; (3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; (4) link方式的样式的权重 高于@import的权重. position的absolute与fixed共同点与不同点？ 共同点： 1.改变行内元素的呈现方式，display被置为block；2.让元素脱离普通流，不占据空间；3.默认会覆盖到非定位元素上 不同点： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。 CSS的盒子模型？ IE 盒子模型、标准 W3C 盒子模型； IE的content部分包含了 border 和 pading; 盒模型包括内容(content)、填充(padding)、边界(margin)、

目录 form表单 form标签 input标签 button标签 select标签---下拉框选择 textarea标签---多行普通文本 CSS简介 CSS: 层叠样式表 基本选择器 元素选择器 id选择器 类选择器 通用选择器 组合选择器 属性选择器 分组与嵌套 伪类选择器 选择器优先级 form表单 能够获取用户输入的信息(文本信息, 选择信息, 上传的文件信息), 并将用户输入的信息全部发送给后端 form标签 参数: action, 控制数据提交的地址, 三种书写格式: 不写, 默认朝当前页面所在的地址提交数据 写全路径 ( https://www.baidu.com ) 只写路径后缀 (/index/), 前面地址固定, 会自动根据后缀识别并添加前面地址 method, 控制数据提交的方式 get, form表单默认是get请求 post enctype: encodetype, 编码类型 multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据 enctype的默认值不能用于文件上传 <form action="" method="post" enctype="multipart/form-data"> <!--...--> </form> input标签 通常情况下input需要结合label一起使用 <p> <label

<table> <tr> <td>row1 col1</td> <td>row1 col2</td> <td>row1 col3</td> </tr> <tr> <td>row2 col1</td> <td>row2 col2</td> <td>row2 col3</td> </tr> <tr> <td>row3 col1</td> <td>row3 col2</td> <td>row3 col3</td> </tr> <tr> <td>row4 col1</td> <td>row4 col2</td> <td>row4 col3</td> </tr> <tr> <td>row5 col1</td> <td>row5 col2</td> <td>row5 col3</td> </tr> </table> <script type="text/javascript"> console.log($('table').find('tr').eq(2).find('td').eq(2).html()); console.log($('table tr:eq(2) td:eq(2)').html()); console.log($('table tr:nth-of-type(3) td:nth-of-type(3)').html()); console.log($('table tr td

1.CSS样式（选择器）的优先级？ 1.1 权重的计算规则 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用） 第二等：ID选择器，如：#header，权值为0100. 第三等：类选择器、如：.bar， 权值为0010. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000. 继承的样式没有权值。 [!NOTE] CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他 1.2 实际案例 <style> a{color: yellow;} /*权值：0,0,0,1*/ div a{color: green;} /*权值：0,0,0,2*/ .demo a{color: black;} /*权值：0,0,1,1*/ .demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/ .demo *[type="text"]{color: grey;} /*权值：0,0,2,0*

css :cascading Style sheets 层叠样式表 　　是用于控制页面布局和样式的 css好处:功能强大,将html页面和样式进行分离 　　降低耦合度,开发效率更高 css和htnl使用 　　1内联样式<div style = "color="red"></div> //不推荐 　　2内部样式 --较为常用 　　　　<style> 　　　　　　　　div{ 　　　　color:red; 　　　　　　　　　　} 　　　　</style> 　　　　<div><div> 　　外部样式 　　在head标签定义link属性 　　　　<link rel="stylesheet" href="css/a.css"> 　　css选择器 语法 　　　　　　　选择器 { 　　　　　　　　属性名1:属性值1 　　　　　　　　属性名2:属性值2　　 　　　　　　} 　　　　什么是选择器:是筛选具有相同特征的元素 　　选择器分类 　　　　　　基础选择器 　　　　　　　　1类选择器 　　　　　　　　　　.类名 {} 　　　　　　　　2id选择器 　　　　　　　　　　#选择器名{} 　　　　　　　　3元素选择器器 　　　　　　　　　　元素名{} 　　　　　　　　4并集选择器 　　　　　　　　选择器1,选择器2....{} 　　　　扩展选择器 　　　　　　选择所有元素 　　　　　　　　*{} 　　

css语法:选择器{声明}; 声明由 css属性:属性值; 组成 p{background-color: #ccc;} css属性 width 宽度(单位：px) height 高度（单位:px） background-color 背景颜色(颜色的英文或者十六进制颜色) color 字体颜色 font-size 字体大小 …… css注释 /*h3{width:300px;}*/ 单行注释 /* p{ width:300px; height: 300px; } */多行注释 css样式表 1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> h3{ width:300px; height:300px; background-color:red; } </style> </head> <body> <h3>内部样式表</h3> </body> </html> 2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件