伪类 订阅
伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。 展开全文
伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。
信息
类    型
CSS术语
相关概念
伪类
中文名
伪类
领    域
计算机
伪类CSS术语
CSS伪类是用来添加一些选择器的特殊效果。解释:在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。 [1]  伪类有::first-child ,:link:,vistited,:hover:,:active,:focus,:lang,:right,:left,:first何为伪类?就是css内置类css内部本身赋予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿来使用,当然你也可以改变它的部分属性比如:a:link{color:#FF0000;}CSS很多的建议并没有得到浏览器的支持,但有四个可以安全用在超链接上的伪类。
收起全文
精华内容
下载资源
问答
  • 伪类

    2021-02-01 18:41:11
    伪类

    伪类

    通常情况,超级链接上设置的样式,称之为伪类

    作用

    设置超级链接的4种状态

    伪类关键字

    a:link 未访问
    a:visited 已访问
    a:hover 鼠标选中未按下(悬浮悬停)
    a:active 被点击过的元素
    :focus 选择拥有键盘输入焦点的元素

    示例

    在这里插入图片描述
    在这里插入图片描述

    小贴士

    1.伪类是用在超链接上的效果比较多,但超链接不是伪类
    2.伪类是选择器

    展开全文
  • 一、伪类 1、定义 (1)CSS 伪类用于向某些选择器添加特殊的效果。 (2)伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。 (3)伪类是选择符的螺栓,用来...

    一、伪类

    1、定义

    (1)CSS 伪类用于向某些选择器添加特殊的效果。

    (2)伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

    (3)伪类是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。

    2、语法

    /*selector 选择器: pseudo-class 伪类 */
    selector:pseudo-class {
    		property:value;
    	  /*property属性: value属性值;*/
    }
    

    3、伪类的相关属性

    在这里插入图片描述

    二、伪元素

    1、定义

    (1)CSS 伪元素用于向某些选择器设置特殊效果。

    (2)CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

    2、语法

    /*selector 选择器: pseudo-element 伪元素 */
    selector:pseudo-element {
    	property: value;
    /*property属性: value属性值;*/
    }
    

    3、伪元素分类

    在这里插入图片描述

    三、超链接伪类

    1、超链接样式的特殊性

    文本或图像加上链接,将失去原样式而继承链接的样式。

    2、语法及属性值

    a:link{
    	color: #FF0000;/*未访问超链接时字体的颜色*/
    }
    

    超链接样式的四种状态:

    未访问状态(a:link )
    已访问状态(a:visited )
    鼠标移上状态(a:hover )
    激活选定状态(a:active )

    注意:
    (1)为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后

    (2)为了使定义生效,a:active 必须位于 a:hover 之后!

    (3)未访问状态的超链接颜色在浏览器第一次打开此页面时有效,一旦点击了超链接,颜色变成已访问状态的颜色,关闭该页面或者关闭浏览器再次打开还是已访问状态的颜色,要想恢复未访问状态,火狐和Safari需要清除历史记录。

    展开全文
  • 伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果。 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息(如::link、...

    伪类

    CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果。

    截止css2,伪类有以下几种:

    CSS3中对伪类的定义如下:

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

    CSS3新增的伪类如下:

    新增伪类 作用  
    E:first-child 匹配作为父元素的第一个子元素E,与E:nth-child(1)等同  结构伪类选择器
    E:last-child 匹配作为父元素的最后一个子元素E,与E:nth-last-child(1)等同
    E:root  选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html
    p:nth-child(n) 选择属于其父元素的第n个子元素的每个<p>元素。
    p:nth-last-child(n) 选择属于其父元素的倒数第n个子元素的每个<p>元素。
    p:nth-of-type(n) 选择属于其父元素第n个<p>元素的每个<p>元素。
    p:nth-last-of-type(n)  选择属于其父元素倒数第n个<p>元素的每个<p>元素。
    p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
    p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
    p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
    p:only-child 选择属于其父元素唯一的子元素的每个<p>元素。
    p:empty 选择没有子元素的每个<p>元素(包括文本节点)。
    p:target  选择当前活动的<p>元素。  目标伪类选择器
    :not(p) 选择非<p>元素的每个元素。  否定伪类选择器
    :enabled 可用状态的控制表单控件。  UI元素状态伪类选择器
    :disabled  禁用状态的控制表单控件。
    :checked  单选框或复选框被选中的元素。

    伪元素

    CSS2中,对于伪类和伪元素的定义是完全一样的。

    截止CSS2,伪元素有以下几种:

    CSS3对伪元素的定义如下:

    • 伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。
    • 伪元素的由两个冒号::开头,然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::

    • 一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

    简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。

    CSS3中的伪元素为:

    伪元素 作用
    ::first-letter 将样式添加到文本的首字母
    ::first-line 将样式添加到文本的首行
    ::before 在某元素之前插入某些内容
    ::after 在某元素之后插入某些内容
    ::selection  用来匹配突出显示的文本

    伪类和伪元素的特性与区别

    1. 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
    2. 伪元素本质上是创建了一个有内容的虚拟容器;
    3. CSS3中伪类和伪元素的语法不同;
    4. 可以同时使用多个伪类,而只能同时使用一个伪元素;

    锚伪类

    在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

    a:link  未访问的链接
    a:visited  已访问的链接
    a:hover  鼠标移动到链接上
    a:active  选定的链接

     

    转载于:https://www.cnblogs.com/lmjZone/p/8716291.html

    展开全文
  • css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:...

    css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器)

    链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:visited表示已访问的链接 ,a:hover表示鼠标移动到链接上,a:active表示的是选定的链接(当我们点击别松开鼠标,显示的状态)
    现在来演示一下,代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            a:link {   
            	font-size: 16px;
            	color: gray;
            	font-weight: 700;
            }
            a:visited {  
            	font-size: 16px;
            	color: orange;
            	font-weight: 700;
            }
            a:hover { 
            	font-size: 16px;
            	color: red;
            	font-weight: 700;
            }
            a:active {  
    			font-size: 16px;
            	color: green;
            	font-weight: 700;
            }
            </style>
        </head>
        <body>
          <div>  
    	      <a href="#" >房间里面是一具已经腐烂的尸体,腐臭让人难以接受。</a>   
    	      <a href="#" >办案的刑警正在仔细地收集者证据。</a>   
          </div>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    过多的效果的效果不演示了,在html上已经详细的讲过了,可以去翻一翻之前的文章。
    结构伪类选择器:根据文档结构来选择。
    li:first-child:第一个li。
    li:last-child:最后一个li。
    li:nth-child(n):n代表的就是第几个li,n=4的话就是第四个li。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            	li:first-child {
            		color: pink; 
            	}
            	li:last-child {   
            		color: purple;
            	}
            	li:nth-child(2) {   
    				color: skyblue;
    				font-size: 12px;
            	}
    			li:nth-child(3) { 
    				color: green;
    				font-size: 12px;
    			}
            </style>
        </head>
        <body>
        	<ul>
        		<li>静夜思</li>
        		<li>李白</li>
        		<li></li>
    			<li>床前明月光,</li>
    			<li>疑是地上霜。</li>
        		<li>举头望明月,</li>
        		<li>低头思故乡。</li>
        	</ul>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    li:nth-child(odd):排在奇数的li。
    li:nth-child(even):排在怕偶数的li。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            	 li:nth-child(odd) {  
    				color: pink;
            	}
    
            	li:nth-child(even) {  
    				color: deeppink;
            	}
    		</style>
        </head>
        <body>
        	<ul>
        		<li>望庐山瀑布</li>
        		<li>【作者】李白</li>
        		<li>【朝代】唐</li>
        		<li>日照香炉生紫烟</li>
        		<li>遥看瀑布挂前川。</li>
        		<li>飞流直下三千尺,</li>
        		<li>疑是银河落九天。</li>
        	</ul>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    li:nth-child(2n/3n/4n):2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li。4n是指第0、4、8、12、16等个li。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
    			li:nth-child(3n) {  
    				color: pink;
            	}
    		</style>
        </head>
        <body>
        	<ul>
        		<li>赠汪伦</li>
        		<li>【作者】李白</li>
        		<li>【朝代】唐</li>
        		<li>李白乘舟将欲行,</li>
        		<li>忽闻岸上踏歌声。</li>
        		<li>桃花潭水深千尺,</li>
        		<li>不及汪伦送我情。</li>
        	</ul>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    li:nth-child(even/odd/3n/n):从第一个li开始数的。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
            	li:nth-child(even) { 
                    color: pink;
                }
            </style>
        </head>
        <body>
        	<ul>
        		<li>白雪歌送武判官归京</li>
        		<li>【作者】岑参</li>
        		<li>【朝代】唐</li>
        		<li>北风卷地白草折,胡天八月即飞雪。</li>
        		<li>忽如一夜春风来,千树万树梨花开。</li>
        		<li>散入珠帘湿罗幕,狐裘不暖锦衾薄。</li>
        		<li>将军角弓不得控,都护铁衣冷难着。</li>
        		<li>瀚海阑干百丈冰,愁云惨淡万里凝。</li>
                <li>中军置酒饮归客,胡琴琵琶与羌笛。</li>
                <li>纷纷暮雪下辕门,风掣红旗冻不翻。</li>
                <li>轮台东门送君去,去时雪满天山路。</li>
                <li>山回路转不见君,雪上空留马行处。</li>
        	</ul>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    li:nth-last-child(even/odd/3n/n):从最后一个开始数。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
                li:nth-last-child(even) { 
                    color: skyblue;
                }
            </style>
        </head>
        <body>
        	<ul>
        		<li>白雪歌送武判官归京</li>
        		<li>【作者】岑参</li>
        		<li>【朝代】唐</li>
        		<li>北风卷地白草折,胡天八月即飞雪。</li>
        		<li>忽如一夜春风来,千树万树梨花开。</li>
        		<li>散入珠帘湿罗幕,狐裘不暖锦衾薄。</li>
        		<li>将军角弓不得控,都护铁衣冷难着。</li>
        		<li>瀚海阑干百丈冰,愁云惨淡万里凝。</li>
                <li>中军置酒饮归客,胡琴琵琶与羌笛。</li>
                <li>纷纷暮雪下辕门,风掣红旗冻不翻。</li>
                <li>轮台东门送君去,去时雪满天山路。</li>
                <li>山回路转不见君,雪上空留马行处。</li>
        	</ul>
        </body>
    </html>
    

    效果如下:
    在这里插入图片描述目标伪类选择器::target:选择该文档中特定“id”的元素。
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            :target
            {
                border: 2px solid #d56d3d;
                height: 50px;
                font-size: 20px;
                text-align: center;
                line-height: 50px;
                background-color: #00a4ff;
                color: purple;
            }
        </style>
    </head>
    <body>
    <h1>找一找我在哪里?</h1>
    <p><a href="#zheli">它在这里!!</a></p>
    <p><a href="#zhebian">躲在这里了!!</a></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p id="zheli"><b>我在这里</b></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p id="zhebian"><b>我在这边.</b></p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </body>
    </html>
    

    首先打开的页面是这样的:
    在这里插入图片描述
    当我们点击第一链接的时候,就变成:
    在这里插入图片描述当我们点击第二链接的时候,就变成:
    在这里插入图片描述

    展开全文
  • CSS伪类
  • 伪类选择器 四、状态伪类       状态伪类主要针对表单进行设计的,由于表单是UI设计的灵魂,因此吸引了广大用户的关注。UI是User Interface(用户界面)的缩写,UI元素的状态一般包括...
  • 伪类选择器 二、结构伪类       结构伪类是CSS3新设计的选择器,它利用文档结构树实现元素过滤,通过文档结构的相互关系来匹配特定的元素,从而减少文档内class属性和ID属性的定义,...
  • 伪类也是一种“标签”(可能不严谨),这个东西可以应用在很多其他标签上,只是伪类和超链接标签结合在一起用,更契合而已; 方式
  • 伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于...
  • CSS伪类:事件伪类

    2020-07-09 11:43:42
    伪类:鼠标移动上去,字体颜色、背景颜色或边框的一种或多种样式发生了改变。 hover----鼠标移动上去 背景颜色从白色–>蓝色 字体颜色从黑色–>白色 li:hover{ background-color: #47A0FC; color: white; } ...
  • 伪元素和伪类的区别总结

    万次阅读 多人点赞 2019-05-27 18:00:22
    其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 伪...
  • 伪类&伪元素

    2019-12-15 14:00:36
    目录定义伪类选择器伪元素伪类伪元素 定义 伪类选择器 什么是伪类伪类是选择器,用于选择处于特定状态的元素 :伪类名 The pseudo-class concept is introduced to permit selection based on information that...
  • CSS伪类

    千次阅读 多人点赞 2020-11-01 15:22:58
    伪类选择元素基于的是当前元素处于的状态。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 在CSS定义中,a:hover 必须被置于 a:link 和 a:...
  • 08网络工程--- 网页制作 LOGO 第 13 章 css 伪类与伪元素 主要内容 伪类语法 锚伪类 firs-child 伪类与 lang 伪类 伪元素的语法与使用 13.1 伪类语法 选择器伪类 { 属性值} 选择器.类伪类 { 属性值} a.two:link {...
  • 本篇文章给大家带来的内容是关于什么是伪类和伪元素?伪类和伪元素的区别的区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、伪类种类 2、伪元素种类 (1)伪类作用对象是...
  • css伪类伪元素

    2019-10-26 00:14:27
    伪类:单冒号 : 已有元素处于某种状态时为其添加对应的样式 伪类并不改变任何DOM内容 伪类的效果可以通过一个实际的类来达到 状态伪类::active、:focus、:hover、:link、:visited、 结构化伪类::first-child...
  • 伪类和伪元素

    2018-10-09 16:44:00
    css伪类与伪元素css选择器常见包括id(#id)、标签(tag)、class(.class)、属性[attr=attrval]等,还包括伪元素和伪类选择器。 伪类:状态伪类和结构性伪类。 状态伪类: :link、:visited、 :hover、 :active ...
  • 伪类元素 伪元素

    2019-12-10 20:43:55
    CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字 当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类 (1)伪类选择器之状态类 :...
  • CSS伪类与伪元素

    千次阅读 多人点赞 2019-03-11 16:47:00
    为什么要引入伪类与伪元素? css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标...
  • 1、伪类与伪元素 CSS伪类:用于向某些选择器添加特殊的效果。 伪类 作用 :hover 将样式添加到鼠标悬浮的元素 :active 将样式添加到被激活的元素 :focus 将样式添加到获得焦点的元素 :link 将样式添加到未被访问...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,940
精华内容 9,976
关键字:

伪类