当前位置：首页 > news >正文

最新CSS3伪类和伪元素详解

news 来源：原创 2024/9/20 5:57:30

第4章伪类和伪元素

4.1结构伪类

E:first-child{},第一个元素

样式：

p:first-child {color: red; 
}

<div><p>Lorem ipsum</p><p>Dolor sit amet.</p>
</div>

4.1.1nth-*伪类

以计数为基础的，默认情况下，n代表从0开始的数字，以1递增(1,2,3等等)，但是元素是从1开始的。

这里的*包括child和of-type等等

E:nth-*(n){}，n表示1,2,3...

E:nth-*(2n){}，n表示2,4,6...

E:nth-*(3n){}，n表示3,6,9...

E:nth-*(n+1){}，n表示1,2,3,4...

E:nth-*(2n+1){}，n表示1,3,5...

E:nth-*(3n-1){}，n表示2,5,8...

E:nth-*(even){}，相当于2n，偶数

E:nth-*(odd){}，相当于2n+1，奇数

nth-child与nth-of-type

E:nth-child表示按照当前父元素的所有子元素总数进行选择

E:nth-of-type表示按照特定元素进行选择

案例：

10个段落，CSS如下：

1.所有元素2n+1的底设为grey

2.div中的p中的2n字体设为红色

3.div中的p中的3n字体设为绿色

nth-last-child与nth-last-of-type

与nth-child与nth-of-type类似，不同的是从最后一个元素开始计数。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div :nth-child(2n+1) {background-color: grey;}div p:nth-of-type(2n) {color: red;}div p:nth-of-type(odd) {color: green;}</style>
</head><body><div><span>span孙颖莎奥运已打52局</span><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><span>span孙颖莎奥运已打52局</span><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p></div></body></html>

4.1.2 first-of-type、last-child、last-of-type

表示单个的选择，分别是某类型元素第一个，父元素中子元素最后一个，某类型元素最后一个。

4.1.1案例中，去掉CSS后，重写CSS:

1.p元素的第一个字体为red。

2.所有元素最后一个字体为green。

3.span类型最后一个元素字体为pink。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div p:first-of-type {color: red;}div :last-child {color: green;}div span:last-of-type {color: pink;}</style>
</head><body><div><span>span孙颖莎奥运已打52局</span><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><span>span孙颖莎奥运已打52局</span><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p><p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p></div></body></html>

4.1.3 only-child,only-of-type

only-child表示没有任何兄弟元素

only-of-type表示没有相同类型的兄弟

4.2 其他伪类

4.2.1 target伪类

指向特定元素内部链接，URI指向唯一ID或指定锚点位置。

外部链接：

4.伪类target.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><a href="./4.target.html#my_id">Lorem</a>
</body></html>

同级目录下 4.target.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4><h4 id="my_id" style="color: orange;">Lorem ipsum</h4><h4>Lorem ipsum</h4><h4>Lorem ipsum</h4>
</body></html>

将浏览器上下宽度小一点，必须有滚动条，则会发现页面跳转后，会自动滚动到目标位置。

内部链接：

点击前：

点击后：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.comment:target {background-color: #ddd;}</style>
</head><body><p><a href="#comment-03">最后的评论</a></p><div class="comment" style="border: 1px dotted;" id="comment-01"><p>Thanks for this scintillating example</p><p>N.E. Boddy, April 13</p></div><div class="comment" style="border: 1px dotted;" id="comment-02"><p>Meh.</p><p>Sum1, April 14</p></div><div class="comment" style="border: 1px dotted;" id="comment-03"><p>CSS3 is going to be great!</p><p>Joe Blogs, April 14</p></div>
</body></html>

4.2.2 empty伪类

选择没有子元素(包括文本节点)的元素

看案例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>td:empty {background-color: red;}</style>
</head>
<body><table border=""><thead><tr><td>第一列</td><td>第二列</td><td>第三列</td></tr></thead><tr><td></td><td>Lorem ipsum</td><td><span></span></td></tr></table>
</body>
</html>

4.2.3 root伪类与not伪类(基本不用，知道就行)

root伪类：给html一个较高的特殊度，设置html元素后不该被修改。

html:root { background-color: black }

not伪类：选择除了给定参数元素之外的所有元素。

E:not(F) {}

例子：div > :not(p) { color: red; }

4.3 伪元素

可以把样式应用到文档树中根本不存在的元素上。

::first-line 文本中的第一行

::first-letter 文本中的第一个字母

::after 元素之后添加

::before 元素之前

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>p::first-line {background-color: red;}p::first-letter {color: blue;font-weight: 600;}h1::before {content: "我是h1前面的添加的内容";color: chocolate;}p::after {content: "我是P后面的内容";color: brown;}</style>
</head>
<body><h1>|WWF's Mission Statement</h1><p>To stop the degradation of theplanet's natural environmentand to build a future in whichhumans live in harmony with nature,by; conserving the world's biological diversity, ensuring that the use of renewable natural resources issustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>

小结：UI元素状态，:selection冷门生僻，不学习。