广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >CSS伪类是什么
  • 977
分享到

CSS伪类是什么

css 2022-10-19 18:10:12 977人浏览 独家记忆
摘要

这篇“CSS伪类是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类是什么”文章

这篇“CSS伪类是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类是什么”文章吧。

  什么是伪类?

  一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于html元素。我们可以使用冒号语法将伪类添加到CSS选择器,:如下所示:a:hover{...}

  一个CSS类是我们可以添加到HTML我们想申请,同一款式的规则元素,例如顶部菜单项或侧边栏小工具的标题属性。换句话说,我们可以使用CSS类对以某种方式相似的HTML元素进行分组或分类。

  伪类与它们类似,因为它们也用于将样式规则添加到共享相同特征的元素。

  但是,虽然真正的类是用户定义的并且可以在源代码中被发现,但是例如,基于所属的HTML元素的当前状态,UA(用户代理)(例如WEB浏览器)添加<divclass="myClass">伪类。

  伪类和伪元素可以在CSS选择器中使用,但在HTML源代码中不存在。相反,它们在某些条件下由UA“插入”以用于在样式表中寻址。

  伪类的目的

  常规CSS类的工作是对元素进行分类或分组。开发人员知道他们的元素是如何分组的:他们可以形成类似“菜单项”,“按钮”,“缩略图”等的类来分组,以及后来的类似元素的样式。这些分类基于开发人员自己给出的元素特征。

  例如,如果开发者决定使用a<div>作为缩略图对象,则可以使用<div>“缩略图”类对其进行分类。

  <divclass="thumbnail">[...]</div>

  然而,HTML元素具有基于其状态,位置,性质以及与页面和用户的交互的共同特征。这些是HTML代码中通常不标记的特征,但我们可以使用CSS中的伪类来定位它们,例如:

  1、一个元素,它是其父元素中的最后一个子元素

  2、访问的链接

  3、一个全屏的元素。

  这些是伪类通常所针对的特征。为了更好地理解类和伪类之间的区别,我们假设我们使用该类.last来标识不同父容器中的最后一个元素。

  <ul>

  <li>item1</li>

  <li>item2</li>

  <li>item3</li>

  <liclass="last">item4</li>

  </ul>

  <select>

  <option>option1</option>

  <option>option2</option>

  <option>option3</option>

  <optionclass="last">option4</option>

  </select>

  我们可以使用以下CSS设置这些最后一个子元素的样式:

  li.last{

  text-transfORM:uppercase;

  }

  option.last{

  font-style:italic;

  }

  但是当最后一个元素改变时会发生什么?好吧,我们必须将.last类从前一个元素移动到当前元素。

  更新类的麻烦可以留给用户代理,至少对于元素中常见的那些特征(并且最后一个元素是它可以获得的常见元素)。拥有预定义的:last-child伪类确实非常有用。这样,我们不必指示HTML代码中的最后一个元素,但我们仍然可以使用以下CSS来设置它们的样式:

  li:last-child{

  text-transform:uppercase;

  }

  option:last-child{

  font-style:italic;

  }

  伪类的主要类型

  伪类有很多种,它们都为我们提供了基于其特征无法访问或难以访问的特征来定位元素的方法。这是MDN中标准伪类的列表。

  1.动态伪类

  动态伪类根据它们为响应用户的交互而转换的状态动态地添加到HTML元素和从HTML元素中删除。一些的动态伪类的例子是,,,和,所有这些都可以被添加到锚定标记。:hover:focus:link:visited<a>

  a:visited{

  color:#8D20AE;

  }

  .button:hover,

  .button:focus{

  font-weight:bold;

  }

  2.基于状态的伪类

  基于状态的伪类在处于特定静态时添加到元素中。其中一些最着名的例子是:

  :checked可以应用于复选框(<inputtype="checkbox">)

  :fullscreen定位当前以全屏模式显示的任何元素

  :disabledHTML元素,可以是在已禁用模式,例如<input>,<select>,和<button>。

  最流行的基于状态的伪类必须是:checked,它标记是否选中了复选框。

  .checkbox:checked+label{

  font-style:italic;

  }

  input:disabled{

  background-color:#EEEEEE;

  }

  3.结构伪类

  结构伪类根据它们在文档结构中的位置对元素进行分类。它最常见的例子是:first-child,:last-child和:nth-child(n)-都可以用来根据容器的位置来定位容器内的特定子元素-并且:root它以DOM中最高级别的父元素为目标。

  4.杂项伪类

  还有一些难以分类的杂项伪类,例如:

  :not(x)选择与选择器x不匹配的元素

  :lang(language-code)选择哪些内容采用特定语言的元素

  :dir(directionality)选择具有给定方向性内容的元素(从左到右或从右到左)。

  p:lang(ko){

  background-color:#FFFF00;

  }

  :root{

  background-color:#FAEBD7;

  }

  nth-child与类型Pseudo-Classes的第n个

  其中一件关于伪类最难的事情是可能理解的差别:nth-child和:nth-of-type伪类。

  两者都是结构伪类,并在父元素(容器)内标记特定元素,但方式不同。

  假设&Ntilde;为2,然后:nth-of-child(n)靶向是一个元素它的父元素的第二个孩子,以及:nth-of-type(n)目标第二的中相同类型的元件的(例如段落)父元素内。

  我们来看一个例子吧。

  

  p:nth-child(2){

  color:#1E90FF;//lightblue

  }

  

  p:nth-of-type(2){

  font-weight:bold;

  }

  让我们看看这个简短的CSS样式如何在两种不同的情况下使用HTML。

  案例1

  在案例1中,a中的第二个元素<div>是无序列表,因此nth-child(2)规则不适用于它。虽然它是第二个子元素,但它不是一个段落。

  但是,如果父元素确实具有第二个段落,则该nth-of-type(2)规则将适用,因为此规则仅查找<p>元素,而不关心父元素内的其他类型的元素(例如无序列表)。

  在我们的示例中,nth-of-type(2)规则将设置第二个段落,即子3。

  <!--Case1-->

  <div>

  <p>Paragraph2,Child1</p>

  <ul>UnorderedList1,Child2</ul>

  <p>Paragraph3,Child3</p>

  </div>

