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

CSS伪与伪元素「建议收藏」

为什么要引入伪与伪元素? css引入伪和伪元素概念是为了格式化文档树以外的信息。...常见的状态伪主要包括: :link 应用于未被访问过的链接; :hover 应用于鼠标悬停到的元素; :active 应用于被激活的元素; :visited 应用于被访问过的链接...:focus 应用于拥有键盘输入焦点的元素。...伪元素的应用: 清除浮动:如果父元素所有元素都是浮动的,父元素的高度则无法撑开。可以通过对父元素添加after伪撑开父元素高度,因为after就是其最后一个子元素。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.5K21

如何学习 CSS

选择器,不仅仅有 选择器的表现如标题所说的,它选择文档的某些部分,以便你可以将CSS规则应用于它。...有些选择器的行为就好像你已经将应用于文档中的某些内容。 例如p:first-child就像你在第一个p元素中添加了一个一样,这些被称为 伪选择器。...在下面的CodePen中是一个用伪链接的伪元素的例子。...注意:为了理解所有这些内容,我建议阅读MDN CSS简介中的 层叠和继承。 如果你正在尝试将一些CSS应用于一个元素,那么你的浏览器开发者工具是开始最好的地方。...看看下面的例子,我用元素选择器 h1 将 h1 标题设置为橙色。同时,我也使用选择器设置h1 设置为紫色。 由于更具体,因此h1是紫色的。

1.8K10
您找到你想要的搜索结果了吗?
是的
没有找到

CSS基础

