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 ...
随机推荐
- ppt制作的相关技巧
一.好的ppt需要达到的目标是: 用情感打动你,用逻辑说服你 二.好主题,写在封面上 主标题带来冲击力,副标题提供描述性细节 如何打造好标题: (1)用数字给标题添彩 (2)想畅销书学标题 (3)向流 ...
- centos7 安装 chrome
1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /etc/yum.repos.d/ vim google-chrome.repo ...
- WOSA XFS 官方文档地址
WOSA XFS 官方文档地址: ftp://ftp.cencenelec.eu/CWA/CEN/WS-XFS/
- Design a stack that supports getMin() in O(1) time and O(1) extra space
Question: Design a Data Structure SpecialStack that supports all the stack operations like push(), p ...
- 【c++进阶:c++ algorithm的常用函数】
c++ algorithm的常用函数 https://blog.csdn.net/hy971216/article/details/80056933 reverse() reverse(it,it2) ...
- Linux_进程管理&计划任务
目录 目录 top打开Linux系统任务管理控制台 ps进程查询指令 kill进程关闭指令 一个小实验 一次性计划任务 周期性计划任务 top打开Linux系统任务管理控制台 快捷键: P M k q ...
- 阶段3 1.Mybatis_09.Mybatis的多表操作_1 mybatis表之间关系分析
4.mybatis中的多表查询 表之间的关系有几种: 一对多 多对一 一对一 多对多 举例: 用户和订单 ...
- Appium关键字
*** Settings *** Library AppiumLibrary Library AutoItLibrary Library os *** Keywords *** xpath应该匹配次数 ...
- linux 安装 sudo
1.安装sudo# apt-get install sudo2.修改 /etc/sudoers 文件属性为可写# chmod +w /etc/sudoers3.编辑 /etc/sudoers ,添加如 ...
- 现有1~100 共一百个自然数,已随机放入一个有98个元素的数组a[98].要求写出一个尽量简单的方案找出没有被放入数组的那2个数,并在屏幕上打印这2个数
void test7() { try { ]; ]; ]; ; ; int i; ; i < num.Length; i++) { num[i] = i + ; num1[i] = i + ;/ ...