CSS伪类是什么

以上就是关于“CSS伪类是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网VUE频道。

--结束END--

本文标题: CSS伪类是什么

本文链接: https://www.lsjlt.com/news/93115.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS伪类是什么
    这篇“CSS伪类是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类是什么”文章...
    99+
    2022-10-19
    css
  • css伪类是什么意思
    本篇内容介绍了“css伪类是什么意思”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS伪类是用来添加一些选择器的特殊效果,是用于已有元素处...
    99+
    2023-06-14
  • CSS中的伪类及伪元素是什么
    本篇内容介绍了“CSS中的伪类及伪元素是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  ...
    99+
    2022-10-19
    css
  • CSS伪类的语法是什么
    这篇“CSS伪类的语法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类的语法...
    99+
    2022-10-19
    css
  • CSS伪类的概念是什么
    本篇内容介绍了“CSS伪类的概念是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS伪类(Pseudoclasses)是选择符的螺栓,...
    99+
    2023-07-04
  • css中伪类指的是什么
    这篇文章主要介绍css中伪类指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css伪类是用于定义元素的特殊状态,它可以用于:1、设置鼠标悬停在元素上时的样式;2、为已访问和未访问链接设置不同的样式;3、设置元...
    99+
    2023-06-15
  • CSS伪类和伪元素的区别是什么
    这篇文章主要讲解了“CSS伪类和伪元素的区别是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS伪类和伪元素的区别是什么”吧!首先,阅读 w3c 对两...
    99+
    2022-10-19
    css
  • css中伪类及伪对象指的是什么
    本篇内容主要讲解“css中伪类及伪对象指的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中伪类及伪对象指的是什么”吧! ...
    99+
    2022-10-19
    css
  • css伪类和伪对象的区别是什么
    本文小编为大家详细介绍“css伪类和伪对象的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“css伪类和伪对象的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。伪类是用于向某些选择器添加特殊效果...
    99+
    2023-07-04
  • CSS伪元素和为伪类的区别是什么
    这篇文章主要介绍了CSS伪元素和为伪类的区别是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS伪元素和为伪类的区别是什么文章都会有所收获,下面我们一起来看看吧。 伪元...
    99+
    2022-10-19
    css
  • css的伪类有什么用
    这篇文章给大家分享的是有关css的伪类有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。      CSS伪类是用来添加一些选择器的特殊效果。   伪类的语法:   ...
    99+
    2022-10-19
    css
  • CSS中伪元素&伪类有什么用
    本文将为大家详细介绍“CSS中伪元素&伪类有什么用”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“CSS中伪元素&伪类有什么用”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下...
    99+
    2023-06-08
  • CSS伪类的含义和作用是什么
    本篇内容主要讲解“CSS伪类的含义和作用是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS伪类的含义和作用是什么”吧!你对CSS伪类的概念和作用是否熟悉...
    99+
    2022-10-19
    css
  • CSS伪类选择器的用法是什么
    小编今天带大家了解CSS伪类选择器的用法是什么,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“CSS...
    99+
    2022-10-19
    css
  • css中伪类和伪对象有什么区别
    这篇文章给大家分享的是有关css中伪类和伪对象有什么区别的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 伪类是用于向某些选择器添加特殊效果的;伪元素是...
    99+
    2022-10-19
    css
  • CSS中的伪类与伪元素二者间的区别是什么
    本篇内容介绍了“CSS中的伪类与伪元素二者间的区别是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CS...
    99+
    2022-10-19
    css
  • .CSS伪类和伪元素怎么用
    这篇文章主要介绍.CSS伪类和伪元素怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 伪类的例子有: :hover :active :first-child :visi...
    99+
    2022-10-19
    css
  • CSS的Placeholder-Shown伪类有什么用
    这篇文章主要讲解了“CSS的Placeholder-Shown伪类有什么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS的Placeholder-Sh...
    99+
    2022-10-19
    css
  • HTML5新增的Css选择器和伪类是什么
    本篇内容介绍了“HTML5新增的Css选择器和伪类是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
    html5 css
  • CSS中的 :Where 和 :Is 伪类函数是什么
    本篇内容主要讲解“CSS中的 :Where 和 :Is 伪类函数是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中的 :Where...
    99+
    2022-10-19
    css
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作