css中使用a标签的伪类选择器注意点 注意点 1、a标签的伪类选择器可以单独出现也可以一起出现。 2、a标签的伪类选择器如果一起出现, 那么有严格的顺序要求。...编写的顺序必须要遵守爱恨原则 love hate 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写 实例 /* 简写格式 */ a{ color: green; } /* link:和... :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/ /*a:link{*/ /*color: green;*/ /*}*/ /*a:visited{*/ /...*color: green;*/ /*}*/ 以上就是css中使用a标签的伪类选择器注意点，希望对大家有所帮助。
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。 在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。...这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。 在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。...何时使用:has选择器 :has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。...我们不仅选择了文章，还选择了 span 类别应用的内容。 使用:has与:not选择 在本节中，我们将介绍如何使用 :has 伪类与 :not 。...这三篇文章被选择是因为它们都有一个 p 的HTML标签。但是如果我们移除 p 标签，只有最后一个带有“buy now” button 类的文章会保持着颜色。
目录 CSS快速入门 简介 语法结构 如何注释 引入方式 选择器 简介 选择器列表 选择器的优先级 基本选择器 标签选择器 类选择器 id选择器 通用选择器（不重要） 组合选择器 后代选择器 儿子选择器...因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ，我们肯定先需要学习如何查找指定的标签 ---- 选择器列表 如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个...例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。...相同选择器不同导入方式 选择器系统遵循就进原则，从上往下谁离标签更近谁说了算 通俗理解： 比如两个相同的选择器都要修改p标签，最下面那个，或者离p标签更近的选择器生效； 如果p标签自己使用style...，那么使用分组和嵌套可以减少代码的冗余； 匹配标签之间用逗号隔开，标签与标签是或的关系； 并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用； /*并列的情况
> 9.兄弟选择器 兄弟选择器，使用（~）组合两个选择器。...但是要注意： 兄弟元素之间可以存在其他元素； 只能选择元素后面的兄弟元素。...，使用（+）组合两个选择器。...CSS 选择器的权重计算遵循以下规则： 选择器的权重可以相加，数值越大，权重越大，两种选择器覆盖同一属性时，权重大的选择器生效； 通配符选择器的权重为 0 ； 标签选择器、伪元素选择器：1； 类选择器、...important 声明的样式的权重最高； 继承得到的样式的权重最低； 由于 HTML 代码的执行特点时从上往下执行，因此在权重相同的情况下，后面的选择器会覆盖前面的选择器相同的属性； 伪类选择器和属性选择器的权重相当于类选择器的权重
07.31自我总结 CSS高级选择器 一.伪类选择器 对于之前的类选择器的补充类再定义一个别名 举例 123 其中a为类,a-1为伪类,伪类也是一种类,...他们之间用宫格隔开 我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1 常用的两个伪类选择器 伪类选择器都是用:连接的 类名:nth-child(N):先确定位置，再筛选选择器 在同一结构下都是相同选择器时使用...类名:nth-of-type(N):先确定选择器，在匹配位置 在同一结构下不全是相同选择器时使用 举例 的h2类标签字体都是红色--> div>.h2{ color:red; } 三.兄弟(相邻)选择器 兄弟选择器:~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到...权值:不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序 对于权值有些人对他级别的定义 标签 10 类(伪类)100 id 1000 !
代码量不多，且和当前页面联系紧密不需要复用时使用 外部样式表 完全实现结构与样式分离，可重复利用 如果代码量较少情况下，引入法更麻烦 最多，推荐 css代码量大时，或者需要重复利用时使用 如何写 /*...类选择器（Class Selector）： 使用.加上类名来选择具有该类的所有元素，如 .my-class 会选中class="my-class"的所有元素。...标签选择器 eg：p，选中所有p标签。 后代选择器 eg：#wrap .nav，选中#wrap标签中所有拥有nav类名的后代标签。...通配选择符 eg：*，选中页面中所有元素 选择器权重 CSS选择器的权重，也称为Specificity，是一个衡量不同选择器优先级的数值系统，它决定了当有多个规则应用到同一个元素上时，哪个规则会最终生效...important > 行内 > id > class > 标签 > 通配符|兄弟|相邻兄弟|子代 > 继承 先比较级别，级别一样比较各级别选择器出现的次数 当两个选择器权重一样时，以最后出现的为准 基础知识介绍
四种，对应的就是指明 width 和 height 表示的是包含哪些区域的宽高。 使用方式 CSS 基本结构是由选择器和样式属性列表组成，那么如何跟 HTML 文档关联起来使用呢？... 标签，在某些情况下很有用，比如当你不能直接修改 CSS 文件时。...表示的是，在满足第一个选择器的前提下，从它匹配到的元素的紧跟着的位于同一层级的下一个元素，看该元素是否符合第二个选择器。 也就是说，兄弟选择器，两个选择器所匹配的元素要求，位于同一层级，且相邻。...p 元素后面的兄弟元素有两个，第三个 a 元素和第四个 a 元素，因此这里可以匹配到这两个元素。...在 CSS 中也是可以使用一些内置的方法功能。 伪类选择器 当不是通过 HTML 文档中元素的一些基本性质，比如 id，class，标签名，属性这些基本特征来匹配这些元素时，就可以称作伪类选择器。
操作节点，先得选择节点，就得知道节点选择器与DOM节点查找 DOM节点选择器 W3C提供了比较方便的定位节点的方法和属性 getElementById() 一个参数:元素标签的ID getElementsByTagName...() 接收CSS选择符，返回匹配到的第一个元素，没有则null querySelectorAll() 接收CSS选择符，返回一个数组，没有则返回[] DOM节点关系与节点查找 遍历节点树，所涉及发方法...hasChildNodes() 包含一个或多个节点时返回true contains() 如果是后代节点返回true isEqualNode() 两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回...true isSameNode() 指的是两个节点是否是同一类型，具有相等attributes/childNodes等 compareDocumentPostion() 确定节点之间的各种关系 parentNode...上一个兄弟标签元素 nextSibling 下一个兄弟节点 nextElementSibling 下一个兄弟标签元素 childElementCount 第一层子元素的个数(不包括文本节点和注释) ownerDocument
五、CSS选择器 选择器，就是用一种方式把我们想要的那一个标签选中。把它选中了，你才能操作这个标签的CSS样式。 CSS中有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。...在2.CSS选择器-CSS基础中我们学习了以下几种选择器： 元素选择器 id选择器 class选择器 群组选择器 这些都是CSS中最基本的选择器。...层次选择器，就是通过元素之间的层次关系来选择元素。 层次选择器在实际开发中也是相当重要的，常见的层次关系包括:父子、后代、兄弟和相邻。...-- #first p:会选中id为first元素的子元素p。 --> ? 子代选择器示例1.png 3.兄弟选择器 兄弟选择器：选中元素后面（不包括前面）的某一类兄弟元素（同级）。...相邻选择器示例2.png （4）实际开发 在两个列表项之间使用相邻选择器是一个非常棒的技巧，在实际开发中如果我们想要在两个元素之间实现什么效果（例如：border、 margin等)，我们会经常用到这个技巧
那些被遗忘的选择器 在IE6~8“统治”网络世界的时代，CSS2版本曾经推出过几种选择器，而这几种选择器由于对IE6支持程度较差，使得前端开发工程师不得不将其舍弃。... 快快用起来 子代选择器 > 子代选择器也是使用多个选择器的组合来找到要控制的标签，不同的选择器之间使用大于号“>”分隔。...如果希望控制第三级别甚至第四级别的标签样式，可以使用“.arc > div p”此类选择器来实现。 毗邻选择器 + 毗邻选择器，也称为相邻选择器。使用 + 号连接两个选择器。...用于选择当前标签的下一个兄弟级元素。得到了IE7及IE7以上的各个主流浏览器的支持。 +（毗邻）与~（兄弟） 提到+（毗邻选择器），对CSS3比较熟悉的工程师有可能会想到~（通用兄弟选择器）。...通用兄弟元素选择器是CSS3新增加的一种选择器，得到了IE9及IE9以上的各个主流浏览器支持。与毗邻选择器类似的地方在于：需要在同一个父元素之中。
几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML ②HTML是一种基于标准通用标记语言（SGML）的应用，而XHTML则基于可扩展标记语言（XML），其实是平行发展的两个标准。...③@import只有在IE5以上才能识别，link所有都可以 ④js控制dom修改样式只能使用link标签 ⑤@import可以在css中再次引入其它的样式表 ---- 8. css选择符（w3school...(只能选择两个相邻兄弟的第二个元素)： h1 + p { margin-top:50px; } ⑾兄弟选择符（选择该元素的所有兄弟）： h1 ~ p { line-height:30px; } ----...②表示层：由CSS负责创建，对“如何显示有关内容”的问题作出了解答。 ③行为层：javascript语言和DOM主宰的领域，负责回答“内容应如何对事件作出反应”。...”的组合进行背景定位 ---- 17.浏览器的 ①怪异模式：浏览器在页面的渲染模式上没有同一的规范；width是盒模型中的实际宽度 ②标准模式：浏览器在页面的渲染模式上有了统一的标准；width是盒模型中的内容宽度
基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 1、标签选择器：选择器的名字代表...一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义 3、类选择器：规定用圆点.来定义 针对你想要的所有标签使用。优点：灵活。 css中用.来表示类。...和id非常相似，任何的标签都可以携带id属性和class属性。class属性的特点： 特性1：类选择器可以被多种标签使用。 特性2：同一个标签可以使用多个类选择器。用空格隔开。...意思是说，class属性交给css使用，id属性交给js使用。 上面这三种选择器的区别： 标签选择器针对的是页面上的一类标签。...还有下面这种写法：（含类选择器、id选择器都是可以的） ? 2、交集选择器：定义的时候紧密相连 定义交集选择器的时候，两个选择器之间紧密相连。
（查看jQuery文档） jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...2.1 jQuery基本选择器（重点） 名称 用法 描述 ID选择器 $(’#id’); 获取指定ID的元素 类选择器 $(’.class’); 获取同一类class的元素 标签选择器 $(‘div’)...; 获取同一类标签的所有元素 并集选择器 $(‘div,p,li’); 使用逗号分隔，只要符合条件之一就可。...（重点） 名称 用法 描述 子代选择器 $(‘ul > li’); 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(‘ul li’); 使用空格，代表后代选择器，获取ul下的所有...li元素，包括孙子等 跟CSS的选择器一模一样。
阅读目录 一 基本选择器 二 后代选择器、子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器...，通常不会使用id，在前端开发中id通常是留给js使用的 2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复 3、引用id一定要加# 4、id的命名只能由字符...1+选择器2 { 属性：值; } #3、注意点： 1、相邻兄弟选择器必须通过+号链接 2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签 2、通用兄弟选择器，CSS3推出 #1...全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果 #2、注意： 1、层叠性只有在多个选择器选中了同一个标签...，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定 #2、优先级 整体优先级从高到底：行内样式>嵌入样式>外部样式 行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级 1
伪类选择器 伪类：同一个元素，有不同的状态，有不同的样式 可分为两种。...: red; } a:visited { color: pink; } 动态伪类：所有标签都使用的样式 :hover：鼠标悬停在标签上的时候 :active：鼠标点击标签，但是还没松手的时候...:link :visited :hover ` :active 在 css 中，超链接的四个状态必须按固定的顺序写： :link -> :visited -> :hover -> :active，...相邻兄弟选择器 相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。...:nth-child() 选择器 :nth-child()这个伪类选择器会先找到当前元素的兄弟元素，然后按位置先后顺序从 1 开始排序 <!
> 注意点: style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) style标签中的type属性其实可以不用写, 默认就是type="text/css"...:值; } 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 子元素选择器之间需要用>符号连接, 并且不能有空格 后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号 后代选择器会选中指定标签中...选择器1选择器2{ 属性: 值; } # 用多个选择器 并集选择器 选择器1,选择器2{ 属性:值; } #选到2个 并集选择器必须使用,来连接 兄弟选择器 相邻兄弟选择器 作用...如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 标签理解 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级...文本级的标签 span p buis strong em ins del ... 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素 什么是块级元素, 什么是行内元素?
，使用br标签 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费 2.6 after伪类 清浮动方法（...2、定位层级 z-index （无单位） 2.1 定位元素默认后者层级高于前者 2.2 建议在兄弟标签之间比较层级 二、透明度 ...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。...，使用br标签 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费 2.6 after伪类 清浮动方法（...2、定位层级 z-index （无单位） 2.1 定位元素默认后者层级高于前者 2.2 建议在兄弟标签之间比较层级 二、透明度
其中选择器也叫选择符 CSS 中注释：/* ... */ 二、在 HTML 中如何使用 css 样式（html 中嵌入 css 的方式） 1....>被修饰的内容标签> 在HTML中如何使用css样式 特点：仅作用于本标签...外部导入方式（外部链入） 3.1 （推荐）就是在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置 格式：css2 的选择符 1. html 选择符（标签选择器） 就是把html标签作为选择符使用 如 p{....} ...匿名类 其他选择符名.类名{样式....} 使用：标签 class="类名">...
上面的例子将会限定p标签，但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。比如： heading Content here. Content here....支持情况 IE6 No IE7 Yes IE8 Yes Bugs 在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。...普通兄弟选择器 示例: h1~p { color: #f00; } 描述: 该选择器定位一个指定元素后面的所有兄弟元素。将此选择器应用到上面的那个例子，将会对两个p标签都有效。...:"本段文字在盒子前面";} #box:after { content:"本段文字在盒子后面";} 描述 这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用...important 声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。
|使用标签选择元素，优先级最低，使用最广泛| 类选择器 ： .类名> |.class{...}|根据class值选择元素| id选择器 | #id{...}...：标签，类， id选择器 ``` css"> /标签选择器 p{ font-size: 50px; color: blue; } /类选择器...(1)临近兄弟选择器 该选择器使用加号“+ ”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一-个元素。...(2)普通兄弟选择器 该选择器使用加号“~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一-个元素。...只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。 链接伪类 链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
