精华内容
下载资源
问答
  • 类选择器
    千次阅读 多人点赞
    2020-12-24 18:01:18

    区别 1:

    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

    下面代码是正确的:

    <p>
    三年级时,我还是一个
    <span class="stress">胆小如鼠</span>
    的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个
    <span class="stress">勇气</span>
    来回答老师提出的问题。
    </p>
    

    而下面代码是错误的:

    <p>
    三年级时,我还是一个
    <span id="stress">胆小如鼠</span>
    的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个
    <span id="stress">勇气</span>
    来回答老师提出的问题。
    </p>
    

    区别 2:

    不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

    下面代码正确:

    .stress{
        color:red;
    }
    .bigsize{
        font-size:25px;
    }
    <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
    

    而下面代码是错误的:

    #stressid{
        color:red;
    }
    #bigsizeid{
        font-size:25px;
    }
    <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
    

    区别 3:ID 能包含更多含义

    类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:

    注意:

    标准中说id必须是唯一的,并且不能包含空格。如果加了空格,违反了标准,通过就id获取不到该元素。所以CSS和js都不会起作用。而class则没有这个限制

    更多相关内容
  • CSS伪类选择器

    万次阅读 多人点赞 2021-11-01 13:35:22
    CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器类选择器 我们伪类选择器有几种,我们来看看第一种 静态伪类: 只能用于超链接的样式 :link超链接点击之前 ...

    CSS的选择器有很多种,有一种选择器,与其他选择器完全不同,我们来讲一讲这个选择器——伪类选择器

    伪类选择器

    伪类选择器:用来描述一个元素的特殊状态!比如第一个元素、某个元素的子元素、鼠标点击的元素

    我们伪类选择器有几种,我们来看看第一种

    静态伪类: 只能用于超链接的样式

    • :link 超链接点击之前
    • :visited 链接被访问过之后

    以上两种样式,只能用于超链接

    实际用法还得实际分析,我们来看看这一张图:

    这里我写了两个超链接,看我箭头指的文章,你会发现这两个超链接颜色不一样

    为什么会不一样呢?

    因为第一个链接,是我访问过的网站链接

    而第二个链接,我的浏览器没有访问过,系统会默认给访问过与没访问过的超链接显示不同的颜色

    我们访问一下试试,看看他会不会变色

     访问过后,第二个超链接的颜色也变成了第一个一样了

    那么我们想让没访问过的链接显示其他颜色呢?

    这时候就需要我们的伪类选择器上场了,我们在style标签里面用css伪类选择一下

    我们使用link来选择没有访问过的超链接

    <style>
            a:link{color: aqua;}
    </style>

    注意,我们的伪类选择器是使用“:”来连接

    我们在添加一个超链接,也是没有访问过的网址

    我们看看效果

     这里,我们通过伪类选择器的link对没有访问过的网址进行颜色改变

    而访问过的链接颜色没有变化

    当我们访问之后,他也就不会被link选中了,所以访问过后,是这样的

     到这,有人就问了,访问之前可以被选择,那我想要访问后的链接也变色可不可以呢?

    当然可以,事物都有对立一面,编程也一样,可以选择访问之前的超链接,那就肯定可以选择访问之后的超链接

    我们写个访问之后的选择,让它变成其他颜色

    <style>
            a:link{color: aqua;}
            a:visited{color: chartreuse;}
    </style>

    下面那个a:visited就是另一个选择属性了,他会选择被访问过的超链接

    我们看看被访问过的超链接有没有变色

    最后,再补充一点,看看这张图!

     我这里使用一个字体属性,将:visited选择中的字体变大,可是字体并没有改变,这是为什么呢???

    因为为了保护隐私,我们的:visited只能改变颜色属性,其他都都不能改变,但是如果我改变:link选择的字体,将会是这样的

     不管是访问过还是没有访问过的链接,他都改变了字体!这个区别记住就可以,我这里给个测试代码,大家运行对比一下效果

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <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>伪类选择器</title>
    
        <style>
            a:link{color: aqua;font-size: 10px;}
            a:visited{color: chartreuse;font-size: 50px;}
        </style>
    </head>
    <body>
        <h1>伪类选择器</h1>
        <h2>静态伪类</h2>
        <p>什么是静态伪类?</p>
        <a href="https://blog.janyork.com/">我的博客</a>
        <a href="https://hao.360.com/">360导航</a>
        <a href="https://qq.com/">腾讯网</a>
        <a href="https://google.com">GooGle</a>
    </body>
    </html>

     这是,两个静态的伪类选择,我们还有一些其他状态的伪类选择

    我们继续讲几个

    动态伪类:针对所有标签都适用的样式

    • :hover “悬停”:鼠标放到标签上的时候
    • :active “激活”: 鼠标点击标签,但是不松手时。
    • :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

    我们经常看到一些网页,可以让鼠标的样式在其中发生改变,也就是说,我们这种标签,是对于鼠标产生效果

    比如,我要写一个鼠标悬停变色,我就得用伪类选择器的:hover来选择,我们来写一个

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    这里有三个h3标签,我们使用hover对他进行选择

        <style>
            h3:hover{color: cyan;font-size: 25px;}
        </style>

    当我们鼠标移动到标题时,标题会变成天蓝色,字体变成25个像素大小

    比如这样

     然后我们还可以看看第二个属性

    :active可以让你鼠标点击但是不松开时显示你的CSS效果

    我们也来写一下,直接加在上面的代码里面

        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
        </style>

    这时,只要我在标题上按住左键,他就变成紫红色,字体缩小到10个像素大小

    是不是觉得很好玩呢?

     那么我们现在就玩一玩剩下的:focus选择

    这个可没什么意思了,他是针对于输入框等其他内容的,这里我演示不了,大家可以去W3里面试试这个效果:

    CSS :focus 伪类 (w3school.com.cn)icon-default.png?t=L9C2https://www.w3school.com.cn/cssref/pr_pseudo_focus.asp#:~:text=%3Afocus%20%E4%BC%AA%E7%B1%BB%E5%9C%A8%E5%85%83%E7%B4%A0%E8%8E%B7%E5%BE%97%E7%84%A6%E7%82%B9%E6%97%B6%E5%90%91%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E7%89%B9%E6%AE%8A%E7%9A%84%E6%A0%B7%E5%BC%8F%E3%80%82%20%E6%B3%A8%E9%87%8A%EF%BC%9A%20IE%20%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E6%AD%A4%E5%B1%9E%E6%80%A7%E3%80%82%20%E8%BF%99%E4%B8%AA%E4%BC%AA%E7%B1%BB%E5%BA%94%E7%94%A8%E4%BA%8E%E6%9C%89%E7%84%A6%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82,%E4%BE%8B%E5%A6%82%20HTML%20%E4%B8%AD%E4%B8%80%E4%B8%AA%E6%9C%89%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E7%84%A6%E7%82%B9%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%87%BA%E7%8E%B0%E4%BA%86%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%85%89%E6%A0%87%EF%BC%9B%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%9C%A8%E7%94%A8%E6%88%B7%E5%BC%80%E5%A7%8B%E9%94%AE%E5%85%A5%E6%97%B6%EF%BC%8C%E6%96%87%E6%9C%AC%E4%BC%9A%E8%BE%93%E5%85%A5%E5%88%B0%E8%BF%99%E4%B8%AA%E8%BE%93%E5%85%A5%E6%A1%86%E3%80%82%20%E5%85%B6%E4%BB%96%E5%85%83%E7%B4%A0%EF%BC%88%E5%A6%82%E8%B6%85%E9%93%BE%E6%8E%A5%EF%BC%89%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%EF%BC%8C%E4%B8%8D%E8%BF%87%20CSS%20%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%93%AA%E4%BA%9B%E5%85%83%E7%B4%A0%E5%8F%AF%E4%BB%A5%E6%9C%89%E7%84%A6%E7%82%B9%E3%80%82大家可以试试上面两个效果,不想亲自写可以复制我的,打开就可以观察属性变化了

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <head>
        <title>伪类选择器</title>
        <style>
            h3:hover{color: cyan;font-size: 25px;}
            h3:active{color:darkmagenta;font-size: 10px;}
            h3:focus{color: green;font-size: 30;}
        </style>
    </head>
    <body>
        <h2>伪类选择器</h2>
        <h3>静态伪类选择</h3>
        <h3>动态伪类选择</h3>
        <h3>其他伪类选择</h3>
    </body>
    </html>

    其他伪类选择

    我们有时候会用到一些像列表一样的结构,比如这样

    <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>

    如果我们想让它的第一个标签变色呢?该怎么选择?

    有人说,那多简单啊,加个class或者id都可以

    但是,当我将第一行删去,第二行就变成第一行,那此时第二行没有id,也没有class,那就不会变色,但是我要求第一行始终是我要的效果啊!

    那,这个时候,就可以用我们的伪类选择器来写了,这次我们用一些平常不怎么用的选择属性

    我们可以这样写,先看代码再分析

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <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>其他伪类选择</title>
        <style>
            li:first-child{color: green;}
        </style>
    </head>
    <body>
        <ui>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这里我们使用:first-child选择li标签第一个元素,让他变成绿色,注意了,他是始终选择第一行

    我们看看效果:

     这个时候,我们删掉第一行,此时第二行变成了第一行

     此时,这个第一行仍然是绿色

    那么有人就问了,可不可以让最后一个标签也始终有CSS的效果?当然可以!

    我们使用:last-child可以达到这个效果,我这里就不做演示了,自己尝试

    那既然这样也可以,又有人问了,我想让他其他行数保持属性呢?或者说我想让他单数行或者双数行改变属性呢?

    当然,也可以实现,我们还要一个选择器——:nth-child()

    这个选择器有一个(),这个括号是干嘛的?当然是填你要改变的行数的,比如,改变所有行数样式可以这样:nth-child(n)

    改变第2行的颜色就是这样写:

    li:nth-child(2){color: mediumvioletred;}

    当然,既然括号里面可以指的数字,那我岂不是可以玩玩算法,我可以这样li:nth-child(2n)

    还真没错,真可以,效果是这样的

     那么,既然可以怎么玩,那么剩下的就自己研究吧!不过,其实选择单数双数有更简单的,不需要2n

    Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

    所以,这样就可以:

    :nth-child(odd)
    :nth-child(even)

    不多说,大家自己去多试试吧!

    嘿嘿嘿!别以为就这样完了,我再说个让伪类选择更简单的选择

    我们上面的选择都是直接选择,但是我们还有一种伪类选择,可以反选,什么是反选?就是除了我选中的,其余都执行CSS效果

    这个选择器就是 li:not(),这个括号里面填需要排除的元素,比如我需要让除第一个元素,其他元素都变红色,我可以这样写

    <!DOCTYPE html>
    <html lang="Zh-cn">
    <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>其他伪类选择</title>
        <style>
            li:not(li:first-child){color: orangered;}
        </style>
    </head>
    <body>
        <ui>
            <!-- <li>one</li> -->
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ui>
    </body>
    </html>

    这样就选择了li标签中除了li:first-child的所有元素,效果是这样的:

     最后,你有没有发现,我这个ui、标签里面全都是li标签,所以我每次都是选择li标签,但是我要是再里面加入其他标签,他也还是只改变li标签,比如这样:

     这个CSS效果没有让第一个元素变色,也没有让第一个li标签变色,像这样的情况,我们就应该用另一个选择方式——:first-of-type

    这个是直接选择父元素标签内指定标签的第一个元素,这样这个CSS效果就不会像上面那个一样失效

    所以,有时候写代码,发现CSS失效,可以看看是不是这个原因

    好了,伪类的选择器就讲到这,下次再说一说伪元素

    展开全文
  • 类选择器

    千次阅读 2019-03-24 16:10:03
    与ID选择器类似,类选择器也是一种选择器。但是与ID选择器有一些差别。 1、格式 <style> .类名{ 具体属性 } </style> 2、注意事项 与ID选择器类似,class名开头要以字母或者下划线。 class...

    与ID选择器类似,类选择器也是一种选择器。但是与ID选择器有一些差别。

    1、格式

        <style>

    .类名{

              具体属性

    }

         </style>

    2、注意事项

    与ID选择器类似,class名开头要以字母或者下划线。

    class名称不能有已存在的语义。

    与ID选择器不同,class名称可以重复。

    在类名前面加"."。

    在一个标签中,可以存在多个类名。格式为:<标签名 class="类名1 类名2 类名3……">。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style type="text/css">
            .p1 {
                color: red;
            }
    
            .p2 {
                text-decoration: underline;
            }
    
            .p3 {
                text-size: 30px;
                color: deeppink;
            }
    
            .p4 {
                color: blue;
            }
    
            .p5 {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
    <p class="p1">去年今日此门中,</p>
    <p class="p2">人面桃花相映红。</p>
    <p class="p3">人面不知何处去,</p>
    <p class="p4 p5">桃花依旧笑春风。</p>
    </body>
    </html>

     

    3、简化代码

    在网页编写过程中,会出现许多不同标签同时拥有一个属性。这时如果一个一个编写,显得有些复杂,需要用到简化。

    在标签中先不写类名。首先在CSS中定义好类名及其属性,再将符合条件的类加到标签中去。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style type="text/css">
            .blue {
                color: blue;
            }
    
            .Size {
                font-size: 50px;
            }
    
            .ul {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
    <p class="blue Size">去年今日此门中,</p>
    <p class="ul Size">人面桃花相映红。</p>
    <p class="Size ">人面不知何处去,</p>
    <p class="blue ul Size">桃花依旧笑春风。</p>
    </body>
    </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>
    

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

    展开全文
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值;...标签选择器主要针对的是页面中某个标签中的样式设置...2.类选择器 语法格式 <style type="text/css"> .类名{ 属性:属性值; 属性:属性值.
  • CSS常用五类选择器

    千次阅读 2020-12-22 09:52:11
    ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的...⑶类选择器(单类选择器,多类选择器) ⑷属性选择器(简单属性选择,具体属性选择,部分属性选择, 特定属
  • 本章讲解的内容为 CSS 伪类中的 锚伪类选择器 1. CSS 锚伪类选择器有哪些 2. CSS 锚伪类选择器 的具体含义 3. CSS 锚伪类选择器 各个伪类的使用方式 有兴趣的可以查看 " CSS 伪类选择器" 总结这篇文章 废话不多说,...
  • ,用于向某些选择器添加特殊的效果。用伪定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 伪元素,是html中不...
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;...h2 {background-color: red;...将所有p元素字体大小设置为30像素同时添加灰色背景;...类选择器  ...(1)单类选择器...
  • CSS结构伪类选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构伪类选择器 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-...
  • ID选择器和类选择器的合理使用

    千次阅读 2018-05-14 07:00:12
    什么是ID选择器和类选择器作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;...
  • 前端人员在写静态页面时,不可避免的会遇到选择器的...类选择器、属性选择器、伪类选择器的权重为 0,0,1,0  id选择器的权重为0,1,0,0  行内样式的权重为1,0,0,0  !imporatant的权重为∞ 权重大的选择器覆盖权重小
  • 1. 标签选择器 ... 例如: ...使用类选择器可以相同或不同的标签分类设置不同的样式。定义类选择器时,需要在类名称前面加一个“.”。 语法如下: .类名{样式属性:取值:样式取值:取值:…} 实例如下
  • css中的伪类选择器有哪些

    千次阅读 多人点赞 2021-03-26 00:08:34
    1 伪类选择器 ① 动态伪类选择器(5个) :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素。 :active 选择鼠标在上面并且按键按下不松手的元素 :...
  • CSS选择器用于选择你想要的...UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选,UI元素状态伪类选择器有如下几个。 示例 描述 示例 描述 :link 选择链接元素 :visited 访问过链接元素...
  • CSS3选择器--结构性伪类选择器

    万次阅读 多人点赞 2017-01-01 21:51:20
    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选择器,不能随便取名   常用的伪类选择器是使用在a元素上的几种,如a:link|a:visited|a:hover|a:...
  • 一些常见的伪类选择器

    万次阅读 2019-03-31 17:06:18
    一、向被激活的元素添加样式。 伪类选择器 :active 使用此伪类选择器可点击转换样式,可改变所数的类的宽度,高度,颜色等等、、、 <style>标签内容 .weileiyi{ ...
  • 标签、类选择器及CSS命名规范

    千次阅读 2019-06-20 23:22:01
    使用HTML标签名称作为选择器,按标签名称分类,为页面中某一标签指定统一的CSS样式。 基本语法格式: 标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或者 元素名{属性1:属性值1;属性2:属性值2;...
  • 类选择器详解

    千次阅读 2019-12-20 23:54:06
    类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如: <h1 class="important">This heading is very important.</h1> <p class="important...
  • CSS基础选择器 标签选择器(元素选择器) ...其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;...类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下: .类名
  • CSS 选择器有很多,大致可分为:基础选择器、组合选择器、伪类选择器和 CSS3 选择器 基础选择器 标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这...
  • CSS多类选择器及类的嵌套使用

    千次阅读 2019-04-25 21:35:20
    类选择器 在下面的例子中,有两个类选择器important和warming <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style type=...
  • 一:什么是 CSS 中的 class 选择器。 二:什么是 CSS 中的多类名选择器
  • ID选择器与Class类选择器区别

    千次阅读 2018-11-21 14:13:39
    class和id选择器得区别:class选择器的值不是唯一的,我可以在多个标签共用一个class名 ID选择器: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8...
  • 1.标签选择器 标签选择器中的“标签”指的是HTML标签,such as:a、span、div、p、li、img等。 格式举例: .... div{backgroud-color:red; font-size:16px;...2.类选择器 class 选择器用于...
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。...2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid red;}
  • CSS选择器作用(重点): 要想将CSS样式应用于特定的HTML元素.首先需要找到该目标元素.在CSS中.执行这一任务的样式规则部分被称为选择器. 1.标签选择器: 标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为...
  • css3之UI元素状态伪类选择器

    千次阅读 2016-09-21 19:48:27
    所谓UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用! 浏览器兼容性: E:hover 支持firefox、safari、Opera、ie8、chrome  E:active 支持firefox、safari、Opera、chrome ...
  • 类选择器与id选择器的使用与区别

    千次阅读 2019-04-01 12:46:28
    类选择器 类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可。 类选择器最大的优势是可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,811,172
精华内容 724,468
关键字:

类选择器

友情链接: picochip-spacc.rar