首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

类、相邻同级和伪选择器不能一起工作。

类、相邻同级和伪选择器是CSS中常用的选择器,用于选择HTML文档中的元素并对其应用样式。它们分别有不同的作用和适用场景。

  1. 类选择器(Class Selector):
    • 概念:类选择器通过选择元素的class属性来选取元素。
    • 分类:类选择器以"."开头,后面跟随类名,可以同时应用于多个元素。
    • 优势:类选择器具有较高的灵活性和可重用性,可以在不修改HTML结构的情况下改变元素的样式。
    • 应用场景:适用于多个元素需要应用相同样式的情况,例如导航菜单、按钮等。
    • 腾讯云相关产品:无
  2. 相邻同级选择器(Adjacent Sibling Selector):
    • 概念:相邻同级选择器通过选择元素的相邻同级元素来选取元素。
    • 分类:相邻同级选择器以"+"符号开头,后面跟随要选择的元素。
    • 优势:相邻同级选择器可以选择紧接在指定元素后的同级元素,用于对特定元素进行样式调整。
    • 应用场景:适用于需要选择某个元素后紧接的同级元素进行样式调整的情况,例如列表项之间的间距调整。
    • 腾讯云相关产品:无
  3. 伪选择器(Pseudo Selector):
    • 概念:伪选择器通过选择元素的特定状态或位置来选取元素。
    • 分类:伪选择器以":"开头,后面跟随特定的伪类或伪元素。
    • 优势:伪选择器可以选择元素的特定状态或位置,用于实现一些特殊效果或样式调整。
    • 应用场景:适用于需要选择元素的特定状态或位置进行样式调整的情况,例如鼠标悬停、表单输入等。
    • 腾讯云相关产品:无

总结:类选择器、相邻同级选择器和伪选择器在CSS中有各自的作用和适用场景。它们可以独立使用,但不能同时在同一个选择器中使用。这是因为它们的语法和功能不同,同时使用可能会导致选择器无效或产生意想不到的结果。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】元素选择器区别

1.选择器元素选择器 选择器是用来向某些选择器来添加效果。...(空格) :not(标签名) (3)目标选择器: :target (4)UI元素状态选择器: :enabled :disabled :checked (5)动态选择器: :link...:visited :hover :active (6)用户行为选择器 :focus 元素选择器则是用来将特殊的效果添加在选择器上。...:不修改DOM容,通过一些特定的选择器根据特定的状态,特定条件来修改元素的样;而元素可能改变DOM结构,创造了虚拟的DOM 选择器只是相当于给标签加上了个名字,让我们能够找到精准的位置,而元素选择器修改了他原本的结构...2.注意 可通过使用css实现点击元素变色的效果,两个是:active, :focus :active :active选择器用于选择活动链接。

