only-child选择器

最新推荐文章于 2022-05-14 18:31:57 发布
最新推荐文章于 2022-05-14 18:31:57 发布
阅读量973 收藏 1
点赞数

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>

CSS代码：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

演示结果：

（<a href="http://www.dztcsd.com/">建筑资质代办</a>）

<!DOCTYPE www.dztcsd.com/html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>
<ul>
  <li>Item1</li>
</ul>
<ol>
  <li>Item1</li>
</ol>
<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ol>
</body>
</html>

任务

在右边CSS编辑器的第6行中输入正确的代码，通过“:only-child”选择器，改变只有一个列表项的背景色为橙色。

大志天成119
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 922
先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。 only-child 选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。 a:only-child{ color:blue; } <body> <div> <div> <a>a标签1</a> </div> </div> <div> <div&
选择器——:only-child
Jener
08-11 684
这里我们测试下选择器——:only-child 理论：:only-child选择器匹配属于父级中唯一子元素的元素 测试1——body元素中只含有一个p标签 测试二 p:only-child{ color: magenta; } /*匹配属于父级元素中唯一子元素的p元素*/ 以body为直接父级的p元素 第一个p元素 以div为直接父级
【CSS3】only-child选择器
O(∩_∩)O
02-23 935
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： 我是一个段落 我是一个段落 我是一个段落
CSS :only-child 选择器
lengqingIT的博客
03-25 1102
HTML 用法 <body> <h1>:only-child选择器匹配属于父元素中唯一子元素的元素</h1> <h3>实例:匹配属于父元素中唯一子元素的p元素</h3> <div><p>www.semi-warm.com</p></div> <div><span&gt...
jQuery中:only-child选择器用法实例
01-19
本文实例讲述了jQuery中:only-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器将匹配父元素的唯一子元素。如果其父元素中含有其他元素，那将不会被匹配。 语法结构: 代码如下:$(“:only-child”) ...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
rework-only-child:的返工实施
06-28
这将转换:only-child伪类选择器： . some-class , . some-other-class : only-child { color : blue; } 对于当前兼容的等效项： . some-class , . some-other-class : first-child : last-child { color : ...
css 使用 :only-child 实现多状态的动态加载动画
朝阳39的博客
12-22 326
需求描述 尤其需要使用:only-child的场景是动态场景，也就是某个固定小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式也不同，此时就是:only-child伪类大放异彩的时候。例如，某个加载（loading）模块里面可能就只有一张加载图片，也可能仅仅就是一段加载描述文字，也可能是加载图片和加载文字同时出现，此时:only-child伪类就非常好用。 完整范例 <!-- 1. 只有加载图片 --> <div class="cs-load.
onlyChild
schifred的博客
02-25 118
'use strict'; var _prodInvariant = require('./reactProdInvariant'); var ReactElement = require('./ReactElement'); var invariant = require('fbjs/lib/invariant'); // 校验children是否单个reactElem...
:only-child和:only-of-type选择器的比较
04-03 1071
:only-child 当元素是唯一的子元素，被选择。 HTML代码： <body> <div class="x"> <div>第一个DIV</div> <div>第一个DIV</div> <p>第一个P</p> </div> </body> ...
CSS3---子元素选择器
We_jia的博客
12-09 9122
子元素选择器的作用 在之前的选择器中当我们遇到一个元素下有多个子元素时（针对list列表元素），我们在进行css控制时都是在每个子元素定义class，通过class来控制对应的子元素，这样做会很麻烦，子元素选择器也可以不用定义class也能控制子元素的作用。 一、常见的子元素选择器 ：first-child                     父元素的首个子元素 ：last-chil...
子元素过滤器—：onlychild
前端要前沿
06-24 604
:only-child 代码理解： $('li:only-child').css('background', '#ccc'); // 获取li元素，li是其父节点的唯一一个子元素，设置li的样式背景为灰色 =======================================以下为实例==============================================
【CSS3】---only-child选择器+only-of-type选择器
weixin_30429201的博客
04-23 202
only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div clas...
CSS选择器注意点
chengyao8926的博客
07-27 277
only-child与only-of-type :only-child是一个 CSS 伪选择器，它匹配一个元素，该元素满足： 该元素是其父级唯一孩子； 该元素父级没有其他任何子元素； :only-of-type是一个 CSS 伪选择器，它匹配一个元素，该元素满足： ...
伪类/伪元素选择符/选择器 深入了解
xiaomizhou66a的博客
07-08 1528
伪类/伪元素选择符/选择器 深入了解： 一、伪类选择符/选择器 CSS伪类是用来添加一些选择器的特殊效果。 就是给某个元素后面加上冒号然后加上需要的特殊修饰词 选择到所需要的效果，或者是元素。 ①元素使用伪类 例如：a：link ②元素的类使用伪类 例如：a.red:visited...
JQuery中的九大选择器及其应用（下）
m0_46160024的博客
05-14 164
JQuery中共有九大选择器，本段代码展示了后三种选择器及其应用，即子元素选择器、表单选择器以及表单对象属性选择器。
H5选择器类型
weixin_46446530的博客
03-05 468
通用选择器 选择所有元素 标签选择器（元素名称）根据标签选择元素 类选择器（.<类名>） 根据class选择元素 id选择器（#） 根据id的值选择元素 属性选择器（【<条件>】） 根据属性选择元素 并集选择器（<>,<>）同时匹配多个选择器，取多个选择器的并集 后代选择器（<> <>） 先匹配第二个选择器的元素，并且属于第一...
常用的CSS3选择器
fantasy_geek的博客
03-05 3222
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
27、(1分)下列哪种选择器不是CSS3才定义的() OA、:enabled B、:before OC、:only-child D、:checked
最新发布
06-01
选项C的`:only-child`选择器用于选择父元素中唯一的子元素，它也是CSS2.1引入的伪类选择器；选项D的`:checked`选择器用于选择被选中的表单元素，如复选框或单选框，它也是CSS2.1引入的伪类选择器。因此，选项B是不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值