属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。...在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。...div [title] 需要说明的是，它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样)，而它们之间的空格意味着后代选择器，即选择具有该属性的元素的子元素。...注意:在大多数情况下，属性选择器中不需要引号，但是我使用它们，因为我相信它可以提高清代码的可读性，并确保边界用例能够正常工作。...现在我们已经看到了如何使用属性选择器进行选择，让我们看看一些用例。 我将它们分为两类：一般用途和诊断。 一般用途 输入类型样式的设置 你可以对输入类型使用不同的样式，例如电子邮件和电话。
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 记忆技巧： 交集选择器 是 并且的意思。...1.4 并集选择器（重点） 应用： 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。...并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。 语法： ?...任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。...: gray; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ } 1.6 复合选择器总结
HTML详解连载（5） 下面进行专栏介绍 本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记 进行适当修改。...，一个属性对应多个值的写法，各个属性值之间用空格隔开 font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写） 示例 div { font:italic 700 30px/2 楷体; } 注意...复合选择器 定义 由两个或多个基础选择器，通过不同的方式组合而成 作用 更准确、更高效的选择目标元素（标签） 后代选择器 选中某元素的后代元素 写法 父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开...子代选择器 选中某元素的子代元素（最近的子级） 选择器写法 父选择器>子选择器{CSS属性}，父子选择器之间用>隔开 并集选择器 选中多组标签设置相同的样式 写法 选择器1，选择器2，…选择器N{CSS...属性}，选择器之间用，隔开 交集选择器 选中同时满足多个条件的元素 写法 选择器1选择器2{CSS属性}，选择器之间连携，没有任何符号 注意 如果交集选择器中由标签选择器，标签选择器必须书写在最前面
自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你： $('img').on('error', function () { if(!...那么你可以在用户悬停的时候添加类到元素中，反之则删除类： $('.btn').hover(function () { $(this).addClass('hover'); }, function...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr('target...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i <
自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你： $('img').on('error', function () { if(!...那么你可以在用户悬停的时候添加类到元素中，反之则删除类： $('.btn').hover(function () { $(this).addClass('hover'); }, function...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr('target...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i
自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你： $('img').on('error', function () { if(!...那么你可以在用户悬停的时候添加类到元素中，反之则删除类： $('.btn').hover(function () { $(this).addClass('hover'); }, function...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr(...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0;
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 2、后代选择器 (重要）...并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。 语法： 上述语法表示选择元素1 和 元素2。...语法说明： 元素1 和 元素2 中间用逗号隔开 逗号可以理解为和的意思 并集选择器通常用于集体声明 并集选择器中的最后一个选择器不需要加逗号 例子： 5、伪类选择器 定义： 伪类选择器用于向某些选择器添加特殊的效果...语法： 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover、:first-child。...语法： 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
空格规范 选择器与{之间必须包含空格. 如: .class {} 属性名与之后的:符号之间不允许包含空格, 而:符号与属性值必须包含空格....如: font-size: 23px; 选择器的规范 如: // 并集选择器 .da, .shu, .coding { color: blue; } 选择器的嵌套层级不大于3级就行....CSS复合选择器 交集选择器 并集选择器 后代选择器 子元素选择器 伪类选择器 // 交集选择器 p.one 段落标签 类名为 .one // 并集选择器 .one, p , #test {color...- :link /* 未访问的链接 */ - :visited /* 已访问的链接 */ - :hover /* 鼠标移动到链接上 */ - :active /* 选定的链接...（a特殊 a里面可以放块级元素 ） 行内块元素（inline-block） （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。 （2）默认宽度就是它本身内容的宽度。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 后代选择器（重点） 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔...其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 记忆技巧： 交集选择器 是 并且的意思。...并集选择器（重点） 应用： 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。 语法： ?...任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。...记忆技巧： 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。
CSS第二天 ---- 选择器进阶： 选择器 作用 格式 示例 ⭕后代选择器 找后代 选择器之间通过 空格 分隔 .nav .mark { css } 子代选择器 找儿子 选择器之间通过 > 分隔 .nav...> .mark { css } ⭕并集选择器 找到多类元素 选择器之间通过 ，分隔 div,p,span { css } 交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.mark { css...} ⭕hover伪类选择器 选中鼠标悬停在元素上的状态 :hover a:hover { css } 选择器注意点： 后代选择器中：选择器与选择器之前通过 空格 隔开 子代只包括：儿子 并集选择器：...每组选择器可以是基础选择器或复合选择器，每组选择器通常一行写一个，提高代码的可读性 交集选择器：如果有标签选择器，标签选择器必须写在最前面 hover伪类：鼠标悬停在元素上的状态，设置样式 ---- Emmet...4️⃣权重叠加计算： （行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）（0,0,0,0) 权重叠加计算公式：（每一级之间不存在进位） ---- 本节单词有： hover repeat
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。...交集选择器」 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。...并集选择器」 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。...任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。...: gray; text-decoration: none; /* 清除链接默认的下划线*/ } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color
嵌套规则 &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。...article a { color: blue; &:hover { color: red } } 群组选择器的嵌套: 多个子选择器拥有公共父选择器,并且需要给子选择器设置通用属性的情况...+，选择header元素后紧跟的p元素 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素 ```css // 子组合选择器 article section...嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。...compressor/压缩的 Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
', 'img/hover-off.png'); 3、检查图像是否加载 有时为了继续脚本，你可能需要检查图像是否全部加载完毕： $('img').load(function () { console.log...4、自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你： $('img').on('error', function () { if(!...那么你可以在用户悬停的时候添加类到元素中，反之则删除类： $('.btn').hover(function () { $(this).addClass('hover'); }, function ()...修复的时候要小心这个问题。 12、通过文本查找元素 通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。...15、链式插件调用 jQuery允许“链式”插件的方法调用，以减轻反复查询DOM并创建多个jQuery对象的过程。
如果一个元素拥有多个CSS选择器，会按照内部 -->外部的次序进行设置渲染 - CSS 样式： 背景样式： 背景色： background-color属性： 设置背景色，接受任何颜色值 背景图像...right：右对齐 center：居中（和标签不同，后者是对元素操作，而前者只对文本有效） justify“：两端对齐 字间隔： word-spacing属性： 可以改变字或单词之间的标准间隔...blink：为文本添加闪烁效果 处理空白符： white-space属性： 文档中对 空格、换行、tab字符的处理 下面的表格总结了 white-space 属性的行为： 值 空白符 换行符 自动换行...（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。...链接样式： 链接的四种状态： a:link 普通的，未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接上方 a:active 链接被点击时刻 文本修饰： text-decoration
本例展示如何改变段落的颜色和左外边距： 这是一个段落 多重样式 如果某些属性在不同的样式表中被同样的选择器定义...text-align:right; } 垂直对齐属性设置垂直对齐，比如顶部，底部或中间： td { height:50px; vertical-align:bottom; } 表格填充 如果在标的内容中控制空格之间的边框...内联元素的例子： <span> <a> 如何改变一个元素显示 可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。...DOCTYPE> 才能保证 :hover 选择器能够有效。 CSS 图像拼合技术 图像拼合就是单个图像的集合。...有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。
，该值必须是整个单词，可以前后有空格 E[attribute\|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-” 派生选择器 派生选择器根据元素在其位置的上下文关系定义样式...伪类选择器 伪类选择器：伪类选择器和伪元素选择器 伪类以冒号(:)开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。...css中常用的伪类如下表所示： 伪类名 说明 :active 向被激活的元素添加样式 :focus 向拥有输入焦点的元素添加样式 :hover 向鼠标悬停在上方的元素添加样式 :link 向未被访问的链接添加样式...text-decoration 给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit...css内边距属性，元素的内边距在边框和内容之间。
CSS概述 CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。...那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。...属性与属性之间用 分号 隔开 属性与属性值直接按用 冒号 连接 如果一个属性有多个值的话，那么多个值用 空格 隔开。 选择器 就是指定CSS要作用的标签，那个标签的名称就是选择器。...例如，我们想对“div中的标签”和“类名为cc”的区域设置相同的样式，则可以定义如下的组合选择器： .cc, div b{/*不同选择器之间用逗号分开*/ background-color:#0000ff...a:visited 被访问后的状态。 a:hover 光标移到超链接上的状态（未点击）。 a:active 点击超链接时的状态。
字体可以写多组，中间用逗号隔开 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号 了解：http://code.ciaoca.com/style/cssfont2unicode...: 14px; } 内容 内容 一个元素可以拥有多个类名 类名和类名之间用空格隔开...伪类选择器 伪类选择器可以理解为选择的元素的一种状态，并不是如之前直接选中元素就完事了 a:link 没有被访问的时候的状态 a:visited 访问之后的状态 a:hover 鼠标移动上去之后的状态...a:active 鼠标按下的状态 伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成 a {} a:hover {} 文字的对齐 缩进 下划线 水平对齐 text-align:值;...2em; 字体下划线和删除线 text-decoration:值; 取值：underline 下划线 line-through 删除线 none 去掉多余的样式 行高 行高控制的是文字与文字之间的上下距离
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
