only-of-type选择器

最新推荐文章于 2024-01-19 08:19:03 发布
最新推荐文章于 2024-01-19 08:19:03 发布
阅读量1.1k 收藏
点赞数

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码：

<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
</div>
<div class="wrapper">
  <div>我是一个Div</div>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p>
</div>

CSS代码：

.wrapper > div:only-of-type {
  background: orange;
}

演示结果：

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

<!DOCTYPEwww.dztcsd.com/  html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>


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


<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
</div>
</body>
</html>

任务

在CSS选择中第8行输入正确的代码，将仅有一个P元素的背景修改为橙色。

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 only-of-type选择器
weixin_39093202的博客
01-10 296
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。 这样说或许不太好理解，换一种说法。 “:only-of-type”是表示一个元素他有很多个子元素， 而其中只有一种类型的子元素是唯一的， 使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 示例演示 通过“:only-of-type”选择器来修改容器中仅有一个d...
css选择器——:only-of-type
Jener
08-11 638
这里介绍:only-of-type选择器的语法 理论： :only-of-type选择器匹配属于同类型中唯一同级元素 p:only-of-type{ color: magenta; } /*匹配属于同类型中唯一同级元素的p元素的字体颜色*/ 以body为直接父级的p元素 第一个p元素 以div为直接父级 第一个p元素 以div为直
(CSS):only-of-type
05-06 154
W3C对该伪类选择器的定义为： :only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 描述一如既往的专业难懂，话不多说，示例讲解 <!DOCTYPE html> <html> <head> <style...
详细分析CSS伪类:only-of-type
Blog of Leviash
07-17 436
2.特定状态下的样式变化：如果在某些特定状态下，你想要为唯一的某个特定类型的标签应用不同于其他同类型标签的样式，:only-of-type 可以帮助你实现这个效果。通过使用 :only-of-type 选择器，你可以确保只有一个该类型的标签应用特定的样式，而其他相同类型的标签不会受到样式的影响。比如上述结构，因为p、span、i都是在div里唯一存在的，就可以用div>p:only-of-type,div>span:only-of-type,div>i:only-of-type来选中三者。
CSS :only-of-type 选择器
lengqingIT的博客
03-25 258
HTML 用法 <body> <h1>:only-of-type选择器匹配属于同类型中唯一同级元素</h1> <h3>实例:匹配属于同类型中唯一同级元素的p元素的背景颜色<h3> <div><p>www.semi-warm.com</p></div> ​ <div&gt...
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
css3 伪类选择器快速复习小结
01-19
如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: ...
cutEditor -最好用的在线编辑器
08-23
Only a couple lines of code , you don't need to be an expert. Allows you to add an online HTML editing functionality that works with standard HTML form. 很容易用API隐藏按钮和Tabs标记 Cute Editor ...
HTML5/CSS餐厅练习.rar
04-22
plate:only-of-type(6n+3),plate:only-of-type(6n+5) plate元素下的第3个和第5个元素 第二十三关 plate apple.small:only-of-type plate元素下满足apple.small元素的唯一一个元素 第二十四关 orange.small:last-of...
jquery-1.1.3 效率提高800%
07-21
选择器速度提升 选择器的速度大幅度提高了，下表为jQuery1.1.2和1.1.3的选择器速度对比，提高了8倍多 Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement IE 6 4890ms 661ms 740% Firefox 2 5629ms 567...
【CSS3】only-of-type选择器
O(∩_∩)O
02-23 407
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 示例演示 通过“:only-of-type”选择器来修改容器中仅有一个div元素
【CSS3】---only-child选择器+only-of-type选择器
weixin_30429201的博客
04-23 198
only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div clas...
详解：9only-child only-of-type
qq_37805832的博客
04-25 508
only-child只有一个子元素的css样式 only-of-type只有一个元素的css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="...
:read-only_美丽而独特的雪花：使用：only-of-type选择器
cungui5726的博客
08-24 105
:read-onlyThe logical next step from the :empty and :only-child CSS selectors, only-of-type selects single instances of particular elements in a particular context. 从:empty和:only-child CSS选择器的逻辑下一步是， ...
CSS常用伪类选择器详解
热门推荐
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
jQuery :only-of-type选择器实例详解
最新发布
weixin_47378963的博客
01-19 411
如上实例，运行之后，只有第一个div中的p元素和span元素被选择，而第二个div中的两个p元素都不会被选择。这是因为，:only-of-type选择器只会匹配class为e的元素的父元素中类属性为e且元素类型也是唯一的子元素，比如第一个div中p子元素是唯一的，span也是唯一的，而第二个div中class为e的p元素有两个。即:only-of-type选择器匹配选择的子元素必须是与selector选择器类型相同（比如类属性）且元素类型唯一的子元素！：内容仅供参考，不保证正确性！
CSS：好玩的‘伪类’系列之——(:only-child与:only-of-type)
gavincz的博客
04-30 1167
:only-child 官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式 :only-of-type 官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式 注意： 在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...
only-child、only-of-type、nth-child、 nth-of-type
qiuqiu1894的博客
07-29 908
先从最不容易理解的only-child，only-of-type说起吧，理解这两个后面的都好理解了。 only-child 选取条件：需要有父元素（不包含body元素），父元素下只有一个元素，且该唯一个元素为指定元素。 a:only-child{ color:blue; } <body> <div> <div> <a>a标签1</a> </div> </div> <div> <div&
CSS 选择器分栏——伪元素与伪类选择器
浅陌繁星的博客
11-29 1454
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。。伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。
注释代码" .dataframe tbody tr th:only-of-type {\n", " vertical-align: middle;\n",
05-28
这段代码是CSS样式表中的一部分，用于设置表格中某些元素的样式。具体来说，它的作用是将表格中只有一个表头的列的垂直对齐方式设置为居中对齐。其中，".dataframe"是一个类名，用于指定这段样式应用于哪些元素，"tbody tr th:only-of-type"是CSS选择器，用于选择表格中只有一个表头的列，"{ vertical-align: middle; }"是样式规则，用于设置垂直对齐方式为居中对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值