首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【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

    如何使用CSS选择器

    document.querySelectorAll()[4]返回所有匹配的HTML元素,这些元素位于数组NodeList[5]中。 选择器根据HTML元素的当前状态来定位它们。...… :is选择器 注意:这最初被指定为:matches()和:any(),但:is()已经成为CSS标准。...MDN解释::is()CSS函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...:is(article, section, aside) p { color: #444; } 单个选择器可以包含任意数量的:is()。...*/ h2 { margin-block-start: 2em; } :has()选择器 :has()选择器使用了类似于:is()和:where()的语法,但它的目标是一个包含其他元素的元素。

    2.2K40

    第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 可改变选中文本的样式; ":" 与 "::" 区别在于区分元素 关于before和after       CSS2中 E:before或者E:after,是属于的...,并且没有元素的概念       CSS3中 提出元素的概念 E::before和E::after,并且归属到了元素当中,里就不再存在E:before或者   E:after;

    1.6K30

    CSS3选择器–结构性选择器

    在学习结构性选择器之前,先了解2个概念:CSS中的选择器元素: 1、选择器:CSS中已经定义好的选择器,不能随便取名 常用的选择器是使用在a元素上的几种...:元素{样式} 在后续的文章中会详细介绍选择器的具体使用方法,本文主要是要介绍nth-child、nth-last-child、nth-of-type、nth-last-of-type...结构性选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。...其他几种结构性选择器这里就不做详细介绍了。这里主要是对比三种选择器。...总结: 为了方便记忆和查询,把CSS的结构选择器归为四: 1)通用子元素过滤器:E:nth-child(n)(顺序过滤)和E:nth-last-child(n)(逆序过滤

    53110

    【说站】CSS选择器是什么

    CSS选择器是什么 1、选择器,同一个标签,根据其不同的种状态,有不同的样式。这就叫做“”。用冒号来表示。 比如div是属于box,这一点很明确,就是属于box。...但是a属于什么?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“”。 2、选择器分为两种,静态和动态。 (1)静态:只能用于超链接的样式。...(2)动态:针对所有标签都适用的样式。如下: :hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点) 以上就是CSS选择器的介绍,希望对大家有所帮助。

    52820

    前端学习(10)~css学习:选择器

    选择器:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“”。用冒号来表示。 静态和动态 选择器分为两种。 (1)静态:只能用于超链接的样式。...(2)动态:针对所有标签都适用的样式。如下: :hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点) 超链接a标签 超链接的四种状态 a标签有4种(即对应四种状态),要求背诵。...动态举例 下面这三种动态,针对所有标签都适用。 :hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点) 举例1: /* 选择器:动态 */ /*

    1.1K20

    CSS基础之选择器的总结

    在这篇博客中,我会结合具体例子来分析选择器(可能概念性不是很强,但是好用 ~ ) 属性选择器 input[value] 意思是选择的input标签,必须具有value属性 input[type=text...但低于div .box…) 结构选择器 ul:first-child 选择ul中的第一个孩子 ul li:first-child 选择ul中的第一个li ul:last-child 选择ul中的最后一个孩子...body> 第一 第二 第三 元素选择器...element::before 在element元素内部的前面插入内容 element::after 在element元素内部的后面插入内容 (此处的element代指所有标签元素) 这个选择器是要写在...-- 元素选择器 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意: before和

    68340

    CSS魔法堂:稍稍深入选择器

    前言  过去零零星星地了解和使用:link、::after和content等元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为部分的整理。...选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。...HTMLAnchorElement的4大经典 :link,用于设置链接初始状态时的样式; :visited,用于设置链接被点击过后的样式; :hover,用于设置鼠标悬停在链接上方时,链接的样式;...想必各位都和我一样,最初接触到的就是上述4个了吧?!而且还死机硬背它们的设置顺序(LVAH)吧,哈哈。 设置当前目标元素样式  还记得URL中的井号吗?...也就是符合以下选择器的元素均支持focus状态。

    1K20
    领券