关键词

不起作用 选不到 失败

解释

input:first-child 要求既是input元素,而且是兄弟节点中的第一个

如果要找第一个input元素,那么用input:first-of-type

如果要用 first-child 最好是用后代组合器组合一下

.box :first-child {...}

假设存在带box类的元素

注意 first-of-type 指的是标签,不是 class 暂时未实现 first-of-class

【一句话】:first-child 伪类解释的更多相关文章

  1. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  2. css总结13:CSS 伪类(Pseudo-classes)

    1 伪类作用:CSS伪类是用来添加一些选择器的特殊效果. 2 常用示例: 2.1anchor伪类:代码:   正常语法: a{color:#FF0000;}/* 文字颜色 */   伪类语法: a:l ...

  3. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  4. CSS:CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  5. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  6. CSS 类、伪类和伪元素差别具体解释

    CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...

  7. CSS伪类:first-child与:first-of-type的异同

    CSS里关于元素匹配里面有两个非常类似却又不尽相同的选择器,伪类 :first-child 和 :first-of-type 两者在匹配方式上有很大差异,其实在一开始自己也没去注意这个细节,直到上次一 ...

  8. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  9. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  10. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

随机推荐

  1. java学习之SpringMVC拦截器开发

    0x00前言 springmvc的拦截器类似于Selvet的Filter,但是所属的操作又不一样 Spring MVC 提供了 Interceptor 拦截器机制,用于请求的预处理和后处理,也就是增强 ...

  2. Vue 基础学习总结

    介绍 Vue.js 中文文档地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什么 Vue (读音 /vjuː/, ...

  3. Spring Cloud Alibaba 从入门到精通(2023)

    Alibaba Cloud 简介 Spring Cloud Alibaba 即 Alibaba Cloud ,基于 Spring Cloud 构建,同时封装了阿里巴巴的 Nacos.Sentinel ...

  4. 【Java并发001】使用级别:线程相关知识

    一.前言 本文介绍Java线程相关知识(不包括线程同步+线程通信,这个内容在笔者的另一篇博客中介绍过了),包括:线程生命周期.线程优先级.线程礼让.后台线程.联合线程. 二.线程生命周期 2.1 引子 ...

  5. element-ui 对话框dialog里使用echarts,报错'dom没有获取到'?

    给el-dialog添加@open="open()" 在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边 ...

  6. kubernetes数据持久化StorageClass动态供给(二)

    存储类的好处之一便是支持PV的动态供给,它甚至可以直接被视作为PV的创建模版,用户用到持久性存储时,需要通过创建PVC来绑定匹配的PV,此类操作需求较大,或者当管理员手动创建的PV无法满足PVC的所有 ...

  7. Java外包程序员的技术出路

    学习的两个目的: 应付面试 应付工作(解决问题) 首先要明白学习的目的,不同阶段,不同技术的学习目的是不一样的. 有些技术,仅仅是应用级别的,有些技术是原理级别的(主要还是应试).所以不同技术.不同时 ...

  8. 【Shell脚本案例】案例5:找出CPU/内存率占用高的进程

    一.背景 找出占用高的进程 使用脚本编写找出占用CPU的进程 二.分析 1.查看进程 top 输入后按C,就可以列出 其他: ps aux 2.思路 awk进行排序,如top10 即ps aux |a ...

  9. PW6276是一颗高效同步升压转换芯片,内部集成低阻抗功率 MOS

    概述PW6276是一颗高效同步升压转换芯片,内部集成低阻抗功率 MOS. 具有短路保护功能内部集成软启动电路,无需外部补偿电容,外部反馈网络.PW6276采用 SOP8-EP 封装配合较少的外围原件使 ...

  10. JavaScript入门⑧-事件总结大全

    JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...