如何做英文ppt模板下载网站,休闲食品网站建设规划书,为第三方网站做推广,江苏省建设主管部门网站也是选择器的一种#xff0c;被称为伪类和伪元素。这一类选择器的数量众多#xff0c;通常用于很明确的目的。
伪类
什么是伪类
伪类是选择器的一种#xff0c;它用于选择处于特定状态的元素。 比如当它们是这一类型的第一个元素时#xff08;:first-child#xff09;被称为伪类和伪元素。这一类选择器的数量众多通常用于很明确的目的。
伪类
什么是伪类
伪类是选择器的一种它用于选择处于特定状态的元素。 比如当它们是这一类型的第一个元素时:first-child或者是当鼠标指针悬浮在元素上面的时候:hover。它们表现得会像是你向你的文档的某个部分应用了一个类一样帮你在你的标记文本中减少多余的类让你的代码更灵活、更易于维护。
伪类是以开头为冒号的关键字:first-child
简单伪类示例
让一篇文章中的第一段变大加粗可为此段加上一个类然后为那个类添加 CSS不使用伪类
articlep classfirstHTML_P1/ppHTML_P2/p
/article.first {font-weight: bold;
}要是文档的头部又加上一段的话呢我们会需要把classfirst这个类挪到新加的这段上。假如我们不加类我们可以使用:first-child伪类选择器——这将一直选中文章中的第一个子元素我们将不再需要编辑 HTML使用伪类
articlepHTML_P1/ppHTML_P2/p
/articlearticle p:first-child {font-weight: bold;
}用户行为伪类
一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类有时叫做动态伪类表现得就像是一个类在用户和元素交互的时候加到了元素上一样。例
:hover——在用户将指针挪到元素上的时候才会激活 :focus——在用户使用键盘控制选定元素的时候激活。
pa href链接/a/pa:link,
a:visited {color: blue;font-weight: bold;
}
// 指针挪到元素上变红
a:hover {color: red;
}伪元素
伪元素是啥
伪元素以类似方式表现不过表现得是像你往标记文本中加入全新的 HTML 元素一样而不是向现有的元素上应用类。伪元素开头为双冒号:: 注意一些早期的伪元素曾使用单冒号的语法所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容支持早期的带有单双冒号语法的伪元素。 简单为元素示例
例如如果你想选中一段的第一行你可以把它用一个元素包起来然后使用元素选择器不过如果包起来的单词/字符数目长于或者短于父元素的宽度这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。
::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变它也只会选中第一行。
articlep第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段/pp第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段/p
/articlearticle p {width: 50%
}
article p::first-line {font-size: 150%;font-weight: bold;
}把伪类和伪元素组合起来
以上面的例子如果只想让第一段的第一行加粗你需要把:first-child和::first-line选择器放到一起。
articlep第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段/pp第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段/p
/articlearticle p {width: 50%
}
article p:first-child::first-line {font-size: 120%;font-weight: bold;
}特殊的::before 和::after
有一组特别的伪元素它们和content属性一同使用使用 CSS 将内容插入到你的文档中中。
p classbox 内容 /p.box::before {content: 前;
}.box::after {content: 后;
}注意从 CSS 插入文本字符串我们并不会在 Web 浏览器上经常这么做因为对于一些屏幕阅读器来说文本是不可见的而且对于未来别人的查找和编辑也不是很方便。 这些伪元素的更推荐的用法是插入一个图标例如下面的示例加入的一个小箭头作为一个视觉性的提示而且我们并不希望屏幕阅读器读出它。 // 页面操作并不会选中符号
.box::after {content: ➥;
}::before和::after伪元素与content属性的共同使用在 CSS 中被叫做“生成内容”而且你会见到这种技术被用于完成各种任务。无论什么时候你看到了这些选择器都要看下content属性以了解文档中添加了什么。
示例用 CSS 生成一个箭头。
p classbox 内容 /p.box {position: relative;background: yellow;
}
.box:after {bottom: 100%;left: 50%;border: solid transparent;content: ;height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(213, 96, 151, 0);border-bottom-color: #d56097;border-width: 15px;margin-left: -15px;
}参考
伪类
选择器描述:active在用户激活例如点击元素的时候匹配。:any-link匹配一个链接的:link和:visited状态。:blank匹配空输入值的元素。:checked匹配处于选中状态的单选或者复选框。:current匹配正在展示的元素或者其上级元素。:default匹配一组相似的元素中默认的一个或者更多的 UI 元素。:dir基于其方向性HTMLdir属性或者 CSSdirection属性的值匹配一个元素。:disabled匹配处于关闭状态的用户界面元素:empty匹配除了可能存在的空格外没有子元素的元素。:enabled匹配处于开启状态的用户界面元素。:first匹配分页媒体的第一页。:first-child匹配兄弟元素中的第一个元素。:first-of-type匹配兄弟元素中第一个某种类型的元素。:focus当一个元素有焦点的时候匹配。:focus-visible当元素有焦点且焦点对用户可见的时候匹配。:focus-within匹配有焦点的元素以及子代元素有焦点的元素。:future匹配当前元素之后的元素。:hover当用户悬浮到一个元素之上的时候匹配。:indeterminate匹配未定态值的 UI 元素通常为复选框。:in-range用一个区间匹配元素当值处于区间之内时匹配。:invalid匹配诸如的位于不可用状态的元素。:lang基于语言HTMLlang属性的值匹配元素。:last-child匹配兄弟元素中最末的那个元素。:last-of-type匹配兄弟元素中最后一个某种类型的元素。:left在分页媒体中匹配左手边的页。:link匹配未曾访问的链接。:local-link匹配指向和当前文档同一网站页面的链接。:is()匹配传入的选择器列表中的任何选择器。:not匹配作为值传入自身的选择器未匹配的物件。:nth-child匹配一列兄弟元素中的元素——兄弟元素按照anb形式的式子进行匹配比如 2n1 匹配元素 1、3、5、7 等。即所有的奇数个。:nth-of-type匹配某种类型的一列兄弟元素比如元素——兄弟元素按照anb形式的式子进行匹配比如 2n1 匹配元素 1、3、5、7 等。即所有的奇数个。:nth-last-child匹配一列兄弟元素从后往前倒数。兄弟元素按照anb形式的式子进行匹配比如 2n1 匹配按照顺序来的最后一个元素然后往前两个再往前两个诸如此类。从后往前数的所有奇数个。:nth-last-of-type匹配某种类型的一列兄弟元素比如元素从后往前倒数。兄弟元素按照anb形式的式子进行匹配比如 2n1 匹配按照顺序来的最后一个元素然后往前两个再往前两个诸如此类。从后往前数的所有奇数个。:only-child匹配没有兄弟元素的元素。:only-of-type匹配兄弟元素中某类型仅有的元素。:optional匹配不是必填的 form 元素。:out-of-range按区间匹配元素当值不在区间内的时候匹配。:past匹配当前元素之前的元素。:placeholder-shown匹配显示占位文字的 input 元素。:playing匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的且正在“播放”的元素。:paused匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的且正在“暂停”的元素。:read-only匹配用户不可更改的元素。:read-write匹配用户可更改的元素。:required匹配必填的 form 元素。:right在分页媒体中匹配右手边的页。:root匹配文档的根元素。:scope匹配任何为参考点元素的元素。:valid匹配诸如元素的处于可用状态的元素。:target匹配当前 URL 目标的元素例如如果它有一个匹配当前URL 分段的元素。:visited匹配已访问链接。
伪元素
选择器描述::after匹配出现在原有元素的实际内容之后的一个可样式化元素。::before匹配出现在原有元素的实际内容之前的一个可样式化元素。::first-letter匹配元素的第一个字母。::first-line匹配包含此伪元素的元素的第一行。::grammar-error匹配文档中包含了浏览器标记的语法错误的那部分。::selection匹配文档中被选择的那部分。::spelling-error匹配文档中包含了浏览器标记的拼写错误的那部分。
