精华内容
下载资源
问答
  • 链接伪类选择器

    2020-04-07 19:32:26
    链接伪类选择器(重点) 伪类选择器: 为了和我们刚才学的类选择器相区别 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘 作用: 用于向某些选择器添加特殊的效果。比如给链接...

    链接伪类选择器(重点)

    伪类选择器:

    为了和我们刚才学的类选择器相区别
    类选择器是一个点 比如 .demo {}
    而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘

    作用:

    用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

    因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器。

    - a:link      /* 未访问的链接 */
    - a:visited   /* 已访问的链接 */
    - a:hover     /* 鼠标移动到链接上 */
    - a:active    /* 选定的链接 */
    
    • 注意
    • 写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
    • 记忆法
      • love hate 爱上了讨厌
      • **lv **包包 非常 hao
    • 因为叫链接伪类,所以都是 利用交集选择器 a:link a:hover
    • 因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
    • 实际工作开发中,我们很少写全四个状态,一般我们写法如下:
    a {   /* a是标签选择器  所有的链接 */
    			font-weight: 700;
    			font-size: 16px;
    			color: gray;
    }
    a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    			color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
    }
    
    展开全文
  • 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>
    

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

    展开全文
  • 伪类选择器-链接伪类选择器 伪类选择器用于向某些选择器增加特殊的效果,比如给链接增加特殊效果,比如可以选择第1个,第n个元素; 为了和[链接伪类选择器] 语法::link {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ....

    伪类选择器-链接伪类选择器
    伪类选择器用于向某些选择器增加特殊的效果,比如给链接增加特殊效果,比如可以选择第1个,第n个元素;
    为了和
    [链接伪类选择器]
    语法:
    :link {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    :visited {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    :hover {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    :active {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}

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

    通常只有两种属性,为默认属性和鼠标经过属性,简写:
    a {

        /* 默认属性 */
    }

    a:hover {
        /* 鼠标经过属性 */
    }

     

    原始效果如下:

    鼠标经过效果如下:

    点击鼠标左键不松开效果:

    点击之后的效果:

    展开全文
  • 文章目录1 什么是复合选择器2 后代选择器3 子选择器4 并集选择器5 伪类选择器6 链接伪类选择器7 :focus伪类选择器8 复合选择器总结 1 什么是复合选择器 在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合...

    1 什么是复合选择器

    在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

    ● 复合选择器可以更准确,更高效的选择目标元素(标签)
    ● 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
    ● 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

    2 后代选择器

    后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔当标签发生嵌套时。内层标签就成为外层标签的后代。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 我想要把ol里面的小li选出改为pink */
            ol li {
                color: pink;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是ol的孩子</li>
            <li>我是ol的孩子</li>
            <li>我是ol的孩子</li>
        </ol>
    
        <ul>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ul>
    </body>
    </html>
    

    元素1 元素2 {样式声明}

    上述语法表示选择元素1里所有元素2(后代元素)

    • 元素1和元素2中间用空格隔开
    • 元素1是父级。元素2是子级。最终选择的是元素2
    • 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可

    3 子选择器

    子元素选择器(子选择器)只能选挥作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

    语法

    元素1>元素2(样式声明)
    

    上述语法表示选择元素1里面的所有直接后代(子元素)

    • 元素1和元素2中间用大于号隔开
    • 元素1是父级,元素2是子级,最终选择的是元索2
    • 元素2必须是亲儿子。其孙子、重孙之类都不归他管。你也可以叫他亲儿子选择器

    4 并集选择器

    并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明。

    井集选择器是各选择器通过英文逗号(, )连接而成,任何形式的选择器都可以作为并集选择器的一部分。

    语法:

    元素1,元素2 {样式声明}
    

    上述语法表示选择元素1和元素2

    5 伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

    伪类选择器书写最大的特点是用置号(:)标。比如:hover、:first-child。

    因为伪类选择器很多.比如有链接伪类。结构伪类等.所以这里先给大家讲解常用的链接伪类选择器。

    6 链接伪类选择器

    image-20210409100813773
    链接伪类选择器注意事项

    1. 为了确保生效,请按照LVHA的循顺序声明:link :visited :hover :active.
    2. 记忆法: love hate或者Iv包包hao.
    3. 因为a链接在浏览器中具有默认样式。所以我们实际工作中都需要给链接单独指定样式。

    实际开发中写法

            a {
                color: #333;
                text-decoration: none;
            }
            a:hover {
                color: #369;
            }
    

    7 :focus伪类选择器

    :focus伪类选择器用于选取获得焦点的表单元素。

    焦点就是光标,一般情兄<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

    8 复合选择器总结

    image-20210409101919226

    展开全文
  • 链接伪类选择器 :link /*未访问的链接 */ :visited /*已访问的链接 */ :hover /*鼠标移动到链接上 */ :active /*选定的链接 当我们点击别松开鼠标 显示的状态 */ 注意写的时候,他们的顺序尽量不要颠倒 按照lvha的...
  • 链接伪类选择器详解

    2020-05-09 09:22:32
    链接伪类选择器:  为了和我们之前学的选择器相区别  类选择器用一个点,比如.suv{}  伪类用两个点的冒号,比如:link()  伪类选择器作用:  用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如...
  • 链接伪类选择器有link visited hover active 为了确保书写生效,按照LVHA的顺序来书写 ,否则可能失效
  • HTML 链接 伪类选择器

    2020-03-24 21:00:37
    HTML 链接 伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ 注意:写的时候他们的顺序尽量不要颠倒,按照 lvha 的顺序。(love hate)...
  • CSS 复合选择器总结 链接伪类选择器,超链接<a>标签 可以设置<a>标签的各类状态,例如鼠标经过时,访问过等等。
  • CSS的链接伪类选择器

    2020-10-15 22:31:01
    CSS的链接伪类选择器 a:属性a:属性a:属性 四个属性,见下面的注释。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
  • 链接伪类选择器 伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果。 之前我们学过类选择器,以点“.”开头,为了区分开来,伪类选择器则是以冒号“:”开头。 类选择器: .demo { } 伪类选择...
  • 后代选择器 <!-- 后代选择器 选择器中间一个空格再写一个选择器 元素1 元素2 {样式声明} ul li {样式声明} --> <style> ul li { color: coral; } ol li a { color: yellow; } .nav li a { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,069
精华内容 427
关键字:

链接伪类选择器