使用 CSS 选择子元素-css教程-PHP中文网

使用 CSS 选择子元素

王林

发布： 2023-08-31 19:53:03

转载

1566人浏览过

css子组合器用于选择父元素的所有子元素。

CSS子组合器的语法如下 -

Selector > Selector {
   attribute: /*value*/
}

登录后复制

CSS后代组合器用于选择父元素的所有后代元素。

CSS后代组合器的语法如下：

Selector Selector {
   attribute: /*value*/
}

登录后复制

示例

以下示例演示了CSS的子元素和后代选择器。

立即学习“前端免费学习笔记（深入）”；

在线演示

<!DOCTYPE html>
<html>
<head>
<style>
article > * {
   text-align: center;
   border: 10px groove tomato;
}
::first-line {
   box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img  src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" / alt="使用 CSS 选择子元素" >
</article>
</body>
</html>

登录后复制

输出

这将产生以下结果 -

使用 CSS 选择子元素

仿优购鞋子商城整站 for ECSHOP

ECSHOP仿优购鞋子商城整站源码，程序基于ECSHOP 2.7.3 UFT8版本制作，适合服装，鞋子，家居等商城使用。目前程序未添加广告位，请自行在网站后台进行添加。具体添加方法，请查看SHOPEX5站点的相关教程。安装方法：1。访问：域名/install2. 按照程序提示进行安装.3.安装完成后,登陆网站后台.选择数据库管理--数据库备份--数据库还原.，导入之前的数据库。4.后台-模板管

查看详情

示例

现场演示

<!DOCTYPE html>
<html>
<head>
<style>
body > * {
   margin: 20px;
}
article p {
   font-size: 24px;
   box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);
}
</style>
</head>
<body>
<article>
<p>Neque porro quisquam </p>
<p>est qui dolorem ipsum quia dolor sit amet,</p>
<div><p>consectetur, adipisci velit.....</p></div>
</article>
<div>
<p> consectetur, adipisci velit</p>
<article>
<p> consectetur, adipisci velit</p>
</article>
</div>
</body>
</html>

登录后复制

输出

这将产生以下结果 -

使用 CSS 选择子元素

以上就是使用 CSS 选择子元素的详细内容，更多请关注php中文网其它相关文章！