: red; }  注意: 样式名不要用数字开头(有的浏览器不识别)。.../*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含(字符串包含)hello的元素*/ [...通常,我们会分两行来写,更清晰: div, p { color: red; }   嵌套     多种选择器可以混合起来使用,比如:.c1内部所有p标签设置字体颜色为红色。...继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。...p { color: green; }   此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。

1.6K80

在 Vue 中,使用 $attrs 构建高级组件

,我们可以看下,我们新加的属性都被添加到了 HTML 元素上了: 看到这里,大家可能有疑问了,既然所有的 "非属性/事件" 属性都已经自动应用于内部的HTML元素为什么还要对 $attrs 做这么大的介绍...解决上述问题的最好方法是找到一种方法,将所有的属性、、参数和事件直接 "应用" 到 input 字段上,而不需我们手动的一个个声明。这就是 $attrs 出场的地方。...它是一个存放所有 "未声明"的属性和事件的地方,而这正是我们需要解决的问题。 要使用这个功能,我们只需将 $attrs 属性应用于一个或多个HTML元素,使用 v-bind 操作符。...(、属性、属性和自定义事件)复制到一个或多个元素上。...inheritAttrs: false 默认情况下,任何被传递给组件的额外参数都会自动应用于元素(以及所有有 $attrs 绑定的元素)。

2.4K10

css初始

组合选择器   后代选择器 /*li内部的a标签设置字体颜色*/ li a { color: green; }   子代选择器 /*选择所有父级是 元素元素*/ div>p...{ font-family: "Arial Black", arial-black, cursive; }   毗邻选择器 /*选择所有紧接着元素之后的元素*/ div+p {.../*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含(字符串包含)hello的元素*/...通常,我们会分两行来写,更清晰: div, p { color: red; } 嵌套 多种选择器可以混合起来使用,比如:.c1内部所有p标签设置字体颜色为红色。...继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

77130

【CSS】776- 16个非常有用的CSS伪选择器

(伪)选择器可以为文档中不一定具体存在的结构指定样式,或者为某些元素、文档的标记模式、甚至是文档本身的状态所指示的幻像指定样式。...熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。 1、::first-line | 选择首行文本 这个伪元素选择器选择换行之前文本的首行。...通过 ::selection 伪元素选择器,我们可以将样式应用于高亮区域。...div::selection { background: yellow;} 4、:root | 根元素 :root 伪选中文档的根元素。在 HTML 中,为 HTML 元素。...在 RSS 中,则为 RSS 元素. 这个伪选择器应用于元素,多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪选择器将选中没有任何子项的元素

75130

AngularDart4.0 高级-组件样式 顶

这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询的知识直接应用于Angular应用程序。 此外,Angular可以将组件样式与组件捆绑在一起,从而实现比常规样式表更多的模块化设计。...例如,一个CSS主题可以应用于文档元素,并且你想改变你的组件看起来如何基于这个。 使用:host-context()伪选择器,它的作用就像:host()的函数形式一样。...以下示例仅在某个祖先元素具有CSStheme-light的情况下,才会将background-color样式应用于组件内的所有元素。...以下示例将所有元素作为目标,从宿主元素向下到这个组件到它的所有元素。...支持仍然有限, 那就是为什么Emulated视图封装是默认的模型并且在大多数例子中被推荐.

2.2K20

自定义 webkit 内核浏览器的滚动条样式

David Hyatt 在 2009 年就写了一篇 博文 并且把几乎你期待的所有滚动条样式的组合都整合成了一个范例页面。 干货 不同的部件 下面是一些伪元素以及它们实际对应的滚动条的部件。...:vertical – vertical 伪应用于每一个垂直方向上的滚动条部件。...:corner-present – corner-present 伪应用于滚动条的所有部件,表示是否显示滚动条的 corner。...:window-inactive – window-inactive 伪应用于所有滚动条的部件,表示包含滚动条的窗口当前是否是激活的。(在最新版中这个伪也可作用于 ::selection。...我们打算把它扩展至所有内容并推动它成为一个新的标准伪。) 组合使用 上面介绍的伪元素和伪选择器可以组合使用。

1.2K20

您需要了解的有关Selenium等待方法

注意: 隐式等待是全局应用的,这意味着整个驱动程序实例中的所有Web元素始终可以使用它。这意味着如果驱动程序正在与100个元素进行交互,则隐式等待适用于所有100个元素。 这全都与隐式等待有关。...可以通过WebDriverWait 实现。要了解Selenium Webdriver中的显式等待,您应该知道为什么我们在程序中使用等待语句的要求。...即我要驱动程序等待20秒,直到元素的预期状态可见。此外,如果满足条件,则可以将sendKeys()应用于该方法。现在,说我想输入我的名字和姓氏。...如果元素在5秒钟内加载,则其余15秒钟将被忽略。它不会等到超时值完成(即20秒)。这就是为什么所有等待都被视为动态等待的原因。 让我们进一步介绍一下隐式等待和显式等待。...隐式与显式等待 隐式等待 显式等待 1.隐式等待时间应用于脚本中的所有元素 1.显式等待时间仅适用于用户指定的那些元素 2.在隐等待,我们需要不 指定元素的“ExpectedConditions”被定位

1.7K20

java注解定义类型变量_JAVA自定义注解

@Target 表明该注解可以应用的java元素类型 Target类型 描述 ElementType.TYPE 应用于、接口(包括注解类型)、枚举 ElementType.FIELD 应用于属性(包括枚举中的常量...应用于局部变量 ElementType.ANNOTATION_TYPE 应用于注解类型 ElementType.PACKAGE 应用于包 ElementType.TYPE_PARAMETER 1.8版本新增...由JVM 加载,包含在文件中,在运行时可以被获取到 @Document 表明该注解标记的元素可以被Javadoc 或类似的工具文档化 @Inherited 表明使用了@Inherited注解的注解,...所标记的的子类也会拥有这个注解 注解格式 /** * 修饰符 @interface 注解名 { * 注解元素的声明1 * 注解元素的声明2 * } * 修饰符:访问修饰符必须为public,不写默认为...package java.lang.annotation; /** * 所有的注解默认继承了Annotation接口,但是它本身不能定义注解。

1K10

Java集合:我其实没那么简单

文/沉默王二 开门见山地说吧,Java提供了一套完整的集合(也可以叫做容器)来管理一组长度可变的对象(也就是集合的元素),其中常见的类型包括List、Set、Queue和Map。...Map与Collection最大的不同就在于,它是一组“键值对”,可以快速地通过键来查找值;Collection是没有键的,因此需要按照某种规则来查找值(这里说的值就是元素)。 怎么使用集合呢?...别问我为什么,就好像你问我为什么1+1 = 2 ?我回答不上来啊。 有人会问,如果我的应用操作偏向于插入和删除,而不是随机访问,我还要选用ArrayList吗?...Collections.addAll()方法可以将所有指定元素添加到指定 Collection中,可以分别指定要添加的元素,就像Collections.addAll(list, 2, 1, 5);这样;...PriorityQueue是一种优先级队列(Priority即为优先的意思),可以应用于这种场景。

36730

分享15个有用的,你可能还不知道的CSS小技巧,建议每个前端开发者都了解下

1、使用:not()伪简化你的CSS :not()伪允许你将样式应用于所有不匹配指定选择器的元素。这是简化你的CSS并避免手动列出元素或应用来排除某些元素的好方法。...使用*选择器可以方便地将样式应用于网页上的所有元素,无需逐个指定每个元素的选择器。这对于设置全局样式非常有用,例如设置默认字体、颜色或行高等。...这对于实现一致的颜色样式非常有用,尤其是在涉及到父元素和子元素之间的继承关系时。 例如,你可以将currentColor应用于边框颜色、背景颜色或阴影颜色等属性,以确保它们与当前元素的文本颜色相匹配。...请注意,currentColor关键字只能用于接受颜色值的属性,而不能用于所有属性。...考虑到有超过500个独特的属性,你会明白为什么很多开发者更喜欢JavaScript的多功能性而回避CSS。不过,和任何与代码相关的事物一样,只有不断练习才能达到完美!

17240

CSS选择器

任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。id 选择器具有唯一性。 通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有元素。...(只指定儿子,而不管孙子),后代选择器是作用于所有子后代元素(不只儿子,还可以选择到孙子,重孙子等等)。...下面给大家介绍几个常用的伪。 :link 应用于未被访问过的链接。IE6 不兼容,解决此问题,直接使用 a 标签。 :hover 应用于有鼠标指针悬停于其上的元素。...在 IE6 只能应用于 a 连接,IE7+ 所有元素都兼容。 :active 应用于被激活的元素,如被点击的链接、被按下的按钮等。 :visited 应用于已经被访问过的链接。 <!...通用兄弟元素选择器(E~F): E 和 F 属于同一父元素之内,并且 F 在 E 之后,通用兄弟选择器会选择符合这样排列的所有的 F 元素。 <!

1K20

深入理解 Java 注解

注解的应用范围 注解可以应用于、字段、方法和其他程序元素的声明。...ElementType.TYPE - 标记的注解可以应用于的任何元素。...AnnotatedElement 接口是所有程序元素(Class、Method 和 Constructor)的父接口,所以程序通过反射获取了某个的AnnotatedElement 对象之后,程序就可以调用该对象的如下四个个方法来访问注解信息...getAnnotations - 返回该程序元素上存在的所有注解。 isAnnotationPresent - 判断该程序元素上是否包含指定类型的注解,存在则返回 true,否则返回 false。...getDeclaredAnnotations - 返回直接存在于此元素上的所有注释。与此接口中的其他方法不同,该方法将忽略继承的注释。(如果没有注释直接存在于此元素上,则返回长度为零的一个数组。)

1.1K30

理解inline元素的盒模型

根据元素的display属性,元素的box分为2:block box和inline box。盒模型被应用于这2时,有所不同。在这片文章中我们会看到盒模型是如何被应用于inline box。...如果在一行中容纳不下所有元素,就在第一个line box的下一行创建一个新的line box。因此一个单独的inline元素就被2行分割开(如下图所示) ?...这就意味着任何水平的padding,border,margin仅仅应用于被box占据的首行和末行。 例如,下图中高亮的span被2行分割。它的水平padding不适用首行的末尾和第二行的开始。...其中一个就是highlighter,所有的浏览器的devtools中都包含了它。你可以使用它选择元素作仔细的审查,highlighter也给你提供了布局方面的信息。 ?...高亮每个单独的line box对于理解盒模型是如何被应用于inline元素是非常重要的,而且也帮你检查了行间的距离和inline box的垂直对齐。

67910

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.选择器 根据HTML标签的class属性选择样式应用的属性  .值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素  #id值{ … }  3.标签选择器...1、静态伪(只应用于超链接) [注意]visited伪只能设置字体颜色、边框颜色、outline颜色的样式 a:link{color: red;}  设置超链接在未被访问前的样式。...a:visited{color: green;}  设置超链接在其链接地址已被访问过时的样式 2、动态伪(可应用于任何元素) 设置超链接在其鼠标悬停时的样式。...  默认这个伪元素是行内元素,继承元素可继承的属性;所有元素都必须放在出现该伪元素的选择器的最后面。...[class $="b"] 选择class属性值以"b"结尾的所有元素 [class *="b"] 选择class属性值包含"b"的所有元素 上面三个属于正则匹配,是CSS3新增的属性选择器

98230

Retrofit解析4之注解

(四)为什么要使用注解 1、在未使用Annotation之前(甚至是使用之后),一般使用XML来应用于元数据的描述。...举例如下: @Deprecated public class MyComponent { } 当我们使用@Deprecate注解后,建议配合使用对应的@deprecated JavaDoc 符号,并解释说明为什么这个...在Java.lang.reflect中中的AnnotatedElement接口是所有程序元素的(Class、Method)父接口,我们可以通过反射获取到某个的AnnotatedElement对象,进而可以通过该对象提供的方法访问...Class annotationClass) 返回直接存在该元素上某类型的注解 Annotation[] getDeclaredAnnotations() 返回该元素上的所有注解 举例说明...好吧,其实是在javac开始编译之前,这就是通常我们为什么愿意输出.java文件的原因。

1.3K40

CSS入门笔记 - 初识CSS

选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而选择器可以使用多次。 可以使用选择器词列表方法为一个元素同时设置多个样式。...3 属性和值选择器 - 多个值 下面的例子为包含指定值的 title 属性的所有元素设置样式。...更有趣的是伪选择符,为什么叫做伪选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{color:red...继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。...比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有元素文本,这里子元素为span标签。

1.9K60
领券