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()的更多相关文章

  1. HTML、CSS部分

    要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...

  2. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  3. html/css杂题

    1.css选择器:详细(http://www.ruanyifeng.com/blog/2009/03/css_selectors.html) 派生选择器:按标签 类别选择器:按class ID选择器: ...

  4. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  5. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

  6. 前端html,css基础总结

    0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...

  7. web前端总结面试问题<CSS&HTML问题>

    一个父元素div,一个未知宽度.高度的子元素div [上下左右居中方法总结] //1.position布局,position设为absolute,其他同情景一 2.display:table 父级元素 ...

  8. 最基础的CSS面试题

    1.Doctype作用是什么?严格模式与混杂模式分别是如何触发这两种模式的,区分它们有何意义? (1)<!DOCTYPE>声明位于文档中的最前面,处于<html>标签之前.告知 ...

  9. css selector regexp css选择器 正则表达式 css 参考手册

    jQuery 选择元素  a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...

  10. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

随机推荐

  1. LoadRunner Vuser接口测试脚本 Post举例

    发送内容为JSON的POST请求需要加入"EncType=application/json",表单参数不需要.(JAVA API) // POST接口调用 web.custom_r ...

  2. LODOP打印控件如何提示用户升级下载安装新版本

    Lodop.C-Lodop在不断完善功能和更新中,新版本修复了很多问题,以及增加很多有利的功能,网站如何更新版本,提示用户下载新版本呢?更新版本很简单,只需要三步:1.替换提示安装部分的自己放置的路径 ...

  3. Hibernate最佳实战

    1:一对一,一对多,多对多双向管理必设mappedBy ,将关系交给乙方维护,不然的话会在双方都建立关系,比如一对一双向的时候双方都会保存对方的id外键管理 具体在项目中采用双向还是单项看实际情况. ...

  4. 学习 Spring (八) 注解之 Bean 的定义及作用域

    Spring入门篇 学习笔记 Classpath 扫描与组件管理 从 Spring 3.0 开始,Spring JavaConfig 项目提供了很多特性,包括使用 java 而不是 XML 定义 be ...

  5. KKT条件

    kkt条件背下来容易.理解上还有问题 主要是lambda≥0和lambda*f(x)=0这两个条件懵逼. 下面说明一下为什么 参考:https://blog.csdn.net/newthinker_w ...

  6. linux读取Windows的txt文件问题

    问题:Windows下生成的txt文件,在Linux下读取时会读取到多余字符(如: ^M) 原因:Windows和Linux下的换行符不一致 解决:在Linux代码中将多余字符去掉 ) buf = b ...

  7. codeforces-div2-449-B

    题意:确定一个回文偶数十进制数字,输入k和q,求前k小的和对q取余的值 解题思路:首先确定一个,第k个回文偶数一定前半段一定是k,比如第12个,这个数就是1221: 代码: #include<i ...

  8. [离散时间信号处理学习笔记] 7. z变换

    z变换及其收敛域 回顾前面的文章,序列$x[n]$的傅里叶变换(实际上是DTFT,由于本书把它叫做序列的傅里叶变换,因此这里以及后面的文章也统一称DTFT为傅里叶变换)被定义为 $X(e^{j\ome ...

  9. Node.js机制及原理理解初步【转】

    一.node.js优缺点 node.js是单线程. 好处就是 1)简单 2)高性能,避免了频繁的线程切换开销 3)占用资源小,因为是单线程,在大负荷情况下,对内存占用仍然很低 3)线程安全,没有加锁. ...

  10. linux-shell系列5-统计

    #!/bin/bashshow=$(service --status-all 2>/dev/null | grep -E "is running|正在运行"|awk '{pr ...