1.6K10
  • 第91天:CSS3 属性选择器选择器元素选择器

    表示的属性值里包含val字符并且在“开始”位置; div[class^=mydemo] 5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;   div[class$=demos] 二、选择器...除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的选择器。...四、元素选择器 重点:E::before、E::after 是一个行内元素,需要转换成块元素 E:after、E:before 在旧版本里是,在新版本里是元素,新版本下E:after、E:before...E::selection 可改变选中文本的样式; ":" 与 "::" 区别在于区分元素 关于beforeafter       CSS2中 E:before或者E:after,是属于的...,并且没有元素的概念       CSS3中 提出元素的概念 E::beforeE::after,并且归属到了元素当中,里就不再存在E:before或者   E:after;

    1.6K30

    前端面试题-CSS选择器

    二、选择器类型 基本选择器 组合选择器 属性选择器 选择器 元素选择器 三、基本选择器 选择器 含义 作用 CSS .class 选择器 匹配 class 包含(不是等于)特定的元素 1 #id...匹配E元素之后的相邻同级元素F 2 E~F 普通相邻选择器(弟弟选择器) 匹配E元素之后的同级元素F(无论直接相邻与否) 3 五、属性选择器 选择器 示例 示例说明 CSS [attribute]...$= en] 选择一个lang属性的结尾值="EN"的所有元素 2 [attribute *= language] [lang *= en] 选择一个lang属性的包含"EN"的所有元素 2 六、选择器...1 :active a:active 选择正在活动链接 1 :focus input:focus 选择元素输入后具有焦点 2 所有选择器在前端面试题-元素 七、元素选择器 选择器 作用...这个元素只能用在块元素中,不能用在内联元素中。 1 所有元素选择器在前端面试题-元素 扩展阅读 前端面试题-clearfix(清除浮动) 前端面试题-BFC(块格式化上下文)

    69940

    使用 :has() 选择前一个相邻元素

    这使得构建可以针对元素的先前同级元素的 CSS 选择器变得不可能,但是has:()(以及来自选择器级别 4 的、 )已经抛弃了旧的限制,并在使用时开辟了一个充满可能性的:not()新世界选择器。...在此之前,如果您不针对或不支持 Firefox,或者使用polyfill ,则可以使用。...我们可以使用两个相邻同级组合器来选择前第二个同级: .box:has(+ * + .circle) { width: 40px; height: 40px; } 如果您愿意,您可以将选择器的范围等同于一个...,可以将:has()与通用同级组合器 ( ~) 组合,只要第二个元素位于第一个元素之后,无论其位置如何,它都会匹配第二个元素: .box:has(~ .circle) { width: 40px...需要注意的是,直到2022-09-02,chromeedge 105版本才支持 :has() 选择器

    32430

    CSS快速入门(一)

    相邻选择器 弟弟选择器 属性选择器 语法 示例 分组与嵌套 选择器 语法 示例 标准索引 选择器参考表 网站分享 CSS快速入门 简介 层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术...例如,如果我的h1.special有相同的CSS,那么我可以把它们写成两个分开的规则。...color: greenyellow; } 相邻选择器 特征为+加号,这个查找的是同级别下面紧挨着的第一个span /*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/...CSS 是添加到选择器的关键字,指定要选择的元素的特殊状态。...a[title] { } 标签属性选择器 选择器 p:first-child { } 元素选择器 p::first-line { } 元素 后代选择器 article p 后代运算符 子代选择器

    93720

    前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器、子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器选择器元素选择器 九 CSS三大特性 一 基本选择器...注意点: 1、相邻兄弟选择器必须通过+号链接 2、相邻兄弟选择器只能选中你紧跟其后的那个标签,不能选中被隔开的标签 2、通用兄弟选择器,CSS3推出 #1、作用:给指定选择器后面的所有选择器中的所有标签设置属性...red; } “我是段落7”“我是段落6.2”被选中 #3、同级别同类型的第n个 p:nth-of-type(2) { color: red; } “我是段落2”“我是段落6.2”被选中...#1、作用:常用的几种选择器。...,也可以一起出现 2 a标签的选择器如果一起出现,有严格的顺序要求,否则失效 link,visited,hover,active 3 hover是所有其他标签都可以使用的 4 focus只给

    2K30

    css3选择器总结

    有继承性:文本相关字体样式、粗细、大小、颜色、类型等 无继承性:盒子模型相关边框、背景等 层叠性:相同标签继承定义的样式累加到一起互不冲突。...{} +相邻兄弟选择器: div.s+p{} 只能选择后面的 ~通用兄弟选择器: div.s~p{} 只能选择后面的 权重为0001: 标签选择器h3 em {} :first-letter每段首字符(...::selection用户在页面中选中部分(只能改颜色背景颜色) 权重0010: (class)选择器 .special {} 选择器: :link :visited :hover...:active :focus 元素状态: :enabled :disabled :checked :focus 属性选择器:[属性] 元素[属性][属性] 元素[属性=“...:only-child匹配同级元素中只有一个子元素的元素 否定::not() 权重0100: ID选择器 #banner 权重1000: !

    27610

    CSS高级选择器

    07.31自我总结 CSS高级选择器 一.选择器 对于之前的选择器的补充再定义一个别名 举例 123 其中a为,a-1为,也是一种,...他们之间用宫格隔开 我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1 常用的两个选择器 选择器都是用:连接的 名:nth-child(N):先确定位置,再筛选选择器 在同一结构下都是相同选择器时使用...--我们只要body下的h2标签字体都是红色--> div>.h2{ color:red; } 三.兄弟(相邻)选择器 兄弟选择器:~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到...相邻选择器:+进行连接,他是找到前者后,在前者后面的相邻的才会选中,如果没相邻他会接着找第二个前者 注意 选择器放置位置前与放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个 他所改变的是他们后者而不是两个都改变...权值:不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序 对于权值有些人对他级别的定义 标签 10 ()100 id 1000 !

    81930

    知识整理之CSS篇

    、后代选择器、子元素选择器、毗邻选择器相邻选择器 image.png 属性选择器 image.png 选择器 CSS1-2选择器 image.png CSS3常用选择器 image.png...元素 image.png 元素的区别与作用 CSS3对的定义: 存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。...由一个冒号:开头,冒号后面是的名称包含在圆括号中的可选参数。 任何常规选择器可以再任何位置使用语法不区别大小写。一些的作用会互斥,另外一些可以同时被同一个元素使用。...元素的本质是创建了一个可以设置内容样式的虚拟容器。 可以同时使用多个,但只能使用一个元素。 CSS选择器优先级、权重计算 CSS选择器的优先级 选择器的优先级分为两种:1....id选择器,如#content,权值为0100。 、属性选择器,如.content、:link、[type=text]等,权值为0010。 通配符、子选择器相邻选择器等,权值为0001。

    1.6K20

    CSS基础

    * 需要关注的选择器 选择器分类 * 元素选择器 a{} * 选择器 .link{} * ID选择器 #id{} * 属性选择器 [type=radio]{} * 选择器 :hover{} *...元素 不会出现在 htmldom树中。但是 元素是真实存在于页面中的元素,可以显示内容 可以设置样式 等等。 是一个元素的某种状态。...* ID选择器 #id{} +100 * 属性 +10 * 元素 元素 +1 * 其它选择器 +0 那么十个 选择器 是不是等于 一个id选择器, 11个选择器...实际上 选择器的权重 是不能进位的,一个id选择器的权重 是大于 11个选择器的。如下图所示: ? 选择器权重 - 参考表 '+'选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。...而'~'选择器则表示某元素后所有同级的指定元素,强调所有的。 * !important优先级最高 属性值 写上 '!important', 它就是最重要的 不会被其它css样式覆盖掉.

    44120

    CSS入门8-三大特性之层叠特性与优先级

    选择器分为四: 常用选择器,包括元素选择器选择器,id选择器属性选择我器 选择器元素选择器 关系选择器 通配选择器 3.2.1.2.1 常用选择器 3.2.1.2.1.1 同一选择器...结论:id > (属性) > 元素,属性同级,遵循同级元素后者覆盖前者的规则。...3.2.1.2.2 选择器元素选择器 3.2.1.2.2.1 选择器 动态 > 目标 > UI元素 > 结构 > 元素 > 浏览器默认属性 > 继承属性 综合3.2.1.2.2.1-13.2.1.2.2.1-2来看,我们再次验证了属性同级,并且发现它们也是同级的...有如下结论: 结论:id > (,属性,) > 元素,,属性同级,遵循同级元素后者覆盖前者的规则。

    94330

    CSS

    : E,F  多元素选择器,同时匹配所有E元素或F元素,EF之间用逗号分隔 <!...,匹配所有属于E后代的F元素,EF之间用空格分隔 E>F  子元素选择器,匹配所有E元素的子元素F E+F  毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 选择器: 专用于控制链的显示效果,...选择器:   a:link(没有接触过的链接),用于定义链接的常规状态   a:hover(鼠标放在链接上的状态),用于产生视觉效果   a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接...  a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态 选择器指的是标签的不同状态:   a ==>点过的状态 没有点过的状态 鼠标悬浮状态 激活状态     a:link...如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。 在这里,我们对图片廊使用 float 属性: ? 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

    1.4K60

    前端学习(15)~css3学习(九):选择器详解

    /a.mp3" class="downloadmusic">下载 结构选择器 选择器的标志性符号是...: CSS中有一些选择器,比如:link、:active、:visited、:hover,这些是动态选择器。...CSS3又新增了其它的选择器。这一小段,我们来学习CSS3中的结构选择器:即通过结构来进行筛选。 1、格式:(第一部分) E:first-child 匹配父元素的第一个子元素E。...元素选择器 元素选择器的标志性符号是 :: 1、格式:(第一部分) E::before 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。...E::after 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。 E:after、E:before 在旧版本里是,在 CSS3 这个新版本里是元素。

    50220

    理解CSS - 笔记

    DOM 树 + CSS => 渲染树(最终展示的页面效果) # CSS 简单使用 # 选择器 通配选择器 标签选择器 id 选择器 选择器 属性选择器 # & 元素 分两种,状态结构...)等 元素常用的一般就两个, ::before ::after ,都是用来向被选中的元素添加元素之外的装饰性内容(文字)等 # 组合 选择器选择器选择器之间都可以进行组合,组合按照以下规则...,则选中 B section > article 兄弟选择器 A ~ B 如果 B 在 A 后面并且 B 与 A 同级,则选中 B h2 ~ p 相邻选择器 A + B 如果 B 紧跟 A 后面并且 B...百位: 选择器中包含 ID 选择器则该位得一分。 十位: 选择器中包含选择器、属性选择器或者则该位得一分。 个位:选择器中包含元素、元素选择器则该位得一分。...当要设置的属性值不能自动继承或者父元素没有相应值的定义,该元素会使用默认(初始)值,即行为与`initial`相同 # CSS 工作流程 # CSS 盒模型 # width、height、padding

    1.6K20
    领券