CSS——nth-child()
nth-child()选择器：CSS3新属性
用法：p:nth-child(2)
选择p标签的父元素 的第二个子元素,并且这个子元素必须是p才起作用
有点绕，有点无厘头，举个栗子：
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)
{
background:red;
}
</style>
</head>
<body> <h1>这是第一个标题</h1>
<h1>这是第二个标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p> </body>
</html>，
上述代码中哪个变红？——都不变红，因为p的父元素，即body，的第二个子元素是h1,不是p，样式不生效
改变一点点（选择器前面p变为h1）
<style>
h1:nth-child(2)
{
background:red;
}
</style>
"<h1>这是第二个标题</h1>"红了
或者：
<style>
p:nth-child(3)
{
background:red;
}
</style>
"<p>第一个段落。</p>"红了
CSS——nth-child()的更多相关文章
- HTML、CSS部分
要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- html/css杂题
1.css选择器:详细(http://www.ruanyifeng.com/blog/2009/03/css_selectors.html) 派生选择器:按标签 类别选择器:按class ID选择器: ...
- CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
- 前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
- web前端总结面试问题<CSS&HTML问题>
一个父元素div,一个未知宽度.高度的子元素div [上下左右居中方法总结] //1.position布局,position设为absolute,其他同情景一 2.display:table 父级元素 ...
- 最基础的CSS面试题
1.Doctype作用是什么?严格模式与混杂模式分别是如何触发这两种模式的,区分它们有何意义? (1)<!DOCTYPE>声明位于文档中的最前面,处于<html>标签之前.告知 ...
- css selector regexp css选择器 正则表达式 css 参考手册
jQuery 选择元素 a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
随机推荐
- 扩展运算符（spread）是三个点（…)
扩展运算符(spread)是三个点(…),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来 一.展开数组 //展开数组 let a = [1, ...
- Web API2 使用默认Identity
当您选择个人账户在Web API项目模板,项目包含一个令牌授权服务器验证用户凭证和问题.下面的图显示了相同的凭证流的Web API组件. 发送一个未经授权的请求 首先,运行应用程序并单击按钮调用的AP ...
- 如何创建djiago项目和djiago连接数据库
介绍 主要介绍在python中如何使用pycharm创建djiago项目以及如何将djiago项目和mysal数据库连接起来 创建djiago项目 1.使用pycharm创建djiao项目 点击pyc ...
- windows动态库与Linux动态库
Linux动态库和windows动态库的目的是基本一致的,但由于操作系统的不同,他们在许多方面还是不尽相同.但是尽管有差异Linux动态库的windows动态库还是可以移植的,有一些规则以及经验是必须 ...
- fpm 打包教程
常用yum命令: Yum安装时需要安装到指定的文件夹,则需要 --installroot yum install --installroot=/usr/src/ vim 常用rpm命令: 常用yum仓 ...
- 第二十二天 logging hashlib re 模块
今日内容 logging功能完善的日志模块 re正则表达式模块主要处理字符串匹配 查找 搜索给你一个字符串 要从中找到你需要的东西 爬虫大量使用 hashlib hash算法相关的库 算法怎么算不需要 ...
- python字符编码与文件打开
一 字符编码 储备知识点: 1.计算机系统分为三层: 应用程序 操作系统 计算机硬件 2.运行Python程序的三个步骤 1.先启动python解释器 2.再将python文件当做普通的文本文件读入内 ...
- 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案
点击返回自学华为IoT物流网 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案 1. 1 能源工业--油田业务面临的三大挑战 故障处理不及时: 部分油田开采难道大.机械故障较多.现场发生的 ...
- BSGS算法及扩展
BSGS算法 \(Baby Step Giant Step\)算法,即大步小步算法,缩写为\(BSGS\) 拔山盖世算法 它是用来解决这样一类问题 \(y^x = z (mod\ p)\),给定\(y ...
- 【BZOJ5416】【NOI2018】冒泡排序（动态规划）
[BZOJ5416][NOI2018]冒泡排序(动态规划) 题面 BZOJ 洛谷 UOJ 题解 考场推出了就是两个上升子序列,并且最长下降子序列长度不超过\(2\)...然后大力暴力状压\(dp\)混 ...