韦德国际1946国际网址:CSS指标伪类E

作者: 韦德国际1946国际网址  发布:2019-08-26

[转]CSS指标伪类E:target,css

CSS3 target 伪类不得不说这些事儿(纯CSS完结tab切换)

是还是不是认为target有一点眼熟?!

今日要讲的不是HTML的<a>标签里面有个target属性。

target伪类是css3的新属性。

聊起伪类,对css属性的人必然都理解:hover、:link、:visited、:focus等等,target用法跟她们是同出一辙的。

法定概念是:

UENCOREL 带有前边跟有锚名称 #,指向文书档案内有些具体的因素。那个被链接的因素正是指标成分(target element)。

:target 选取器可用于选拔当前运动的目的成分。

比如你是率先次见到那一个概念,是或不是有一些懵?!不妨~程序猿要用代码来沟通。举个栗子。

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid  blue;
 
}
</style>
</head>
<body>
 
 
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
 
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
 
 
</body>
</html>

看完代码是还是不是没feel?~That's all right.一起来看功能图。

伊始化是如此的:

 

 

韦德国际1946国际网址 1

 

 

当自身点击“跳转至内容 1”的时候,形成了这么:

 

韦德国际1946国际网址:CSS指标伪类E。 

 

韦德国际1946国际网址 2

 

 

有木有feel到target跟其他伪类的诡异?!

哈哈~来,直接切入要讲的主旨!!!

应用target的表征,能够达成纯css的tab效果切换。

运用target的特点,能够兑现纯css的tab效果切换。

选取target的表征,能够达成纯css的tab效果切换。

(首要事务说叁次!)

CSS3 target 伪类不得不说那多少个事儿(纯CSS完结tab切换)

是或不是感觉target有一些眼熟?!

明日要讲的不是HTML的<a>标签里面有个target属性。

target伪类是css3的新属性。

提及伪类,对css属性的人必然都晓得:hover、:link、:visited、:focus等等,target用法跟他们是同出一辙的。

官方概念是:

U卡宴L 带有前面跟有锚名称 #,指向文书档案内有个别具体的要素。这几个被链接的成分便是目的成分(target element)。

:target 选拔器可用于选择当前活动的对象成分。

假定你是第一次拜访这一个概念,是否有一点懵?!不要紧~程序猿要用代码来沟通。举个栗子。

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid  blue;
 
}
</style>
</head>
<body>
 
 
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
 
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
 
 
</body>
</html>

看完代码是或不是没feel?~That's all right.一同来看作用图。

开头化是如此的:

 

 

韦德国际1946国际网址 3

 

 

当自身点击“跳转至内容 1”的时候,产生了这么:

 

 

 

韦德国际1946国际网址 4

 

 

有木有feel到target跟别的伪类的例外?!

哈哈~来,直接切入要讲的核心!!!

应用target的性状,能够兑现纯css的tab效果切换。

运用target的个性,能够实现纯css的tab效果切换。

接纳target的表征,可以兑现纯css的tab效果切换。

(主要事务说一次!)

CSS之伪类,css

1.

:link                     向未被访问的链接增添样式

:visited                向已被访谈的链接增多样式

:hover                  当鼠标悬浮在要素上方时,向成分增添样式

:active                 向被激活的因素增多样式(被点击)

如上多样伪类应用于超链接时,a:hover必得在a:link和a:visited之后,a:active必得在a:hover之后,a:link和a:visited两个的一一未有规定

1.1 超链接:

<style>
a:link{
    color:red;    
}
a:visited{
    color:green;    
}
a:hover{
    color:blue;    
}
a:active{
    color:yellow;    
}
</style>

<a href="#">pmx-cnblogs</a>

 1.2 div

<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    border:3px solid blue;
    overflow:hidden;    
    transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s;    
    line-height:100px;
    text-align:center;
}

div:hover{
    background-color:green;
    width:300px;    
    height:300px;
    line-height:300px;    
    font-size:2em
}
div:active{
    color:yellow;
}
</style>

<div>This is div</div>

 平常境况:

韦德国际1946国际网址 5

鼠标移到div上时的标准:

韦德国际1946国际网址 6

鼠标左键按下后得标准:

