记录一下前一段时间使用、学习的几种选择器。

1.  :frist-child 选择器n

比如<ul><li></li>

    <li></li>

    <li></li></ul>

要选中第一个li,则使用 li:frist-child{},而不是ul:frist-child{},将会选中第一个li标签

如果ul下第一个元素不是 li, li:frist-child就失效了。突然感觉好鸡肋。。

2.  :nth-child(n)选择器

选择属于其父元素的第n个子元素,计数从1开始,而不是0。IE浏览器不支持。

n可以是数字,也可以是odd、even,也可以是数学算式

比如<ul>

    <p></p>

    <li></li>

    <li></li>

    <li></li></ul>

(1)要选中第一个li。使用   li:nth-child(2)  ,li: 只能匹配<li>元素,写成 li:nth-child(1)不能匹配到<p>元素,要匹配<p>则写为p:nth-child(1)

这里,网上教程表示:该选择器选取父元素的第 N 个子元素,与类型无关。经过实验,发现与类型有关,用的时候需要自己再验证一下。

(2)odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

  选中下标是奇数的 li 元素:li:nth-child(odd)

(3)使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

 选中下标是 2 的倍数的所有 li 元素:li:nth-child(2n)

3.  :nth-of-type(n)选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式

比如<ul>

    <p></p>

    <li></li>

    <li></li>

    <li></li></ul>

要选择第一个 li 元素,就是 li:nth-of-type(1),注意这里与:nth-child(n)选择器的区别

4.  ::select选择器

选中当前鼠标选中的元素

一般选中的文本是蓝色背景,可以用此改变为粉色!

css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器的更多相关文章

  1. 新的 css 子选择器

    1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  3. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  4. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  5. jsoup select 选择器

    转载自:http://blog.csdn.net/zhejingyuan/article/details/11801027 方法 利用方法:Element.select(String selector ...

  6. jsoup select 选择器(Day_02)

    "自己"这个东西是看不见的,撞上一些别的什么,反弹回来,才会了解"自己". 所以,跟很强的东西.可怕的东西.水准很高的东西相碰撞,然后才知道"自己&q ...

  7. Select 选择器

    Select 选择器 当选项过多时,使用下拉菜单展示并选择内容. 基础用法 适用广泛的基础单选 v-model的值为当前被选中的el-option的 value 属性值 <template> ...

  8. elementUI 学习入门之 Select 选择器

    Select 选择器 基础用法 <el-select v-model="val1" placeholder="请输入"> <el-option ...

  9. 子查询 做where条件 做 from的临时表 ,做select的一个字段 等

    子查询 做where条件 做 from的临时表 ,做select的一个字段 等

随机推荐

  1. kafka-消费者测试

    1. 在窗口1创建一个producer,topic为test,broker-list为zookeeper集群ip+端口   /usr/local/kafka/bin/kafka-console-pro ...

  2. 痞子衡嵌入式:MCUBootUtility v2.4发布,轻松更换Flashloader文件

    -- 痞子衡维护的NXP-MCUBootUtility工具距离上一个版本(v2.3.1)发布过去2个月了,这一次痞子衡为大家带来了版本升级v2.4.0,这个版本主要有一个非常重要的更新需要跟大家特别说 ...

  3. 【Azure云服务 Cloud Service】如何在部署云服务Cloud Service时候通过启动任务Start Task来配置IIS (如开启ARR)

    问题情形 通过VS部署Cloud Service时,需要在开始任务时候安装或配置其他任务,如安装及配置ARR. 执行步骤 1) 下载 requestRouter_amd64.msi 和 webfarm ...

  4. BERT模型详解

    1 简介 BERT全称Bidirectional Enoceder Representations from Transformers,即双向的Transformers的Encoder.是谷歌于201 ...

  5. Anderson《空气动力学基础》5th读书笔记 第1记——流动相似性

    在飞机真正上天之前,我们常常需要制作出缩小版的模型放在风洞中吹呀吹,尽可能地模拟真实飞行中的参数,这时我们就需要实现流动相似性,这便是本记要讲的. 文章目录 一.流动相似性的标准 二.流动相似性的应用 ...

  6. 给萌新HTML5 入门指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...

  7. 3分钟学完Python,直接从入门到精通

    作为帅气小编,我已经把python一些模块的甩在这儿了qwq,只要你拿到这些干货,包你玩转python,直接冲向"大佬"的段位,如果已经学了C或者C++或者说如果你需要你的一段关键 ...

  8. Pyqy5 让窗口居中

    # QDesktopWidget import sys from PyQt5.QtWidgets import QDesktopWidget,QMainWindow,QApplication from ...

  9. Linux服务器部署redis常见问题处理

    redis开启和禁用登陆密码校验 1. 开启登陆密码校验 在redis-cli命令行工具中执行如下命令: config set requirepass yourpassword2. 禁用登陆密码校验 ...

  10. Luogu P4271 [USACO18FEB]New Barns P

    题意 给一个一开始没有点的图,有 \(q\) 次操作,每次为加点连边或者查询一个点到连通块内所有点的距离最大值. \(\texttt{Data Range}:1\leq q\leq 10^5\) 题解 ...