【CSS 11】组合器选择器伪类锚伪类元素匹配伪元素结合CSS类

Zanebla

于 2023-06-27 16:22:55 发布

阅读量621

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131404232

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

combinators 组合器

组合器是解释选择器之间关系的某种机制
CSS 选择器可以包含多个简单选择器
在简单选择器之间可以包含组合器，从而组合成复杂选择器

CSS 中有四种不同的组合器：

后代选择器 - 空格
子选择器 - 大于号 >
相邻兄弟选择器 - 加号 +
通用兄弟选择器 - 波浪号 ~

后代选择器
后代选择器匹配属于指定元素后代的所有元素

/*例如选择<div>元素内的所有<p>元素*/
div p {
   background-color: yellow;
}

子选择器
子选择器匹配属于指定元素子元素的所有元素

div > p {
	background-color: yellow;
}

相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”

div + p {
	background-color: yellow;
}

通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素

div ~ p {
	background-color: yellow;
}

pseudo classes 伪类

伪类用于定义元素的特殊状态
可以用于：

设置鼠标悬停在元素之上时的样式
给已访问或是未访问的链接设置不同的样式
设置元素获得焦点时的样式

伪类的语法

selector:pseudo-class {
	property: value;
}

锚伪类
链接通过不同的方式显示

/*未访问的链接*/
a:link {
	color: #FF0000;
}

/*已访问的链接*/
a:visited {
	color: #00FF00;
}

/*鼠标悬停链接*/
a:hover {
	color: #FF00FF;
}

/*已选择的链接*/
a:active {
	color: #0000FF;
}

/*
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效
a:active 必须在 CSS 定义中的 a:hover 之后才能生效

伪类名称对大小写不敏感
*/

/*
伪类可以与 CSS 类结合使用
当您将鼠标悬停在例子中的链接上时，它会改变颜色
*/

a.highlight:hover {
	color: #ff0000;
}

/*在 <div> 元素上使用 :hover 伪类*/
div:hover {
	background-color: yellow;
}

有意思的工具提示悬停

<!DOCTYPE html>
<html>
<head>
<style>
<!-- 把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果） -->
p {
	display: none;
	background-color: yellow;
	padding: 20px;
}

div:hover p {
	display: block;
}
</style>
</head>
<body>

<div>鼠标移入显示p元素
	<p>Hi,I'm here</p>
</div>

</body>
</html>

/*
:first-child 伪类与指定元素匹配
该元素是另一个元素的第一个子元素
例如下面的选择器匹配作为任何元素的第一个子元素的任何<p>元素
*/
p:first-child {
	color: blue;
}

/*
匹配所有<p>元素中的首个<i>元素
*/
p i:first-child {
	color: blue;
}

/*
匹配所有首个 <p> 元素中的所有 <i> 元素
*/
p:first-child i {
	color: blue;
}

<!--
:lang 伪类允许为不同的语言定义特殊的规则
例如:lang 为属性为 lang="en"的 <q>元素定义引号
-->
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
	quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

</body>
</html>

:focus 伪类的用法

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
	background-color: hotpink;
	height: 144px;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="Submit!">
</form>

</body>
</html>

更多CSS伪类与伪元素

pseudo elements 伪元素

CSS 伪元素用于设置元素指定部分的样式
可以用于：

设置元素首字母以及首行的样式
在元素内容之前或之后插入内容

伪元素语法：

selector::pseudo-element {
	property: value;
}

::first-line 伪元素
::first-line 伪元素用于为文本的首行添加特殊样式

/*
例如为所有的 <p> 元素中的首行添加样式
*/
p::first-line {
	color: #ff0000;
	font-variant: small-caps;
	/*将所有英文字母改写为小型大写形式，对中文没有影响*/
}

::first-line 伪元素只能应用于块级元素
下面的属性适用于::first-line伪元素

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

请注意双冒号表示法 ::first-line
在 CSS3 中，双冒号取代了伪元素的单冒号表示法
这是 W3C 试图区分伪类和伪元素的尝试

::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式

/*
例如为所有 <p> 元素中文本的首字母添加特殊样式
*/
p::first-letter {
	color: #ff0000;
	font-size: xx-large;
}

::first-letter 伪元素只适用于块级元素
以下属性适用于::first-letter伪元素

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align
text-transform
line-height
float
clear

伪元素与CSS类
伪元素可以与 CSS 类结合使用

p.intro::first-letter {
	color: #ff0000;
	font-size: 200%;

上面的例子将以红色和较大的字体显示 class=“intro” 的段落的首字母

多个伪元素
可以组合几个伪元素
段落的第一个字母将是红色，字体大小为 xx-large
第一行的其余部分将变为蓝色，并使用小型大写字母
该段的其余部分将是默认的字体大小和颜色

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
	color: #ff0000;
	font-size: xx-large;
}

p::first-line {
	color: #0000ff;
	font-varaint: small-caps;
}
</style>
<body>
<p> 可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果 </p>
</body>
</html>

::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
	content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>

<h1>我是一句标题hh</h1>

<p>::before伪元素在元素的内容之前插入内容</p>

<h1>我还是一句标题gg</h1>

</body>
</html>

::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
	content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>

<h1>我是一句标题hh</h1>

<p>::after伪元素在元素的内容之后插入内容</p>

<h1>我还是一句标题gg</h1>

</body>
</html>

::selection 伪元素
::selection 伪元素匹配用户选择的元素部分
下面的CSS属性可以应用于::selection伪元素

color
background
cursor
outline

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /*针对 Firefox 的代码 */
	color: red;
	background: yellow;
}

::selection {
	color: red;
	background: yellow;
}
</style>
</head>
<body>

<h1>随便选择页面中的文本</h1>

<p>我是一个段落hh</p>
<div>不管是什么标签元素，只要选中都会展现相应的样式</div>

<p><b>注释:</b>Firefox 支持可以替代的 ::-moz-selection属性</p>

</body>
</html>

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS 11】组合器选择器伪类锚伪类元素匹配伪元素结合CSS类

【CSS 11】组合器选择器伪类锚伪类元素匹配伪元素结合CSS类把鼠标悬停到元素以显示元素（类似工具提示的效果） -->::first-letter 伪元素用于向文本的首字母添加特殊样式。::first-line 伪元素用于为文本的首行添加特殊样式。::first-letter 伪元素只适用于块级元素。::selection 伪元素匹配用户选择的元素部分。通用兄弟选择器匹配属于指定元素的同级元素的所有元素。::first-line 伪元素只能应用于块级元素
复制链接

扫一扫