首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端学习(10)~css学习:选择器:伪类

如下: :hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...如下: :link “链接”:超链接点击之前 :visited “访问过的”:链接被访问过之后 :hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...但是前端开发工程师在大量的实践中,发现不写link、visited也挺兼容。写法是: a:link、a:visited都是可以省略的,简写在a标签里面。...:hover “悬停”:鼠标放到标签上的时候 :active “激活”: 鼠标点击标签,但是不松手时。...solid #FF6F3D; color:white; background-color:#6a6a6a; } /* 鼠标放在标签上时显示蓝色

1.1K20

html字体下划线取消,取消下划线与显示下划线设置

1、取消A默认下划线 在CSS代码中最前面设置CSS以下: a{text-decoration:none} 多么就可设置默认状况下超链接标签A字体无论是默许情况下照常鼠标悬停超链接字体均不闪现下划线。...2、兼容各大涉猎器默许A超链接全显示下划线 岂论默认状况下仍是鼠标通过悬停a链接形式均表示下划线CSS代码: a{ text-decoration:underline} 3、A默许体现下划线,鼠标悬停通过下划线失落...a{ text-decoration:none} a:hover{ text-decoration:underline} 以上是默认情况下几种超链接a标具名体下划线显露与不表现几种情况配置。...text-decoration:none} .abc a:hover{ text-decoration:underline} 这里CSS代码浸染,指定class=abc盒子内a超链接默认字体不表示下划线,鼠标悬停时展现下划线...,网页中非class=abc盒子内超链接锚文本字体可否显露下划线不受影响。

