从头开始复习css之选择器(中)
吃饭也吃完了,开始来写一写选择器接下来的篇章吧。
前面一章说了很多基础方面的知识,怎么说呢?还是比较基础的,现在这篇文章主要来讲一讲伪类和伪元素。
一、 链接伪类
关于链接伪类呢?主要介绍a
元素独有的三种伪元素:
- link:定义a元素未访问时的样式
- visited:定义a元素访问后的样式
- target:突出显示活动的 HTML 锚 首先来介绍关于
link
和visited
的内容,来看下面一段代码:
// html
<div><a href="#">链接一</a><a href="#1">链接二</a><a href="#2">链接三</a><a href="#3">链接四</a><span>链接四</span>
</div>// css
* {padding: 0;margin: 0;
}
a{text-decoration: none; // 去掉
}
a:link {color: red;
}
a:visited {color:green;
}
span:link {color: red
}
span:visited {color:green;
}
复制代码
效果如下:
由上面的现象可以观察到:span
元素并没有link
和visited
的效果。其实link
和visited
是a
元素特有的伪类,当然也包括下面要讲的target
伪类,其他的元素使用起来是不会起作用的。
说到这里我突然想插句嘴,这是之前在开发的时候发现的,请诸位注意一下,来看修改一下css代码:
// css
a:link {color: red;font-size: 18px;
}
a:visited {color:green;font-size: 28px;
}
复制代码
效果如下:
由上面的现象我们可以发现:点击过的链接的文字大小并没有改变,这就是我想说的点了: visited支持的属性仅有:color/background-color/border-color三种
有兴趣的朋友可以自己验证看一下。
最后我们来提一下target
,我就直接用target
来写一个tab例子了,来看下面一段代码:
// html
<div><a href="#id1">链接一</a><a href="#id2">链接二</a>
</div><div id="id1"></div>
<div id="id2"></div>
// css
* {padding: 0;margin: 0;
}
a{text-decoration: none; // 去掉
}
#id1{width: 200px;height: 200px;border: 1px solid black;
}
#id2{width: 200px;height: 200px;border: 1px solid black;
}
:target {background-color: red;
}
复制代码
效果如下:
关于这个伪类的话,说实话我用到的并不多,在复习的时候刚好看到了这个类,简单的做了一下知识的梳理。
二、 动态伪类
关于动态伪类呢,我的定义是:需要用户主动操作才能触发的。其中包含以下两种:
- hover:定义鼠标经过显示的样式
- active:定义鼠标单击激活时的样式 首先来一段代码:
// html
<div><a href="#id1">链接一</a><a href="#id2">链接二</a><span>我是三</span>
</div>
// css
* {padding: 0;margin: 0;
}
a{text-decoration: none; // 去掉
}
a:hover{color: green;
}
a:active {color: yellow
}
span:hover {color: green;
}
span:active {color: yellow
}
复制代码
其效果如下:
从上面的效果我们可以发现与链接不同的是:不仅a会有该伪类效果,span也会有该效果。通过上面的demo我们可以发现hover
和active
是所有的元素通用的,也就是hover
和active
伪类是支持所有元素的,而a
元素却是支持所有的链接伪类和动态伪类的。 值得注意的一点是我在开发中遇到了这么一个问题,我们修改一下css代码:
a:hover{color: green;
}
a:active {color: yellow
}
a:link {color: black;
}
a:visited {color: red;
}
复制代码
效果如下:
由上面的代码我们可以发现:所有动态伪类的效果都失效了。产生问题的原因是:link/visited放在了hover/activede后面,导致动态伪类将前面的链接伪类给覆盖了,所以显示不出动态伪类的效果来。针对这个问题,我在网上找到了一个很好记忆的口诀:爱恨原则
(love-hate)。意思呢是叫我们要把link和visited放在前面,hover和active放在后面,这样就能避免样式被覆盖了。
三、 表单伪类
接下来我们来谈一谈表单伪类,表单伪类听这个名称就知道是作用在表单里面的,我这里呢?主要来介绍4个常用的(据说现在还新增加了几个):
- enable:当表单元素未禁止时被触发
- disable:当表单元素禁止时被触发
- focus: 当表单元素被聚焦时触发
- checked:当表单元素被选择时触发 来看下面一段代码:
// html
<input type="text" disabled>
<input type="text">
// css
input:enabled {background: red;
}
input:disabled {background: blue;
}
input:focus {background:yellow;
}
复制代码
效果如下:
从上面的效果大概可以看出来enable
、disable
、focus
的作用,我这里就不多加赘述了。
最后关于checked
,我就用一个简单的demo来表现他们的作用吧。请看下面一段代码:
//html
<label><input type="radio" name="select"><span></span>
</label><label><input type="radio" name="select"><span></span>
</label>
// csslabel {width: 100px;height: 100px;float: left;border: 1px solid yellow;overflow: hidden;
}
label span {display: flex;width: 100px;height: 100px
}
input {display: none;
}
input:checked + span {background:red;
}
复制代码
效果如下:
四、 结构伪类
接下来我们介绍以下结构伪类,这个东西基本上在实际的开发中使用量会非常大,这里就分为两个模块来进行讲解:
- x-child
- x-of-type
4.1、 x-child属性
在x-child中呢?主要的属性有下列这几项:
- first-child
- last-child
- nth-child
- nth-last-child
- only-child 首先关于
first-child
和last-child
这两个属性,可以来看下面一段代码:
// html
<div><p>1</p><p>2</p><p>3</p>
</div>
//css
div p:first-child{background-color: red;
}
div p:last-child {background-color: green;
}
复制代码
效果如下:
由上面效果我们可以发现:first-child
和last-child
分别是作用于父元素的第一个子元素和最后一个子元素。
接下来我们介绍一下:nth-child
和nth-last-child
,我就在上面的基础上面修改一下css代码:
div p:nth-child(1){background-color: red;
}
div p:nth-last-child(1) {background-color: green;
}
复制代码
效果如下:
由上面代码我可以知道nth-child
和nth-last-child
分别是作用于父元素的第n个元素和作用于父元素的倒数第n个元素。值得我们注意的是,这两个属性的下标都要从1开始而不是从0。
最后来说一说only-child
:关于这个伪类我是这样理解的:它相当于是一个组合选择器,他组合了first-child
和last-child
,来请看下面一段代码.
// html
<div><p>1</p>
</div>// css
div p:only-child{background-color: red;
}
复制代码
效果如下:
从上面的效果我么可以知道当一个父元素有且仅有一个子元素的时候,该伪类会被触发。
当然前面写的都是正常情况下,我们这里来整点异常情况:
- 当父元素不止一个子元素的时候,
only-child
伪类有没有作用呢?来看下面一段代码:
//css
div p:only-child{background-color: red;
}
//html
<div><p>1</p><p>2</p>
</div>
复制代码
效果如下:
这里我们发现:当父节点有一个以上的子节点的时候,only-child
将会失去效果。
- 当父元素的制定子元素不是预期元素时,会不会有效果呢?来看下面一段代码:
//html
<div><div></div><p>1</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p>
</div>
// css
div p:first-child{background-color: red;
}
复制代码
效果如下:
由上面的效果可以知道:当父元素div
的第一个子元素不是p
的时候,first-child
就会失效。同样last-child
、nth-child
、nth-last-child
等x-child
也是一样,这就不再赘述了。所以为了解决这个问题,x-of-type
横空出世。
4.2、x-of-type属性
前文说了,为了弥补x-child
的缺漏,x-of-type
横空处世,与x-child
相同,x-of-type
也有五个伪类:
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-of-type
首先来看first-of-type
和last-of-type
,先看下面一段代码:
// html
<div><div></div><p>1</p><p>2</p><p>2</p><p>2</p><p>2</p><div></div>
</div>
// css
div p:first-of-type{background-color: red;
}
div p:last-of-type {background-color: green;
}
复制代码
效果如下:
这里我们就发现first-of-type
和last-of-type
会将父元素第指定元素给附加效果,这一定程度上弥补了x-child
的弊端
然后再来简单的看一下nth-of-type
和nth-last-of-type
,修改一下前面的css:
div p:nth-of-type(1){background-color: red;
}
div p:nth-last-of-type(1){background-color: red;
}
复制代码
效果如下:
同样nth-of-type
和nth-last-of-type
也产生了效果,给父元素的指定n个子元素的附加属性。
最后来看点:only-of-type
:
//html
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><p></p>
</ul>
// css
ul>p:only-of-type{background: green;width:100px;height: 40px;
}
复制代码
效果如下:
这里我们 当父元素的指定元素有且仅有一个的时候 就能生效。
####4.3、 我在开发的时候遇到的一个坑 前面说到了一个问题:如果x-of-type
这么好用是不是我们就能无脑的用这个 而放弃x-child
呢?关于这个问题,我就分享一个我在开发的时候遇到的一个坑吧来看下面一段代码:
//html
<div><div class="item">div</div><p class="item">p</p><h1 class="item">h1</span><h2 class="item">h2</p><h3 class="item">h3</p><h4 class="item">h4</p>
</div>
// css
div .item:first-of-type{background-color: red;border: 1px solid black;
}
复制代码
效果如下:
这里我们发现,所有的元素都被该伪类所影响了。这就是我所说的坑,值得注意的是:x-of-type是以元素为单位的。 这里使用x-child
却能起作用。从这个坑能充分验证我前面的观点:x-child
和x-of-type
在使用的时候要分场景来选择的。
五、 伪元素
接下来关于伪元素,这一块的内容不多,没什么比较想聊的,简单的概述一下吧:
- before
- after
- frist-letter
- frist-line
- selection
首先关于before
和after
我之前写过一篇文章封装了几个图标 有兴趣的可以去瞧瞧:如何灵活的运用before和after
然后first-letter
和first-line
,请看下面一段代码:
//html
<p>i am klivitam <br/>i love my country</p>
// css
p::first-letter{color: red;font-size: 48px;
}
p::first-line{font-weight: bold;
}
p::selection{background: green;color: white;
}
复制代码
效果如下:
这个意思的内容比较简单,从字面上就能看出来,我也不多加赘述了。
六、最后检查一下
最后我再仔细的翻阅了一下文档,我发现了还有:
- not
- empty
- root
- lang 这四个还没有讲到 首先关于
empty
和not
,来看下面一段代码:
// html
<p>i am klivitam <br/>i love my country</p>
<p></p>
// css
p {width: 200px;height: 60px;border: 1px solid;
}
p:not(:empty){background: red;color:white;
}
复制代码
效果如下:
由上面的现象我们可以出来:empty
伪类是当父元素没有子元素的时候触发的,而not
则是不满足括号内的条件会触发的。
最后来看看遗漏的root
和lang
, root
是匹配元素e所在的文档的根元素,在HTML文档中,根元素是html;而lang
是允许您为不同的语言定义特殊的规则。这两个属性我用的太少了,只晓得其意思,实在举不出例子来,并且感觉用网上的例子给大家演示这种操作很蠢,就不做这种蠢事儿了。。
#说在最后
好了,好了。本来想今天就把这三篇文章都写出来的。但是现在都已经12点了 第二篇文章都才刚出来。不多说了,我先睡波觉,明早起来继续写。明天还有一个选择器的优先级,敬请期待哦!
转载于:https://juejin.im/post/5cdd490551882568f14b7cda
从头开始复习css之选择器(中)相关推荐
- 从头开始复习css之2D变换
最近一直在系统的复习前端基础知识, 不复习的时候不知道 一旦系统的复习才知道 原来自己对很多知识还是处于一知半解的地步,好吧 话不多说 开始写吧: 一. 过渡 1.1. 过渡是什么? 首先关于过渡,过 ...
- CSS类名称/选择器中哪些字符有效?
CSS类选择器中允许使用哪些字符/符号? 我知道以下字符无效 ,但是哪些字符有效 ? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < ...
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- css常用选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
- html 文档自动获取css,前端基础中css选择器,html文档 ,与javascrip中基本的获取
1,Vscode自动刷新插件与格式化插件 应用搜索搜索liveserver,安装后.点击右下角Golive可以进入使用. 格式化插件prettier:首选项,设置,搜索format,勾选prettie ...
- html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
- css类选择器或逻辑,深入理解CSS中选择器的逻辑处理
在过去的很长一段时间中,我们都说 CSS 是不带有任何逻辑的,意思是在 CSS 中没有控制流,也没有某种类似于其他编程语言的方式来组织 CSS.CSS 天生缺乏逻辑性的问题导致了预处理器的出现.然而业 ...
- 浅谈CSS选择器中的空格
HTML文档是一棵树的结构,各元素以一种层次结构为基础构成'树'的视图.文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了'父子关系'.基于这样的关系模型 ...
- HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器 交集选择器由两个选择器直接构成,其中第一个 ...
- html中 号选择器,CSS兄弟选择器符号‘+’号与‘~’号的区别
今天有人问我,在CSS的兄弟选择器中'+'号和'~'号码的区别是什么,而我自己对这个问题也不是很清除,当然,如果想弄清楚一个问题,用实践的方式比较好,今天就通过举几个例子来说明一个,CSS选择器中的加 ...
最新文章
- 《JavaScript高级程序设计》读书笔记 ---基本概念小结
- eclipse代码补全
- 200822C阶段一文件
- 帆软获取上月的第一天与最后一天_《原神》岩港打工第一天怎么玩 岩港打工第一天玩法攻略...
- Strategic game(树的最小点覆盖)
- Python学习笔记——基础篇【第五周】——模块
- 数据库名、实例名和ORACLE_SID的区别
- 鸿星尔克与钉钉签署专属音视频合作 全国5千家门店均可接入
- vs发布项目webconfig替换语法
- 分享一些C语言的学习资料
- Android版疯狂填字第三关,iOS/安卓版《疯狂填字3》答案攻略第140关
- linux 用户shell 无效,浅谈Linux环境下,为什么设置用户ID位对shell脚本无效
- 【2019/07/20测试 T2】切题
- Delphi官方下载地址
- [经验分享] 覃超直播课-入职新公司后,如何快速斩头露角
- 力天创见客流热区图分析
- 验证一个十六进制的颜色是否合法 合法的字符: #000 #fff #FFF #000000 #ffffff #FFFFFF
- Glide加载图片完成的回调
- 【腾讯TMQ】漫步VR——Unity语音聊天室开发小结
- Flash AS3.0实战