CSS层叠样式表-选择器

最新推荐文章于 2022-06-27 16:09:04 发布

原创最新推荐文章于 2022-06-27 16:09:04 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文详细介绍了CSS中的序号选择器，包括first-child、last-child、nth-child(n)、nth-of-type(n)等，并探讨了CSS新增伪类，如:focus、:empty等，以及伪元素的用法，帮助读者掌握CSS更高级的样式控制技巧。

一、序号选择器

1.、first-child （表示第一个子元素）

例：

<style>

p:first-child{

color: red;

}

</style>

<div>

<p>序号选择器</p>

</div>

<div>

<h1>序号选择器</h1>

<p>序号选择器</p>

</div>

效果：

2、last-child（表示最后一个子元素）

例：

<style>

p:last-child{

color: red;

}

</style>

<div>

<p>序号选择器</p>

</div>

<div>

<h1>序号选择器</h1>

<p>序号选择器</p>

</div>

效果：

3.nth-child(n) （第几个子元素）

例：

<style>

p:nth-child(2){

color: red;

}

</style>

<div>

<p>序号选择器</p>

</div>

<div>

<h1>序号选择器</h1>

<p>序号选择器</p>

</div>

效果：

4.nth-of-type(n) （同种标签指定序号的子元素）

例：

<style>

p:nth-of-type(2){

color: red;

}

</style>

<div>

</div>

<div>

</div>

效果：

5.nth-last-child（n）（倒数第几个子元素）

例：

<style>

p:nth-last-child(2){

color: red;

}

</style>

<div>

<p>序号选择器</p>

</div>

<div>

<p>序号选择器</p>

<h1>序号选择器</h1>

<p>序号选择器</p>

</div>

效果：

6.last-of-type (当前同一类标签中的最后一个)

例：

<style>

p:last-of-type{

color: red;

}

h1:last-of-type{

color: red;

}

</style>

<div>

<p>p标签最后一个</p>

</div>

<div>

<p>p标签最后一个</p>

<h1>h1标签最后一个</h1>

</div>

效果：

7.nth-last-of-type(n) (当前同一类标签中的倒数第几个)

例：

<style>

p:nth-last-of-type(2){

color: red;

}

</style>

<div>

<p>p标签倒数第3个</p>

<p>p标签倒数第2个</p>

<p>p标签倒数第1个</p>

</div>

<div>

<p>p标签倒数第2个</p>

<p>p标签倒数第1个</p>

<h1>h1标签倒数第一个</h1>

</div>

效果：

8.first-of-type (当前同一类标签中的第一个)

例：

<style>

p:first-of-type{

color: red;

}

</style>

<div>

</div>

<div>

</div>

效果：

9.nth-of-type(odd) (是奇数项的子元素)

例：

<style>

p:nth-of-type(odd){

color: red;

}

</style>

<div>

</div>

效果：

10. nth-of-type(even) （是奇数项的子元素）

例：

<style>

p:nth-of-type(even){

color: red;

}

</style>

<div>

</div>

效果：

11.nth-of-type（an+b） (从b开始的每a个选一个)

例：

<style>

p:nth-of-type(2n+3){

color: red;

}

</style>

<div>

</div>

效果：

12.only-child (唯一一个子元素)

例：

<div>

</div>

<div>

</div>

效果：

13.only-of-type （身为同一类标签是唯一一个)

例：

<style>

p:only-of-type{

color: red;

}

h1:only-of-type{

color: red;

}

</style>

<div>

</div>

<div>

</div>

效果：

二、css新增伪类

1.:empty （选择空标签，没有任何内容的标签，既没有文字，又没有子标签）

例：

<style>

div:empty{

border: 1px solid rgb(211, 10, 10);

height: 30px;

width: 100px;

}

</style>

<div>

<div>我是div</div>

</div>

效果：

2.:focus （聚焦，选择当前获得焦点的表单元素）

例：

<style>

input:focus{

border: 5px solid rgb(230, 10, 10);

}

</style>

用户名：<input type="text">

密码： <input type="password">

</form>

效果：

3.:enabled （选择当前有效的表单元素）

例：

<style>

input:enabled{

border: 5px solid rgb(230, 10, 10);

}

</style>

用户名：<input type="text">

密码： <input type="password">

</form>

效果：

4.:disabled （选择当前无效的表单元素)

例：

<style>

input:disabled{

border: 5px solid rgb(230, 10, 10);

}

</style>

用户名：<input disabled type="text">

密码： <input type="password">

</form>

效果：

5.:checked （选中当前已经默认勾选的单选按钮或者复选框）

例：

<style>

input:checked{

transform: scale(300%,300%);

}

</style>

<input type="radio" name="sex"checked>男

</label>

<input type="radio" name="sex">女

</label>

爱好：

<input type="checkbox" name="hobby" id=""> 吃饭

<input type="checkbox" name="hobby" id="" checked> 睡觉

<input type="checkbox" name="hobby" id=""> 打豆豆

<input type="checkbox" name="hobby" id="" checked> 玩游戏

</form>

效果：

6.:root （选择根元素，即html标签）

例：

<style>

:root{

color: green;

}

</style>

<p>hello world</p>

<h3>hello world</h3>

<span>hello world</span>

效果：

三、伪元素

1.：：before与：：after （创建一个伪元素，其将成为匹配选中的元素的第一个或最后一个子元素，将内容填写在content="……"中。）

例：

<style>

.a::after{

content: "★";

color: orange;

}

.b::before{

content: "★";

color: orange;

}

</style>

<p class="a">我是p标签</p>

<p class="b">我是p标签</p>

<p>我是p标签</p>

效果：

2.：：selection （选中文档中被用户高亮的部分）

例：

p::selection{

background-color: rgb(159, 222, 226);

}

</style>

<p>

我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签……

</p>

效果：

3.：：first-letter与：：first-line （：：first-letter选中某元素中★必须是块级元素第一行的第一个字母或文字。：：first-line选中某元素中★必须是块级元素第一行全部文字。）

例：

<style>

.p1::first-letter{

color: red;

}

.p2::first-line{

color: paleturquoise;

}

</style>

我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标………………

</p>

我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标………………

</p>

效果：