第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一、属性选择器
其特点是通过属性来选择元素,具体有以下5种形式:
1、E[attr] 表示存在attr属性即可;
div[class]
2、E[attr=val] 表示属性值完全等于val;
div[class=mydemo]
3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;
div[class*=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;
div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;
div[class$=demos]
二、伪类选择器
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点理解通过E来确定元素的父元素。
- E:first-child 第一个子元素
- E:last-child 最后一个子元素
- E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素;
div>ul>li:nth-child(3){ //选中第三个li
color: deeppink;
}
E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算;
div>ul>li:last-child(2){ //选中倒数第二个li
color: deeppink;
}
2、 n遵循线性变化,其取值0、1、2、3、4、... 但是当n<=0时,选取无效。
(1) 选中所有的奇数的li
li:nth-child(2n-1){
color: red;
}
(2)选中所有的7 的倍数的li
li:nth-child(7n){
color: red;
}
(3) 选中前面五个
li:nth-child(-n+5){
color: red;
}
(4) 选中后面五个
li:nth-last-child(-n+5){
color: red;
}
(5)所有的偶数
li:nth-child(even){
color:red
}
(6) 所有的奇数
li:nth-child(odd){
color:blue;
}
注意:
n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等;
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
没有任何的子元素,包括空格.
3、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
}
三、nth选择器
- :first-child 选择某个元素的第一个子元素;
- :last-child 选择某个元素的最后一个子元素;
- :nth-child() 选择某个元素的一个或多个特定的子元素;
- :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
- :nth-of-type() 选择指定的元素;
- :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
- :first-of-type 选择一个上级元素下的第一个同类子元素;
- :last-of-type 选择一个上级元素的最后一个同类子元素;
- :only-child 选择的元素是它的父元素的唯一一个了元素;
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty 选择的元素里面没有任何内容。
四、伪元素选择器
重点:E::before、E::after
是一个行内元素,需要转换成块元素
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
E::first-letter 文本的第一个字母或字(如中文、日文、韩文等);
案例:首字下沉
E::first-line 文本第一行; 文本第一行高亮..
E::selection 可改变选中文本的样式;
":" 与 "::" 区别在于区分伪类和伪元素
关于before和after
CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念
CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者 E:after伪类;
第91天:CSS3 属性选择器、伪类选择器和伪元素选择器的更多相关文章
- css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用
伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- 转贴:CSS伪类与CSS伪元素的区别及由来具体说明
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit
伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...
- css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类
后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...
- css---3链接伪类与动态伪类
链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚 链接伪类不可以加在div上 <!DOCTYPE html> <html> <head> <m ...
- CSS中的伪类和为伪元素
伪类: 伪元素:
- css3选择器的比较(三) -- 元素选择器 (+, ~)
元素选择器中w3cschool中有些翻译不太准确 比如 +:其实是与element1元素同级,位于element1元素之后的第一个element2元素 ~:其实是与element1元素同级,位于ele ...
随机推荐
- 20155206 2016-2017-2 《Java程序设计》第十周学习总结
20155206 2016-2017-2 <Java程序设计>第十周学习总结. 教材学习内容总结 教材学习内容总结 Java的网络编程 •网络编程是指编写运行在多个设备(计算机)的程序,这 ...
- MyDC总结
需要补全的代码如下 public int evaluate(String expr) { int op1, op2, result = 0; String token; StringTokenizer ...
- 20155235 2017-2018-1 《Java程序设计》第2周学习总结
20155235 2017-2018-1 <Java程序设计>第2周学习总结 教材学习内容总结 3.1类型.变量与运算符 类型 基本类型 类类型 变量 基本规则 不可以用数字作为开头,不可 ...
- Qt开发者关于QThread的咆哮——你们都用错了
Qt开发者关于QThread的咆哮——你们都用错了 我们(Qt用户)正广泛地使用IRC来进行交流.我在Freenode网站挂出了#qt标签,用于帮助大家解答问题.我经常看到的一个问题(这让我不厌其烦) ...
- 搞懂.NET Framework 历史版本(2017年)
最近被.NET平台各种名词.以及各种版本弄得有些疑惑,开发和部署,对于开发平台版本选择是个基本问题,因此,花了些时间,学习汇总了有关.NET版本演进的历史. .NET简介 这个平台相信我们都知道,不过 ...
- 「Leetcode」14. Longest Common Prefix(Java)
分析 与其说是算法题,不如说是语言特性题. 这题要是对Java的String相关函数掌握的比较熟练,写起来的速度(各种意义上)就会很快. 大致的思路都是一致的,差不到哪里去,无非是枚举长度.值得一提的 ...
- Selenium2+python自动化-环境搭建
一.selenium简介 Selenium 是用于测试 Web 应用程序用户界面 (UI) 的常用框架.它是一款用于运行端到端功能测试的超强工具.您可以使用多个编程语言编写测试,并且 Selenium ...
- 自动化运维工具saltstack03 -- 之SaltStack的数据系统
SaltStack数据系统 saltstack有两种数据系统:grains与pillar 1.SaltStack数据系统之grains grains可以收集minion端的静态数据(即机器启动时收集一 ...
- WebGL树形结构的模型渲染流程
今天和大家分享的是webgl渲染树形结构的流程.用过threejs,babylonjs的同学都知道,一个大模型都是由n个子模型拼装而成的,那么如何依次渲染子模型,以及渲染每个子模型在原生webgl中的 ...
- rz和sz上传下载文件
安装软件包 yum install lrzsz 上传文件,输入rz选择文件上传(可以按住shift键多选) # rz sz 下载文件到本地,选择保存文件夹 # sz dd xshell设 ...