韦德国际1946国际网址 7

 2. :first-child

 p:first-child选择作为有个别成分的率先个子成分的p成分,并非挑选p成分的第叁个子成分

<style>
#myDiv > p:first-child{
   background-color:#3C6;    
}
</style>

<body>
    <p>p8</p>
    <div id='myDiv' style='width:300px;height:300px;overflow:auto'>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>
            <p>p4</p>
            <p>p5</p>
        </div>
    </div>
    <p>p6</p>
    <p>p7</p>
</body>

韦德国际1946国际网址 8

P1作为myDiv的首个子成分被选中

 3. :focus

向得到大旨的成分增多特殊体制,比方按键被点击后,文本框输入文本

<style>
input:focus{
    background-color:yellow;    
}
</style>

<input type='text' value=""/>

 <style> :lang(zh){ color:red; } </style> <p lang="zh">p7</p>

韦德国际1946国际网址 9

5. :target

:target伪类和超链接有关,当大家盼望开发页面也许单击开关定位到页面中某些成分时,经常是那样的

<a href="#jump>jump</a> <!--必须是ID号-->
<p id="#jump">This is paragraph</p>

:target就是捕获点击超链接后,定位到的因素,在:target里面包车型地铁CSS代码都以调控那一个捕获到的要素的。

韦德国际1946国际网址 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        :target{
            background-color:red;
        }
    </style>
</head>
<body>
    <a href="#jump1">jump To 1</a>
    <a href="#jump2">jump To 2</a>
    <p id="jump1">This is paragraph1</p>
    <p id="jump2">This is paragraph2</p>
</body>
</html>

韦德国际1946国际网址 11

点击jump to 1时,paragraph1变红。

点击jump to 2时,paragraph2变红

:target表示全部被一定到的成分,背景观退换。要是大家想让paragraph1单独变红,能够那样:

<style> 
        #jump1:target{
            background-color:red;
        }
    </style>

 案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        .tab_list{
            position: relative;
            margin:50px;
            min-height: 200px;
        }
        .tab_content{
            position: absolute;
            width:600px;
            height:170px;
            padding:15px;
            border:1px solid #91a7b4;
            border-radius:3px;
            box-shadow:0 2px 3px rgba(0,0,0,0.1);
            font-size:1.2em;
            line-height:1.5em;
            color:#666;
            background-color: #fff;
            overflow: hidden;
        }
        .tab_menu{
            position: absolute;
            top:100%;
            list-style-type: none;
            margin:0;
            padding:0;

        }
        .tab_menu li{
            display:inline-block;
        }
        .tab_menu a{
            text-decoration: none;
            display:block;
            padding:5px;
            font-size:12px;
            font-family:"楷体";
            color:#333;
            border:1px solid #91a7b4;
            border-radius: 0 0 5px 5px;
            background-color:#e3f1f8;
            margin-right:10px;
        }
        :target{
            z-index:10;

        }

    </style>
</head>
<body>
    <div class="tab_list">
        <ul class="tab_menu">
            <li><a href="#tab1">标签一</a></li>
            <li><a href="#tab2">标签二</a></li>
            <li><a href="#tab3">标签三</a></li>
        </ul>
        <div id="tab1" class="tab_content">欢迎加设计达人Q群:50063010<br/>
            设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
        </div>
        <div id="tab2" class="tab_content">
            <p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>
            最新Q群:50063010<br/>
            爱设计,爱分享——设计达人(<a href="http://www.shejidaren.com">http://www.shejidaren.com</a>)
        </div>
        <div id="tab3" class="tab_content">
            <p>高质量设计文章分享平台</p>
            <p>欢迎加设计达人Q群:50063010<br /><a href="http://www.shejidaren.com/">设计达人</a>以原创和分享一些高质量的设计文章为主,希望喜欢</p>
        </div>

    </div>
</body>
</html>

 

1. :link 向未被访谈的链接增多样式 :visited 向已被访问的链接增加样式 :hover 当鼠标悬浮在要素上方时,向成分加多样式 :act...

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:CSS指标伪类E

关键词: css Web前端 Html/Css 伟德国际登入 :target

上一篇:单位分别,vm等单位有如何区别
下一篇:没有了