伪类的格式重点:父标签层级 & 当前标签类型
伪类的格式重点:父标签层级 & 当前标签类型
通过例子说明:
css1:
span:nth-of-type(2){color: red;}
css2:
span :nth-of-type(2){color: red;}
html:
<p>
<span>I have an apple</span>
<i>I have an orange</i>
<strong>I have a banana</strong>
<span>
<em>I</em>
<b>have</b>
<em>two </em>
<em>apple</em>
<b>haha</b>
</span>
<span>I have three apple</span>
<i>I have two orange</i>
</p>
当采用css1时,结果:
>解析:
1、css1中 span与 冒号间无空格,span被定义为同级兄弟标签。
2、此时选择器会 选取众多span标签中序列位2的span元素。
3、此例中的第二个标签整体元素应用css1.
当采用css2时,结果:
>解析:
1、css2中span与冒号间有空额,span被定义为“父元素”。
2、此时选择器会选取父元素span的子元素中 同类元素且序列位2的元素
3、如:第一行span内无子元素标签,不应用css2。
第二行不是span元素,不应用css2。
第四行即第二个span标签内部有子元素 em,b,选择器会选取第二个em标签 和第二个b标签应用css2。
伪类的格式重点:父标签层级 & 当前标签类型的更多相关文章
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- a标签伪类选择器+过度模块
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...
- 浅析a标签的4个伪类 .
关于伪类,大家最熟悉的还是a标签的4个伪类::link 有链接属性时:visited 链接地址已被访问过:active 被用户激活(在鼠标点击与释放之间发生的事件):hov ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- HTML连载64-a标签伪类选择器的注意点与练习
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...
- HTML连载63-a标签的伪类选择器
一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...
- 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类
重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
随机推荐
- codeforces 690C3 C3. Brain Network (hard)(lca)
题目链接: C3. Brain Network (hard) time limit per test 2 seconds memory limit per test 256 megabytes inp ...
- USACO 回文的路径
传送门 这道题和传纸条在某些方面上非常的相似.不过这道题因为我们要求回文的路径,所以我们可以从中间一条大对角线出发去向两边同时进行DP. 这里就有了些小小的问题.在传纸条中,两个路径一定是同时处在同一 ...
- flask中manage.py的用法
flask中manage.py的用法#!/usr/bin/env pythonimport osfrom app import create_app, dbfrom app.models import ...
- 洛谷P3354 [IOI2005]Riv 河流——“承诺”DP
题目:https://www.luogu.org/problemnew/show/P3354 状态中要记录一个“承诺”,只需相同承诺之间相互转移即可: 然后就是树形DP的套路了. 代码如下: #inc ...
- Spring 3.1新特性之一:使用Spring Profile和Mybatis进行多个数据源(H2和Mysql)的切换
最近在做WebMagic的后台,遇到一个问题:后台用到了数据库,本来理想情况下是用Mysql,但是为了做到开箱即用,也整合了一个嵌入式 数据库H2.这里面就有个问题了,如何用一套代码,提供对Mysql ...
- B - Preparing Olympiad
Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Description You ha ...
- 036--MySQL扩展
一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 10. 使用EF Core
支持的数据库:可以查看官方网站 https://docs.microsoft.com/en-us/ef/core/providers/ 安装了VS2017后会安装了LocalDB,验证localDB ...
- pl/sql developer中如何导出oracle数据库结构? 参考文章一
本文作者来自csdn的xieyuooo地址为 : http://bbs.csdn.net/topics/340209135 进入PL/SQL后,使用如下图所示的操作步骤: 然后会弹出一个窗口,在弹出窗 ...
- Codeforces34C【尺取】
题意: 输入一系列的数,连续数字则输出连续区间 看第一个案例就很明显 思路: 输入字符串输入,预处理一下. 写了个挫尺取- 贴一发挫code--. #include <bits/stdc++.h ...