CSS中:first-child伪类
使用 :first-child 伪类来选择作为某个元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:
如下:
html: <div>
<p>These are the necessary steps:</p>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
<div>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ul>
</div>
</div> CSS:
p:first-child{
color:red;
} ul:first-child{
color:blue;
}
效果如下:
CSS中:first-child伪类的更多相关文章
- CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
- CSS中的一些伪类
一.:nth-child 和 :nth-of-type (1):nth-child() :nth-child(n) 选择器选取某任意一父元素的第 n 个子元素( p:nth-child(n) 即选中任 ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS设计指南之伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...
- Html学习之十(CSS选择器的使用--伪类选择器)
伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...
- css 04-CSS选择器:伪类
04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- CSS的总结(选择器,伪类等...)
关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...
随机推荐
- Apache配置详解(最好的APACHE配置教程)
From: http://aiks.blog.com.cn/archives/2006/1748482.shtml Apache的配置 Apache的配置由httpd.conf文件配置,因此下面的配置 ...
- CodeChef-----February Challenge 2018---Broken Clock(极坐标+三角函数递推+矩阵快速幂)
链接: https://www.codechef.com/FEB18/problems/BROCLK Broken Clock Problem Code: BROCLK Chef has a clo ...
- 一台linux机器远程mount另一台linux机器
本机电脑系统是unbantu,要将另一台linux电脑上的文件mount到本机目录下.mount的原理是网络文件系统,即NFS,本机操作步骤如下 一,安装 nfs-common : apt inst ...
- SQL语句多个字段排序
写在前面的话: 本次迭代,分配的任务有点多啊,好在本妈妈朝10晚6的加班加点.其中一项就是列表展示啊, 展示就展示呗,还要排序.排序也可以,测试时排序字段值为啥都一样啊.结果点一下一个顺序. 就想在第 ...
- tf多值离散embedding方法
https://www.jianshu.com/p/4a7525c018b2 注意:一个域下的多值情况,这里最终输出是直接给出来每个域的(多值)的embedding值,多个值的也只输出一个embedd ...
- Android下Native的so编译:使用cmakelists.txt
android studio的CMakeLists.txt写好后,在Studio中编译没问题,在命令编译时则需要配置很多参数才能成功 示例CMakeLists.txt文件: cmake_minimum ...
- pg和mysql对比
作者:方圆链接:https://www.zhihu.com/question/20010554/answer/15863274来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- vue启动流程
继上一篇vue环境的搭建(在D盘新建文件夹vue_cli,把(我已经上传到了文件下)资料下tpls解压完后的所有文件都复制到D盘vue_cli下) 目录如图: 1.webstorm设置为了提高webS ...
- Matlab——矩阵运算 矩阵基本变换操作
矩阵运算 + 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 .' 转置 除了加减符号,其余的运算符必须加“.” >> a = : a = >> a- %减法 ans ...
- 【MM系列】SAP 物料帐下修改物料的价格
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 物料帐下修改物料的价格 ...