属性选择器 1.1. 属性存在性选择器 1.2. 属性值直接匹配选择器 1.3. 属性值正则匹配选择器 2. AMCSS——基于HTML属性的CSS模块化技术 3....属性选择器 The CSS attribute selector matches elements based on the presence or value of a given attribute...属性存在性选择器 语法： [attr] Represents elements with an attribute name of attr. 示例： <!...属性值直接匹配选择器 语法： [attr=value] Represents elements with an attribute name of attr whose value is exactly...属性值正则匹配选择器 语法： [attr^=value] Represents elements with an attribute name of attr whose value is prefixed
css选择器 什么是选择器 CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。...选择器的分类 基本选择器：共有 5 个基本选择器，是 CSS 选择器的最为基本的用法。 层级选择器：共有 4 个层级选择器，是根据 HTML 元素之间的关系来定位 HTML 元素。...组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。 伪类选择器：允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。...这个选择器只会应用在一个元素上，你无法用它排除所有父元素。 伪元素选择器 CSS 中伪元素选择器的用法与伪类选择器的用法类似，都是在指定 CSS 选择器增加关键字。...伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。
第2章 选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。...jQuery选择器有很多，基本兼容了CSS所有的选择器，并且jQuery还添加了很多更加复杂的选择器。...2.1 jQuery基本选择器（重点） 名称 用法 描述 ID选择器 $(’#id’); 获取指定ID的元素 类选择器 $(’.class’); 获取同一类class的元素 标签选择器 $(‘div’)...语法模板： 00-语法模板.html（需要包含jquery.js） //常用选择器 //根据id获取元素 获取到的结果：类数组对象...prev() $(‘li’).prev() 找上一次兄弟 closest $(‘li’).closest(‘ul’) 找最近一个祖先元素 语法模板： 00-语法模板.html（需要包含jquery.js
如果我们不选择它们，这个地方就不存在这个元素了，选择后就会多了一个元素 复合选择器 * 或则 div 必须写在最前面 首先复合选择器是以多个简单选择器构成的... —— 子孙选择器，单个元素必须要有空格左边的一个父级节点或者祖先节点 ">" —— 父子选择器，必须是元素直接的上级父元素 ..."~" —— 邻接关系选择器 "+" —— 邻接关系选择器 "||" —— 双竖线是 Selector Level 4 才有的...简单选择器计数 我们从一个案例出发，选择器优先级是对一个选择器里面包含的所有简单选择器进行计数。...所以选择器列表不被视为一个完整的选择器（也就是逗号分隔的选择器），因为选择器列表中间是以逗号分隔开的复杂选择器来进行简单选择器计数的。
伪对象选择器 语法： 元素:first-letter 选择第一个字符 元素:first-line 选择第一行 总结： 1.这是选择器，不是css属性，不能写在{}中 2.所谓的元素
八、属性选择器 1.[属性名] 选择具有该属性的元素 示意图 2.[属性=值]（重点） 选择具有该属性且等于该值的元素 示意图 3.
五、常用选择器 1.通配选择器（了解） 给所有标签添加样式，*{css样式} 示意图 ?...多学一招：通常只是用来去掉所有代码的边距，因为每个浏览器的边距不同，有的8个像素，有的7个像素，所以干脆会全部去掉，重新设置，保证浏览器的每个边距都一致 2.后代选择器（掌握） 选择元素里面的元素，外层元素和内层元素中间用空格隔开...3.子元素选择器（掌握） 选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式} 示意图 ? 案例题： <!...（难) 4.相邻元素选择器（了解） 选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式} 示意图 ?
属性选择器 [属性名] 语法： [属性名]{} [属性名=属性值] 语法： [属性名=属性值]{} [属性名~=属性值]（选择多个值中的一个） 语法： [属性名~=属性值]{} [属性名
通配选择器 语法： *{} 将页面中所有标签都选中 使用场景：通常设置*{padding:0;margin:0;}
相邻元素选择器 哥哥+弟弟{} /*通过哥哥选择到弟弟 */ 例： div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */ color:red; } </...总结： 1.哥哥和弟弟中间用的符号：+ 2.修饰的是弟弟标签 3.不能通过弟弟选哥哥 关系选择器：后代(空格)，子元素(大于号)，兄弟(加号)
阅读目录 一 基本选择器 二 后代选择器、子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器...，通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复 3、引用id一定要加# 4、id的命名只能由字符...vs子元素选择器 三 兄弟选择器 1、相邻兄弟选择器，CSS2推出 #1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性 #2、格式 选择器1+选择器2 { 属性：值; } #3、...#2、格式： 选择器1~选择器2 { 属性：值; } #3、注意点： 1、通用兄弟选择器必须用~来链接 2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签 无论有没有被隔开，...1、交集选择器 #1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性 #2、格式： 选择器1选择器2 { 属性：值; } #3、注意： 1、选择器与选择器之间没有任何链接符号
male', age: 25 } 只对非法标识符的属性使用引号，eslint: quote-props 原因：因为通常来说我们认为这样主观上会更容易阅读，这样会带来代码高亮上的提升，同时也更容易被主流 JS...bar.css' // good import fooSass from 'foo.scss' import barCss from 'bar.css' 迭代器 建议使用 JS 更高优先级的函数代替...// true // 数组(即使是空数组)也是对象，对象等于true } 分号 Standard 的规范是不使用分号的，我建议统一使用分号，代码更加清晰 关于应不应该使用分号的讨论有很多，好的 JS
-- 基础选择器之通用选择器 1、在head中添加样式（演示方便，可以使用link） 2、匹配所有标签，所有标签的样式都会受到影响 --> 基础选择器之通用选择器 基础选择器之通用选择器 基础选择器之标签选择器 基础选择器之标签选择器 基础选择器之id选择器 基础选择器之id选择器 基础选择器之class选择器 基础选择器之类class选择器 基础选择器之class选择器
专栏介绍 【前端网页】 目前主要更新HTML，一起学习一起进步。...本期介绍 本期主要介绍CSS进阶之复合选择器 文章目录 1.概述 2.包含选择器 1.1 概述及格式 1.2 案例代码 3.子对象选择器 1.2 概述及格式 1.3. ...常用的复合选择器：包含选择器、子对象选择器、并集选择器、伪类选择器 2.包含选择器 1.1 概述及格式 包含选择器又名后代选择器。...格式： 选择器 1 选择器 2 …..{ /*css 样式代码 */ } 意思为：搜索选择器 1 下的所有的 选择器 2 1.2 案例代码 准备代码：仅要求 div...建议使用并集选择器替代。 5.伪类选择器 1.1 概述及格式 伪类选择器：指不依靠元素 class 类名筛选，通过元素特征筛选的选择器。
3、可以使用自定义的属性 --> 属性选择器之attribute <!...3、可以使用自定义的属性 --> 属性选择器之attribute=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute|=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute^=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute$=value <!
-- 组合选择器 1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。 2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。...--> 组合选择器之多元素选择器 组合选择器之多元素选择器 组合选择器之后代选择器 组合选择器之后代选择器 组合选择器之后代选择器...--> 组合选择器之子代选择器 组合选择器之子代选择器 组合选择器之毗邻元素选择器 组合选择器之毗邻元素选择器
下面的选择器优先级递增： 类型选择器（h1, :before等） 类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover） ID 选择器（例如，
第01阶段.前端基础.CSS基础选择器 CSS选择器（重点） 学习目标： 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1....选择器分为基础选择器和 复合选择器，我们这里先讲解一下 基础选择器。 2....CSS基础选择器 2.1 标签选择器 概念： 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。...命名规范： 见附件（Web前端开发规范手册.doc） 命名是我们通俗约定的，但是没有规定必须用这些常用的命名。...id选择器和类选择器最大的不同在于 使用次数上。 pink老师 总结他们 类选择器我们在修改样式中，用的最多。
首先HTML代码 HTML Code JS代码 1.DOM对象与JQuery包装集 1.通过document.getElementById()，document.getElementsByName...JQuery包装集 在所有tr标签中查找id为text11元素的JQuery包装集 var text11_query=$("#text11","tr"); ===================jQuery选择器...基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$("#text11"); 3.根据class...同时选择多个符合条件的JQuery包装集用,号分隔条件 var text_query=$("#text11,.text12"); 5.选择所有DOM元素 var all_query=$("*"); 2.层次选择器
二、选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三、基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id...id选择器 匹配特定 id 的元素 1 * 通用元素选择器 匹配页面任何元素（这也就决定了我们很少使用） 2 element 元素选择器 选择HTML元素 1 四、组合选择器 选择器 含义 作用 CSS...匹配E元素之后的相邻的同级元素F 2 E~F 普通相邻选择器（弟弟选择器） 匹配E元素之后的同级元素F（无论直接相邻与否） 3 五、属性选择器 选择器 示例 示例说明 CSS [attribute]...1 :active a:active 选择正在活动链接 1 :focus input:focus 选择元素输入后具有焦点 2 所有伪类选择器在前端面试题-伪类和伪元素 七、伪元素选择器 选择器 作用...1 所有伪元素选择器在前端面试题-伪类和伪元素 扩展阅读 前端面试题-clearfix（清除浮动） 前端面试题-BFC(块格式化上下文)
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
