本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。

文章目录

  • 更多的选择器
    • 更多的伪类选择器
    • 更多的伪元素选择器
  • 参考资料

更多的选择器

更多的伪类选择器

  1. first-child 选中第一个子元素

first-of-type 选中子元素中第一个指定类型的元素 表示一组兄弟元素中其类型的第一个元素

  1. last-child

  2. nth-child 选中指定的第几个子元素
    eg: a:nth-child(5) /* 必须是a元素,必须是第五个子元素 */

nth-child(2n) nth-child(even) 选中第偶数个子元素

nth-child(2n+1) nth-child(odd) 选中第奇数个子元素

  1. nth-of-type 选中指定的子元素中第几个某类型的元素

nth-child 按照个数来算。
nth-of-type 按照类型来计算,如果是class那么碰到不同类型的,单独一类,符合条件的选中。

更多的伪元素选择器

  1. first-letter 选中元素中的第一个字母

  2. first-line 选中元素中第一行的文字

  3. selection 选中被用户框选的文字,设置文字颜色、背景

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码

CSS基础(13)- 更多的选择器相关推荐

  1. CSS基础选择器之标签选择器(CSS、HTML)

    CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...

  2. CSS基础知识---三种选择器

    CSS基础知识---三种选择器 选择器 标签选择器 id选择器 class选择器 全部代码 选择器 标签选择器 id选择器 class选择器 标签选择器 选择器优先级:id>class>标 ...

  3. CSS基础(3)- 选择器

    本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 选择器 简单选择器 选择器的组合 选择器的并列 参考资料 选择器 选择器:帮助你精准的选中 ...

  4. html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)

    层叠样式表(Cascading Style Sheets) 盒模型 盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...

  5. HTML与CSS基础之伪类选择器(三)

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪类选 ...

  6. CSS基础(part19)--CSS3属性选择器

    学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3属性选择器 属性选择器列表: 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...

  7. CSS基础知识(一):选择器

    文章目录 前言 一.CSS基础知识 二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...

  8. CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

    前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...

  9. CSS基础(emmet 语法,CSS 复合选择器, 布局认知,背景样式)

    CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法 序号 ...

最新文章

  1. 在Win 2003中配置ASP.net环境
  2. 为什么铺天盖地都是Python的广告?
  3. mysql开启日志占cpu不_使用MySQL Slow Log来解决MySQL CPU占用高的问题
  4. (转)使用XmlDocument类完成对XML的查、删、添、改
  5. 4028: [HEOI2015]公约数数列
  6. spring order_Spring @Order批注
  7. 用Java实现在【520,1314】之间生成随机整数的故事
  8. swift之Mac中NSView视图里的截图【ScrollView中的内容截图】
  9. java.io.IOException: The temporary upload location [/tmp/tomcat.1XXXX] is not valid
  10. UC 国际信息流推荐中的多语言内容理解
  11. 周志华《机器学习》-所有公式推导集合
  12. 服务器间大文件传输软件,四种常用的大文件传输方法
  13. 微信公众号之测试号申请
  14. 华为面试状态码解密手把手教学
  15. operating system not found的问题的解决办法 ---设置活动分区
  16. ADL平台上传数据前的准备工作
  17. simulink简介
  18. android远程输入法,远程输入法
  19. ural 1671 Anansi's Cobweb
  20. Unity中Switch的用法

热门文章

  1. 中华英才网居然出现如此错误
  2. 2016年8月25日 星期四 --出埃及记 Exodus 16:26
  3. 基础运维-杂乱篇-持续更新.......
  4. 仿百度首页(可进行百度搜索)
  5. 多协议BGP-----MPBGP
  6. llama是什么动物_河字猜一动物
  7. 【九度】题目1415:不一样的循环队列
  8. 【蓝旭】第五周预习博客
  9. Honest Coach
  10. 三种不同的interrupt方法区别调用