怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

本篇介绍伪类选择器以及伪元素。

1、类选择器

在 css 中可以使用类选择器把相同的元素定义成不同的样式。比如:

p.left{text-align: left}
p.rigth{text-align: right}

2、伪类选择器

区别

类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是 CSS 中已经定义好的选择器,不可以随意起名

常见的伪类选择器:

a:link{ color: #ff6600 } /* 未被访问的链接 */
a:visited{ color: #87b291 } /* 已被访问的链接 */
a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */
a:active{ color: #55b28e } /* 正在被点击的链接 */

3、伪元素选择器

伪元素选择器,针对于 CSS 中已经定义好的伪元素使用的选择器。

使用方法:

选择器:伪元素 {属性:值}

与类配合使用

选择器. 类名:伪元素 {属性:值}

四个伪元素选择器。

1)、first-line 伪元素选择器

first-line 伪元素选择器用于向某个元素中的第一行文字使用样式。

2)、first-letter 伪元素选择器

first-letter 伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。

3)、before 伪元素选择器

before 伪元素选择器用于在某个元素之前插入一些内容。

4)、after 伪元素选择器

after 伪元素选择器用于在某个元素之后插入内容。

-----------------------------例子

<!DOCTYPE html>
<html>
<head lang="zh">
<title>伪元素</title>
<style>
p:first-line {
color: #f60;
}
p:first-letter {
color: green;
font-size: 24px;
}
li {
list-style: none;
}
li:before {
content: '__before前面追加__';
color: red;
}
li:after {
content: '__after追加__';
color: #ff6600;
}
</style>
</head>
<body>
<p>
在CSS中,主要有四个伪元素选择器<br />
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
<li><a href="index1.html">伪类选择器</a></li>
</ul>
</body>
</html>

image-20220214223525405

5、结构性伪类选择器 root、not、empty 和 target

1)、root 选择器

root 选择器将样式绑定到页面的根元素中。

2)、not 选择器

想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,我们就可以使用 not 选择器。

3)、empty 选择器

empty 选择器指定当元素中内容为空白时使用的样式。

-----------------------例子

<!DOCTYPE html>
<html>
<head lang="en">
<title>not选择器</title>
<style>
:root {
background: #126fb0;
}
body *:not(h1) {
background: #fff;
}
:empty {
background: #ff6600;
}
</style>
</head>
<body>
<h1>h1标题</h1>
<hr />
<table border="1" cellpadding="0" cellspacing="0" width="30%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td></td>
</tr>
</table>
</body>
</html>

image-20220214224455585

4)、target 选择器

target 选择器对页面中某个 target 元素指定样式,该样式只在用户点击了页面中的超链接,并且跳转到 target 元素后起作用。

<!DOCTYPE html>
<html>
<head lang="en">
<title>TARGET</title>
<style>
:target{
background: #000;
color: #fff;
}
</style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="B">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="C">
<h2>标题</h2>
<p>内容.........</p>
</div>
<div id="D">
<h2>标题</h2>
<p>内容.........</p>
</div>
</body>
</html>

image-20220214224837870

6、选择器 first-child、last-child、nth-child 和 nth-last-child

1)、first-child 选择器

first-child 单独指定第一个子元素的的样式。

2)、last-child 选择器

last-child 单独指定最后一个子元素的的样式。

3)、nth-child 选择器

nth-child(n) 选择器匹配正数下来第 N 个子元素
 nth-child(odd) 选择器匹配正数下来第奇数个子元素
 nth-child(even) 选择器匹配正数下来第偶数个子元素

4)、nht-last-child 选择器

nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
 nth-last-child(odd) 选择器匹配倒数数下来第奇数个子元素
 nth-last-child(even) 选择器匹配倒数下来第偶数个子元素

7、only-child 选择器

only-child 选择器,只对唯一的子元素起作用。

<!DOCTYPE html>
<html>
<head lang="en">
<title>选择器first-child、last-child、nth-child和nth-last-child</title>
<style>
li:first-child {
background: #ff6600;
}
li:last-child {
background: green;
}
li:nth-child(odd) {
background: red;
}
li:nth-child(even) {
background: #ff6600;
}
li:only-child {
background: #ff1b00;
}
</style>
</head>
<body>
<h1>唯一的:li:only-child</h1>
<ul>
<li>第一个项目</li>
</ul>
<hr />
<h1>很多的</h1>
<ul>
<li>第1个项目</li>
<li>第2个项目</li>
<li>第3个项目</li>
<li>第4个项目</li>
<li>第5个项目</li>
<li>第6个项目</li>
<li>第7个项目</li>
<li>第8个项目</li>
</ul>
</body>
</html>

image-20220214225528478

posted on   超级无敌美少男战士  阅读(252)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示