伪类实例1

最新推荐文章于 2023-06-29 17:29:19 发布
最新推荐文章于 2023-06-29 17:29:19 发布
阅读量134 收藏
点赞数
原文链接：http://www.cnblogs.com/pangbing/p/8135320.html
版权

伪类实例

         效果如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    </head>
    <body>
        <div class="toubu">
            <a href="#">音乐</a>
            <a href="#">网页</a>
            <a href="#">新闻</a>
            <a href="#">视频</a>
        </div>
    </body>
</html>

css 如下：
* {
    padding: o0px;
    margin: 0px;
}
.toubu {
    width:100%;
    height: 30px;
    background: pink;
    text-align: center;
    line-height: 30px;
}

a {
    color:red;
    padding:20px;
    text-decoration: none;
}
a:hover {
    padding: 5px;
    border: 1px solid blueviolet;
    background-color: red;
    color:blue;
    
}
a:visited {
    color:green;
}

 

转载于:https://www.cnblogs.com/pangbing/p/8135320.html

dianzhan6964
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS伪类的实例(1)
m0_70273331的博客
04-30 173
content: attr(href); } [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dn8RBuoG-1651287568110)(https://pic.faremax.info/20161024221404375.png)] :focus 当元素获得焦点时的样式 input[type=“text”]:focus{ border: 1px purple solid; box-shadow: 0 0 15px black; } [外链图片转存失败,源站可能有防盗
伪类、伪元素实例
03-20
https://mp.csdn.net/postedit/88689169 伪类选择元素基于的是当前元素处于的状态，或者说是元素当前所具有的特性，而不是元素的 id/class 属性等静态的标志。由于状态是动态的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。伪元素是对元素中特定内容进行操作的，它所操作的层次比伪类更深一层，也因此它的动态性比伪类要低很多。
伪类实例
lovesea9926的专栏
09-28 409
 CSS伪类 pseudo-classa:link {color: #FF0000}     /* 未被访问的链接 红色 */a:visited {color: #00FF00}  /* 已被访问过的链接 绿色 */a:hover {color: #FFCC00}   /* 鼠标悬浮在上的链接 橙色 */a:active {color: #0000FF}   /* 鼠标点中激活链接 蓝色 */
java伪类,CSS伪类的实例
weixin_39703551的博客
03-15 116
既然说到伪类，这里就用足够的代码给表现一下他们的神奇用法。从简单到复杂，可以清晰的看清到伪类的诸多使用方法，对于有些功能近似的就取其一举例了：:first-letter为第一个字添加样式，这里用一个首字下沉的例子来演示一下：中国是以华夏文明为源泉p:first-letter{display: block;float: left;margin-right: .2em;font-size: 1.7em...
伪类实例2
dianzhan6964的博客
12-28 113
伪类实例2 导航栏2. 效果如下： <html> <head> <meta charset="utf-8"> <link rel="stylesheet" hrefHTM="a.css" /> </head&...
【CSS】CSS 常见伪类和伪元素详解及实例
新青年1号
06-03 2149
伪类和伪元素的异同 相同点： 伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。 在 CSS2 之前，伪类和伪元素的语法相同。selector.class:pseudo-element {property:value;} 不同点 伪类是通过一个抽象的类名（伪类名）捕获不存在的或者普通CSS选择器无法捕获到的信息。 伪元素是通过...
CSS伪类的实例
FareBlog
10-20 1531
既然说到伪类，这里就用足够的代码给表现一下他们的神奇用法。从简单到复杂，可以清晰的看清到伪类的诸多使用方法，对于有些功能近似的就取其一举例了：:first-letter为第一个字添加样式，这里用一个首字下沉的例子来演示一下：&lt;!--html部分--&gt; &lt;p&gt;中国是以华夏文明为源泉&lt;!--内容省略--&gt;&lt;/p&gt; &lt;!--css部分--&gt; p:first-letter{
伪类选择器示例
qq_39787515的博客
10-27 170
&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;伪类选择器示例&lt;/title&gt; &lt;style&gt; /*链接未被点击，呈现的颜色*/ a:link{ color: red; } /*链接被点击过，呈现的颜色...
伪类选择器小实例
zzlwei的博客
06-09 531
伪类选择器的分类 链接伪类选择器： E:link E:visited 用户行为选择器： E:hover E:active E:focus 语言伪类选择器：E:lang(fr) 否定伪类选择器：E:not(s) 结构性伪类选择器： E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type
CSS3伪类使用方法实例
lumot的博客
09-07 132
有时候在网页设计中会涉及到很多看上去很繁琐的设计图，这时候都会很让人头疼，那么这时候伪类就可以来帮助你解决问题了。 下面有一段实例大家可以参考一下； 1 <!DOCTYPE html> 2 <h...
CSS3新增伪类举例：
palette_的博客
05-03 2413
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。     p:last-of-type  选择属于其父元素的最后 元素的每个 元素。     p:only-of-type  选择属于其父元素唯一的 元素的每个 元素。     p:only-child    选择属于其父元素的唯一子元素的每个 元素。     p:nth-child(2)  选择属于其
hover伪类示例
howard2005的专栏
02-24 519
hover伪类示例1、效果鼠标悬停在某一记录行，背景色和字体颜色发生变化。2、代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;hover伪类示例&lt;/title&gt; &lt;sty
CSS中伪类详解和用法例子详解
最新发布
杨杨吖的博客
06-29 5428
用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。
Web实现：伪类列表伪类简单实例
jasmyn518的博客
01-23 249
效果图如下： HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例</title> <link rel="stylesheet" href="index.css"> </head> <body> <ul class="clearfix">
伪类练习三
weixin_44549398的博客
06-18 132
这是一个伪类练习的一个小案例，我就简单的来说一下吧！ <div class="con"> <button>伪类练习</button> <ul class="cont"> <li>练习</li> <li>练习</li> <li>练习</...
关于结构化伪类的案例
weixin_44543308的博客
02-22 373
结构化伪类的案例 开发工具与关键技术：DW html和css 作者：沈金凤 年级：18级（5）班 撰写日期：2019年2月21日 伪类分很多种例如：UI伪类，结构化伪类，伪元素，CSS3新增伪类选择器(not and target)等等，下面我要为大家介绍的是结构化伪类，引用老师的解释 结构化伪类选择器如下： Selector:root :匹配文档的根元素...
CSS3 伪类、伪元素节选
SunPrincess的专栏
04-13 479
伪类：注意：伪类使用单冒号“:” 1、:target（目标伪类选择器） 实际用例：用于制作标签页。 #div1:target { display: block; } 2、:disabled（UI元素状态伪类选择器） :enabled :checked 注意：HTML结构中要存在这种状态。 3、:not（否定伪类） 伪元素：注意：伪元素使用双
CSS伪类选择器使用实例
Mentina的小屋
03-14 2848
    今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~    每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~    这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)//============================================...
CSS的伪类和伪元素举例详解
wjk_along的博客
11-17 940
之前介绍了8种选择器,基本上可以应对大部分的开发需求，但是如果不会使用伪类和伪元素，就跟下面的图差不多，后面会摔的。伪元素和伪类虽然不是特别常用，但是，很好用，可以帮你省掉很多无用功，效果还好。下面直接进入正题，尽量用最小的篇幅让人明白如何使用它们。 1.伪元素和伪类的区别 伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致。 伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值