文档章节

前端技术学习之选择器(九)

博为峰教研组
 博为峰教研组
发布于 2017/01/09 20:42
字数 250
阅读 0
收藏 0

十,:only-child

    :only-child,一看就是选择一个元素,且该元素是其父元素唯一的子元素。

 

代码例子:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>选择器</title>

<style type="text/css">

.post p {

  background: green;

  color: #fff;

  padding: 10px;

}

.post p:only-child {

  background: orange;

}

</style>

</head>

<body>

<div class="post">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

</div>

<div class="post">

  <p>我是一个段落</p>

</div>

</body>

</html>

 

运行效果:

十一,:only-of-type

    :only-of-type选择器是对:only-child的扩展,选择某种类型的子元素,且该子元素是其父元素中唯一一个该类型 的选择器。

 

代码例子:修改容器中仅有一个div元素的背景色为橙色。

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>选择器</title>

<style type="text/css">

.wrapper > div:only-of-type {

  background: orange;

}

</style>

</head>

<body>

<div class="wrapper">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

</div>

</body>

</html>

 

运行效果:

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
WEB前端学习CSS面试题汇总,来巩固一下你的知识吧

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/05/11
0
0
WEB前端开发学习:调试过很多次bug,你了解Chrome控制台的$符的用法吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/06/01
0
0
11个优秀的Android开发开源项目

一、 一个类似微信的时光轴效果 项目地址 https://github.com/ljtyzhr/TimeLine 二、 安卓选择器类库,包括日期、时间、单项、双项选择器、城市地址选择器 项目地址 https://github.com/gzu...

codeGoogle
2017/12/03
0
0
34岁!100天!学会Java编程(Day20-Day28)—Web前端编程

什么是Web前端? 引子:Web编程深似海 原计划用8天时间进行Web前端的学习,结果拖延了,原因自然是对这部分内容学习的难度估计不足。我的方法还是试图一开始了解web编程的全貌,结果发现整个...

魏小筠
2017/11/25
0
0
前端项目练手——先定一个小目标,做他一个天猫官网

先定一个小目标,做他一个天猫官网 带了挺多届的学生,发现了一个现象,同学们在学习HTML,CSS,Javascript这些前端基础技术的时候,不会有太大的问题,大概也能分开掌握里面的标签,元素,选...

maocai15
2016/10/24
2.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
17
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.5K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部