关键词

不起作用 选不到 失败

解释

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. 嵌入式-C语言基础:字符串结束标识符

    #include<stdio.h> int main() { char cdata[]={'h','e','l','l','o'}; char cdata2[]="hello&q ...

  2. 数据结构篇——KMP算法

    数据结构篇--KMP算法 本次我们介绍数据结构中的KMP算法,我们会从下面几个角度来介绍: 问题介绍 暴力求解 知识补充 Next示例 Next代码 匹配示例 匹配代码 完整代码 问题介绍 首先我们先 ...

  3. (Java)设计模式:创建型

    前言 这篇内容是从另一篇:UML建模.设计原则 中分离出来的,原本这个创建型设计模式是和其放在一起的 但是:把这篇创建型设计模式放在一起让我贼别扭,看起来贼不舒服,越看念头越不通达,导致老衲躺在床上脑 ...

  4. vue3响应式原理以及ref和reactive区别还有vue2/3生命周期的对比,第二天

    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...

  5. Tekton 设计简介 及 实践

    本文是我对Tekton的实现原理和背后技术逻辑的理解,以及在实践过程中的一些总结. 简介 Tekton 是一个基于 Kubernetes 的云原生 CI/CD 开源(https://cd.founda ...

  6. 【每日一题】【DFS】2022年1月5日-543. 二叉树的直径

    给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过也可能不穿过根结点. 答案: /** * Definition for a binary ...

  7. Day36:List详解

    List 1.1 概述 List为Collection的子接口,代表的一组任意对象,有序,有下标.元素可以重复. 1.2 方法 方法名 说明 void add(int index,Object o) ...

  8. TabControl控件的简单使用-添加tab

    1.首先创建一个MFC对话框框架,在对话框资源上从工具箱中添加上一个Tab Control 控件,根据需要修改一下属性,然后右击控件,为这个控件添加一个变量,将此控件跟一个CTabCtrl类变量绑定在 ...

  9. 前端HTML不使用flash兼容IE浏览器播放视频

    前言:最近公司项目上有个需求就是在IE8上不使用flash技术来去实现视频播放 分析:IE8不支持HTML5,所以不能使用video标签,在非IE的浏览器可以使用video标签 目录 我的解决 DEM ...

  10. 从0到1学Python丨图像平滑方法的两种非线性滤波:中值滤波、双边滤波

    摘要:常用于消除噪声的图像平滑方法包括三种线性滤波(均值滤波.方框滤波.高斯滤波)和两种非线性滤波(中值滤波.双边滤波),本文将详细讲解两种非线性滤波方法. 本文分享自华为云社区<[Python ...