css怎么分辨伪类和伪元素

今天小编给大家分享一下css怎么分辨伪类和伪元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

成都创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业服务器托管报价,主机托管价格性价比高,为金融证券行业珉田数据中心,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

一.伪类(用于向某些选择器添加特殊的效果)

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

伪类包含两种:状态伪类和结构性伪类。

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。常见的状态伪类主要包括:

:link应用于未被访问过的链接;

:hover应用于鼠标悬停到的元素;

:active应用于被激活的元素;

:visited应用于被访问过的链接,与:link互斥。

:focus应用于拥有键盘输入焦点的元素。

结构性伪类是css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。常见的包括:

:first-child选择某个元素的第一个子元素;

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素;

:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

:nth-of-type()选择指定的元素;

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;

:first-of-type选择一个上级元素下的第一个同类子元素;

:last-of-type选择一个上级元素的最后一个同类子元素;

:only-child选择的元素是它的父元素的唯一一个子元素;

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty选择的元素里面没有任何内容。

例:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>伪类</title>

<style>

.demo{

width:200px;

height:500px;

margin:50pxauto;

text-align:center;

}

.tab_content{

height:50px;

background:red;

margin-bottom:10px;

}

#tab1:target,#tab2:target,#tab3:target{

background:blue;

line-height:50px;

}

</style>

</head>

<body>

<divclass="demo">

<ulclass="tabs">

<li><ahref="#tab1">标签一</a></li>

<li><ahref="#tab2">标签二</a></li>

<li><ahref="#tab3">标签三</a></li>

</ul>

<divid="tab1"class="tab_content">tab1</div>

<divid="tab2"class="tab_content">tab2</div>

<divid="tab3"class="tab_content">tab3</div>

</div>

</body>

</html>

以上就是“css怎么分辨伪类和伪元素”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。

网页名称:css怎么分辨伪类和伪元素
浏览地址:https://www.cdcxhl.com/article20/ihggco.html

成都网站建设公司_创新互联,为您提供ChatGPT定制开发移动网站建设软件开发面包屑导航定制网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司