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 } 类选择器 ...
随机推荐
- qtp 自动化测试桌面程序-点滴1(录制设置、共用文件）
1 automation-record and run settings--设置录制程序 2 将function/repository 放于单独于test的文件夹中-方便多个test使用同一个仓库.函 ...
- delphi中如何实现DBGrid中的两列数据想减并存入另一列
可参考下面的例子: 数据自动计算的实现:“金额”是由“单价”和“工程量”相乘直接得来的,勿需人工输入. 这可在“数据源构件”的onupdatedata例程添加如下代码实现: procedure T ...
- codeforces659C
Tanya and Toys CodeForces - 659C In Berland recently a new collection of toys went on sale. This col ...
- Nginx 阻塞与非阻塞
L:32
- Node.js机制及原理理解初步【转】
一.node.js优缺点 node.js是单线程. 好处就是 1)简单 2)高性能,避免了频繁的线程切换开销 3)占用资源小,因为是单线程,在大负荷情况下,对内存占用仍然很低 3)线程安全,没有加锁. ...
- BZOJ3435[Wc2014]紫荆花之恋——动态点分治(替罪羊式点分树套替罪羊树)
题目描述 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来.仔细看看的话,这个大树实际上是一个带权树.每 ...
- BZOJ4873[Shoi2017]寿司餐厅——最大权闭合子图
题目描述 Kiana最近喜欢到一家非常美味的寿司餐厅用餐.每天晚上,这家餐厅都会按顺序提供n种寿司,第i种寿司有一个 代号ai和美味度di,i,不同种类的寿司有可能使用相同的代号.每种寿司的份数都是无 ...
- windows 下 mysql服务的注册和删除
注册: mysqld --install 服务名 --defaults-file="C:\Mysql\mysql-5.7\my.ini" 删除 sc delete 服务名 停止服务 ...
- poj 2226 Muddy Fields（水二分图）
Rain has pummeled the cows' field, a rectangular grid of R rows and C columns (1 <= R <= 50, 1 ...
- 【HDU - 4348】To the moon（主席树在线区间更新）
BUPT2017 wintertraining(15) #8G 题意 给一个数组a,有n个数,m次操作.\(N, M ≤ 10^5, |A i| ≤ 10^9, 1 ≤ l ≤ r ≤ N, |d| ...