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

【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 选择器 | div 与 span 标签 | 选择器 )

文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、选择器 1、简介 2、名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 选择器 id 选择器 通配符选择器 三、标签选择器 --...1、简介 CSS 选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .名 " 识别标签 ; CSS 选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置名 ;...class="orange">o g l e 5、选择器

2.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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)(逆序过滤

    53510

    如何使用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 属性选择器、伪选择器和伪元素选择器

    一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div...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...,并且没有伪元素的概念       CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪里就不再存在E:before或者   E:after伪;

    1.6K30

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

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

    1K20

    【说站】CSS伪选择器是什么

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

    52820

    【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

    视图聚总结

    Spectral-based MvC 谱聚是一种典型的数据聚模型。其基本思想是在任意一对对象之间形成一个成对的亲和矩阵,将该亲和矩阵归一化,并计算该归一化亲和矩阵(即图拉普拉斯)的特征向量。...视图子空间聚的一般过程 Multi-task multi-view clustering MVC利用不同视图之间的一致性和互补性来实现更好的集群质量,如上所述。...另一个概念,即多任务聚(属于多任务学习领域),共同执行多个相关任务,并利用这些任务之间的关系来增强单视图数据的聚性能。...通过继承MVC和多任务集群的特性,多任务视图聚将每个视图数据处理为一个或多个任务,如下图所示。近年来,这一点受到了一些关注。...多任务聚模型的图形表示 Publically Available Datasets 3Sources Dataset:一个视图文本语料库,由三个在线新闻服务的新闻文章构成。

    2.1K30

    Python面向对象特性 — 继承【继承顺序、新式和经典

    上一篇文章讲述了继承的概念、语法、代码演练、使用注意事项,有兴趣的可以看下,这篇文章是基于上篇文章的扩展科普,简单知道一下就好。...一、Python中的MRO —— 方法搜索顺序【继承顺序】 所谓方法搜索顺序,就是让某个对象调用某个方法时,python的解释器是按照什么样的顺序在创建这个对象的,以及父之间搜索方法的。...(mro前后两个下划线) MRO是 method resolution order缩写,主要用于在继承时判断方法、属性的调用路径。...新式: 以object为基,推荐使用。 经典: 不以object为基,不推荐使用。...基于Python2.0 2.基于Python3.x 新式和经典继承时,会影响到方法的搜索顺序。

    54230

    前端学习(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中的最后一个孩子...element::before 在element元素内部的前面插入内容 element::after 在element元素内部的后面插入内容 (此处的element代指所有标签元素) 这个选择器是要写在...见如下一个简单的小例子就能明白了 需要注意的是: before和after创建的元素属于行内元素 before和after必须要有content属性,假如不给content赋值,也要写content:“” 大家可以找几个...-- 伪元素选择器 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意: before和

    68340
    领券