p:first-line { color: lightcoral;}
.innerDiv p:first-letter { color: lightcoral; font-size: 40px }
::selection
伪元素选择器,我们可以将样式应用于高亮区域。
div::selection { background: yellow;}
:root
伪类选中文档的根元素。在 HTML 中,为 HTML 元素。在 RSS 中,则为 RSS 元素.这个伪类选择器应用于根元素,多用于存储全局 CSS 自定义属性。
div:empty { border: 2px solid orange;}<div>div><div>div><div>div>
这个规则将应用于空的 div
元素。这个规则将应用于第一个和第二个 div
,因为他们是真为空,而第三个 div
包含空格。
.innerDiv p:only-child { color: orangered; }
.innerDiv p:first-of-type { color: orangered; }
这将应用于 .innerDiv
下的第一个 p
元素。
<div class="innerDiv"> <div>Div1div> <p>These are the necessary stepsp> <p>hiyap> <p> Do <em>notem> push the brake at the same time as the accelerator. p> <div>Div2div> div>
这个 p
(“These are the necessary step”)将被选中。:first-of-type
一样,但是会应用于最后一个同类型的子元素。
.innerDiv p:last-of-type { color: orangered; }
这将应用于 innerDiv
下的最后一个 p
段落元素。
<div class="innerDiv">
<p>These are the necessary stepsp>
<p>hiyap>
<div>Div1div>
<p> Do the same. p>
<div>Div2div> div>
因此,这个 p
元素(“Do the same”)将被选中。
.innerDiv p:nth-of-type(1) { color: orangered; }
.innerDiv p:nth-last-of-type() { color: orangered; }
这将选择 innerDiv
列表元素中包含的最后一个段落类型子元素。
<div class="innerDiv">
<p>These are the necessary stepsp>
<p>hiyap>
<div>Div1div>
<p> Do the same. p>
<div>Div2div> div>
innerDiv
中最后一个段落子元素 p
(“Do the same”)将会被选中。a
锚元素。
a:link { color: orangered; }<a href="/login">Login<a>
这将选中未被点击过带有 href
的指定界面的 a
锚点元素,选中的元素中的文字将会显示为橙色。
input:checked { border: 2px solid lightcoral; }
这个规则应用到所有被选中的复选框。valid
属性。
input:valid { boder-color: lightsalmon; }
:valid
一样,但是会应用到未通过验证的元素。
input[type="text"]:invalid { border-color: red;}
p:lang(fr) { background: yellow; }
或者
p[lang|="fr"] {background: yellow;}<p lang="fr">Paragraph 1p>
.innerDiv :not(p) { color: lightcoral; }
class="innerDiv">
Paragraph 1
Paragraph 2
Div 1
Paragraph 3
Div 2
Div 1
和 Div 2
会被选中,因为他们不是 p
元素。版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态