2.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS选择器分类

    .par{ font-size:16px; } 还可以指定特定的某个元素,如:下边实例指定的是p标签上的元素。...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上,也可以控制鼠标悬停元素的子元素...,如: div:hover p{ font-size:20px } 鼠标停在div上时,子元素p中文字变为20像素。...p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式。...css选择器很多,css3也新增了很多选择器,我们后期在讲css3的选择器。上述讲的都是一些常见选择器,自己可在w3c中查看全部。

    1.3K50

    CSS选择器分类

    .par{ font-size:16px; } 还可以指定特定的某个元素,如:下边实例指定的是p标签上的元素。...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上,也可以控制鼠标悬停元素的子元素...,如: div:hover p{ font-size:20px } 鼠标停在div上时,子元素p中文字变为20像素。...p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式。...css选择器很多,css3也新增了很多选择器,我们后期在讲css3的选择器。上述讲的都是一些常见选择器,自己可在w3c中查看全部。

    95820

    4月7日 星期四 晴 论技术负债

    指开发人员为了加速软件开发,在应该采用最佳方案时进行了妥协,改用了短期内能加速软件开发的方案,从而在未来给自己带来的额外开发负担。...区域内的部分显示,区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。 昂,举个栗子。我之前在糖果屋微调合集里写过一个副标题悬停显示文章描述对吧?...这个的实现原理是用hover选择器调整before伪类元素的显隐样式,然后问题就来了,因为我经常要用overflow:hidden;所以总是导致子元素在absolute定位下根本显示不全。...但其实我最初的打算就是把注释标签写成气泡那样,刚刚好显示在被注释元素的右下角。 那如果我换成兄弟相邻选择器的话呢,悬停卡片和显示描述就完全可以分开来写布局了。方便程度和美观程度完全不可同日而语。...尤其是我还能用relative定位实现那种悬停显示气泡效果。(今明两天还能摸鱼的话就实装到新款nota标签上去。)

    50710

    02_Bootstrap基础组件02

    class="text-uppercase">uppercase 单词全大写 capitalize 单词首字母大写 4.7 提示语 当鼠标悬停在缩写和缩写词上时就会显示完整内容...如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。...在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。 4.10 强调类 这些强调类,通过颜色来表示强调。一般是给 p 元素加这些类名,会显示不同的颜色。 在图标和文本之间添加一个空格。...active 鼠标悬停在行或单元格上时所设置的颜色 success 标识成功或积极的动作 info 标识普通的提示信息或动作 warning 标识警告或需要用户注意 danger 标识危险或潜在的带来负面影响的动作

    3600

    CSS第二天

    并集选择器 找到多类元素 选择器之间通过 ,分隔 div,p,span { css } 交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.mark { css } ⭕hover伪类选择器 选中鼠标悬停在元素上的状态...空格 隔开 子代只包括:儿子 并集选择器:每组选择器可以是基础选择器或复合选择器,每组选择器通常一行写一个,提高代码的可读性 交集选择器:如果有标签选择器,标签选择器必须写在最前面 hover伪类:鼠标悬停在元素上的状态...text-align___tac 文本缩进 text-indent___tl 文本修饰 text-decoration___tdn 背景颜色 background-color___bgc 网页端,后面我会添加...→ 会共同作用在标签上 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果 3️⃣优先级: 不同选择器具有不同的优先级...,优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !

    1.3K10

    「动图」SEO必知负面case网页广告说明

    当用户浏览页面时,这个静态的,不动的悬停广告占据了屏幕的30%以上。 大面积悬停广告无论用户在页面上移动的位置如何,都会继续阻止页面视图的一部分,从而产生阻碍作用。微信号:shareseo ?...移动prestitial广告会在内容加载之前显示在移动版网页上,阻止用户继续浏览已搜索到的内容。这些弹出窗口的大小从全屏到部分屏幕都有所不同。它们也可能显示为阻止用户访问主要内容的独立页面。...这种密度使得很难专注于移动设备上的文本内容,并可能导致用户感到讨厌。 4 闪烁的动画广告 ?...在用户点击链接之后,会显示带倒数计时器的广告。这些广告强制用户等待几秒钟,然后才能关闭广告,或者广告将其关闭或重定向到另一个页面。...8 大面积的悬停广告 ? 不管用户是否努力滚动,大面积悬停广告都会悬停到页面的边缘。当用户浏览页面时,这个静态的,不动的悬停广告占据了屏幕的30%以上。

    2.1K70

    【D3使用教程】(6) 交互操作之事件监听

    通常情况下,我们会一次性为多个元素绑定事件监听器,所要改变的只是将select()换成选择多个元素的selectAll(),再把选择的元素集交给on()即可。...}); 悬停高亮 简单的悬停高亮使用CSS3就能实现,例如在条形图上悬停高亮: rect { -moz-transition: all .3s; -o-transition:all .3s....transition(300) .attr("fill","rgb(0,0,"+(d*10)+")"); } 但是,你是否注意到,但你将鼠标移到标签上时...这里需要注意的是,单击条形图时,会触发一次过渡,而鼠标悬停又会触发另一次过渡。为了运行鼠标悬停的高亮过渡,原来正在运行的过渡就会中断。所以,为了避免中断,这里的悬停我们使用了CSS3的方式。...rect或者其他图形时候添加title,当鼠标悬停在图形上方,自然会有浏览器自带的提示 2】 SVG提示条 利用mouseover()事件监听,动态创建值标签,而在mouseout发生时,将值标签删除

    36610

    plotly-express-1-入门介绍

    将列中的值,加粗显示在悬停提示内容的正上方; hover_data:指定列名组成的列表。所有列的值,显示在悬停提示内容中,位于x/y值的下方。...指定的列与x/y重复时仅显示1条数据; text:指定列名。列中的值,在图的标记中显示为文本标签,同时也显示在悬停提示内容中; facet_row:指定列名。...根据列中不同的(N个)值,在垂直方向上显示N个子图,并在子图右侧,垂直方向上,进行文本标注; facet_col:指定列名。...根据列中不同的(N个)值,在水平方向上显示N个子图,并在子图上方,水平方向上,进行文本标注; error_x:指定列名。显示误差线,列中的值用于调整 X 轴误差线的大小。...当参数color指定的列是数值数据时,为连续色标,设置指定的颜色序列。

    11.5K20

    基于 Butterfly 的外挂标签引入

    行内文本样式 text 标签语法 样式展示 显示代码 {% u 文本内容 %} {% emp 文本内容 %} {% wavy 文本内容 %} {% del 文本内容 %} {% kbd 文本内容 %}...On DOM load 当页面加载时 显示动画 On hover 当鼠标悬停时 显示动画 On parent hover 当鼠标悬停 在父级元素时 显示动画 faa-wrench animated faa-wrench...) warning ban 调整动画速度 warning ban On hover(当鼠标悬停时显示动画) warning ban On parent hover(当鼠标悬停在父级元素时显示动画) warning...On hover(当鼠标悬停时显示动画) {% tip warning faa-horizontal animated-hover %}warning{% endtip %} {% tip...On parent hover(当鼠标悬停在父级元素时显示动画) {% tip warning faa-parent animated-hover %}<p class="faa-horizontal

    1.2K30

    超全面的 UI 工作流程指南(三):设计规范

    产品发展日趋平稳时,产品定位和品牌形象已进入稳定状态,参与设计的人越来越多,设计的统一性和效率的问题也渐渐显现。...在 UI 设计中,颜色的使用规范主要在于:品牌主色、文本颜色、界面颜色(背景色、线框色)等。 字体规范 不同的字体气质不一样,并且不同场景下带给人的感受也不一样。...按钮 按钮有 5 个状态:正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。...输入框 用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。 3....当然,Figma 也同样具备这样的能力,你所创建的组件都存在于 Assets 中。 缺省页面 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。

    1.8K40

    超全面的 UI 工作流程指南(三):设计规范

    产品发展日趋平稳时,产品定位和品牌形象已进入稳定状态,参与设计的人越来越多,设计的统一性和效率的问题也渐渐显现。...在 UI 设计中,颜色的使用规范主要在于:品牌主色、文本颜色、界面颜色(背景色、线框色)等。 字体规范 不同的字体气质不一样,并且不同场景下带给人的感受也不一样。...按钮 按钮有 5 个状态:正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。...输入框 用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。 3....当然,Figma 也同样具备这样的能力,你所创建的组件都存在于 Assets 中。 缺省页面 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。

    4.7K32

    :before 和 :after的多用途实践 — 特效篇(3)

    : none; /* 标准的文本,没有文本装饰,主要是取消a标签的下划线 */ text-transform: uppercase; /* 元素中的文本全部转为大写...,因为还需要transform其他值, 所以会再写一遍*/ z-index: -1; /* 取负值,置于底层 用来当做背景...:blue; } /* 上下开 */ .animBtn.btnA:after { transform: translateX(-50%) translateY(-50%); } /* 匹配鼠标悬停在元素上时...,能保证距离父元素上下的距离一样,同时还给它加上z-index: -1; 这样它会在最底部显示,不会遮挡住要显示的文字,而父元素的背景为透明色,也保证了能正常显示生成的元素。...接着是实现效果.animBtn:hover 和 .animBtn.btnA:hover:after 这两个选择器下面写的就是了,分别是鼠标悬停在元素上会有的样式 和 鼠标悬停在元素上生成的元素会有的样式

    1.1K20

    腾讯网新闻底层页无障碍代码细节

    ,另外由于一般的导航都在div这种无法自动添加焦点的标签上,所以使用tabindex=”-1”或者tabindex=”0”,使得这种标签可以在按下相应快捷键的时候获得焦点。...这里设置为-1是因为如果值为0的话,在ie 下相应的区域会有虚线(如图一);在标准浏览器下,比如chrome、firefox、safari等,一个非焦点元素获得焦点的时候会激活outline属性从而产生一个实体的线框...(如图二),利用css可以使之不显示,代码为outline:none。...在大部分浏览器下当鼠标在某个拥有title属性的区域时候,会出现悬停的小菜单提示,有些影响现有的用户体验。...当鼠标在某个拥有title属性的区域时候,会出现悬停的小菜单提示 解决方式是,默认此区域的title值为空,利用javascript脚本实现:当按下某快捷键的时候,对快捷键绑定的区域进行动态的赋予title

    91710

    加点JavaScript魔法

    客户端将服务器端返回的响应中的html内容显示在弹出窗口中。当用户移开鼠标时,弹出窗口将被删除。听起来很简单,对吧?...初始化调用接受许多配置弹出窗口的选项,包括传递想要在弹出窗口中显示的内容,以及使用什么方法触发弹出窗口出现或消失(单击,悬停在元素上等),如果内容是纯文本或HTML,那么在文档中可以找到更多的选项。...Bootstrap文档中的popover示例都将目标HTML元素的data-content属性设置为popover的内容,因此当触发悬停事件时,Bootstrap需要做的只是显示弹出窗口。...text()函数返回节点的文本内容。该函数不会对文本进行任何修剪,例如,如果在一行中有,在下一行中有文本,在另一行中有,text()将返回文本周围的所有空白。...popover()调用创建了一个弹窗组件,该组件也具有一个名为popover()的方法来显示弹窗。因此我不得不添加第二个popover('show')调用来将弹窗显示到页面中。

    3.9K10

    plotly-express-4-常见绘图参数

    将列中的值,加粗显示在悬停提示内容的正上方; hover_data:指定列名组成的列表。所有列的值,显示在悬停提示内容中,位于x/y值的下方。...指定的列与x/y重复时仅显示1条数据; text:指定列名。列中的值,在图的标记中显示为文本标签,同时也显示在悬停提示内容中; facet_row:指定列名。...根据列中不同的(N个)值,在垂直方向上显示N个子图,并在子图右侧,垂直方向上,进行文本标注; facet_col:指定列名。...根据列中不同的(N个)值,在水平方向上显示N个子图,并在子图上方,水平方向上,进行文本标注; error_x:指定列名。显示误差线,列中的值用于调整 X 轴误差线的大小。...当参数color指定的列是数值数据时,为连续色标,设置指定的颜色序列。

    5.1K10

    kylinTOP 测试与监控平台——WEB 自动化用例录制方法

    1、登录系统后进入如下页面,点击“新建界面脚本” image.png 2、点击“录制脚本”按钮,脚本名称可以在此处输入也可以在录制后输入 image.png 3、在弹出的对话框中选择浏览,并输入URL(...要录制的URL),最后点击录制按钮 image.png 4、点击录制按钮后,kylinTOP打开指定的URL,当鼠标移动到页面元素上时,上方的脚本录制悬停框上,会出现识别到的元素内容(文本就显示文本,图象就显示图像...image.png 5、添加检查点 鼠标移动到想要检查的元素对象上,使上方的脚本录制悬停框上能显示该对象,再按住shitf按钮,微微移动鼠标,即可识别出页面中的元素。 如下图所示。...然后点击悬停框上停止录制按钮 image.png 生成的用例步骤没有传统的类和方法的调用,无需人工编写

    2.5K91
    领券