<p>HTML设置首个子类型样式，主要通过first-of-type
first-of-type
<div> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <span>This is a span.</span> <p>This is the third paragraph.</p> </div>
<p>
first-of-type
div p:first-of-type {
color: blue;
font-weight: bold;
}<p>
<span>
<p>
first-of-type
first-of-type
first-child
first-of-type
first-child
first-child
first-of-type
<div> <span>This is a span. <p>This is the first paragraph. <p>This is the second paragraph.
first-child
div :first-child {
color: red;
}<div>
first-of-type
div span:first-of-type {
color: green;
}
div p:first-of-type {
color: blue;
}first-of-type
first-of-type
first-of-type
<p>First paragraph in container.<div> <p>First paragraph in another div.Second paragraph in container.
<p>Third paragraph in container.
.container p:first-of-type {
font-style: italic;
}
p.special:first-of-type {
text-decoration: underline; /* 这里不会生效，因为 .special 不是父元素的 first-of-type */
}.special
<p>
<p>
text-decoration
text-decoration
<p>
.special
first-of-type
first-of-type
article p:first-of-type {
font-size: 1.2em;
color: #333;
}<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
ul li:first-of-type {
margin-top: 0;
background-color: #f0f0f0;
}<form> <input type="text" placeholder="First Name"> <input type="text" placeholder="Last Name"> </form>
form input:first-of-type {
border: 1px solid blue;
}first-of-type
以上就是HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
134
