关键词

不起作用 选不到 失败

解释

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. WPF之MVVM实践中的Command与CommandParameter

    先记录一下,方便以后复习. https://www.cnblogs.com/babietongtianta/p/3474101.html

  2. 关于python3调用matplotlib中文乱码问题

    问题描述 我用来绘制柱形图,横坐标上面的数据, 但是网上大部分说的都是更改横纵坐标标签的乱码问题,而不是横坐标数据乱码问题 解决办法 更改横纵坐标上标签的中文不乱码 import matplotlib ...

  3. 一个有趣的nginx HTTP 400响应问题分析

    背景 之前在一次不规范HTTP请求引发的nginx响应400问题分析与解决 中写过客户端query参数未urlencode导致的400问题,当时的结论是: 对于query参数带空格的请求,由于其不符合 ...

  4. MISC中的图片修改宽高问题

    在做CTF中MISC分类题目时,很常见的一个问题就是修改图片正确的宽与高 (此篇笔记中的内容以ctfshow中MISC入门分类为切入点,感兴趣的同学可以一边做一边有不会的看看,仅供参考,我是菜鸡) 曾 ...

  5. MYSQL快速安装整理

    参考教程:https://www.cnblogs.com/brad93/p/16650780.html [检查是否已安装过] find / -name mysql [快速安装开始] groupadd  ...

  6. Window系统的mysql数据库定时备份

    原文:Window系统的mysql数据库定时备份 - Stars-One的杂货小窝 最近老大提到了数据库备份的功能,由于服务器是window系统的,所以研究了下备份的方案,特此记录 主要是实现每天定时 ...

  7. 「Docker学习系列教程」9-Docker容器数据卷介绍

    通过前面8篇文章的学习,我们已经学会了docker的安装.docker常用的命令已经docker镜像修改后提交的远程镜像仓库及提交到公司的私服仓库中.接下来,我们再来学学Docker另外一个重要的东西 ...

  8. 三步快速搭建Typora图床(SM.MS+PicGo)

    三步快速搭建Typora图床(基于SM.MS+PicGo) 前言 在有些同学使用Typora的过程中,会发现Typora不像Word一样,在文档脱离本机后依然正常显示图片,自己的tyopora文件在发 ...

  9. 洛谷P1434例题分析

    [SHOI2002] 滑雪 题目描述 Michael 喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Mic ...

  10. APICloud 平台常用技术点汇总讲解

    ​  平台介绍: 使用 APICloud 可以开发移动APP.小程序.html5 网页应用.如果要实现编写一套代码编译为多端应用(移动APP.小程序.html5 ),需使用 avm.js  框架进行开 ...