CSS之伪类选择器 – ttdr的菜鸟空间

概念

我们先来了解一下伪类的概念

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>伪类选择器</title>
 </head>
 
 <body>
         <a href="http://www.baidu.com">去百度</a>
         <a href="http://www.jd.com">去京东</a>
 </body>
 
 </html>

我们发现

被点击过的网页颜色变成了紫色，没被点击过的颜色是蓝色，我们想要让没被点击过的颜色变成红色，我们该怎么办捏，thinking，我们先用类选择器试试

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>伪类选择器</title>
     <style>
         .no {
             color: red;
         }
     </style>
 </head>
 <body>
     <a  class="no" href="http://www.baidu.com">去百度</a>
     <a href="http://www.jd.com">去京东 </a>
 </body>
 </html>

好像实现了，我们点击一下看看，为啥还是红色。

thinking，好像我们选择的重点不是是否选择到这一句，而是在于我们选择了什么状态的a。

那我们该怎么写捏，这里就要用伪类选择器了。

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>伪类选择器</title>
     <style>
         /* 选中没有访问过的a元素 */
         a:link {
             color: red;
         }
     </style>
 </head>
 <body>
     <a href="http://www.baidu.com">去百度</a>
     <a href="http://www.jd.com">去京东 </a>
 </body>
 </html>

注意这里用的是冒号哦，link表示没被访问过的

京东被访问过了，颜色变紫了。目标达成捏。

那么我让没被访问过的变色了，我能不能让被访问过的变色捏。当然也可以，我们直接上代码

 /* 选中访问过的a元素 */
 a:visited{
     color: grey
 }

目标达成。

这里访问和没访问过，好像是两种类别，但是不是class类。

所以什么是伪类捏，伪类就是很像类，但不是类，是元素特殊状态的一种描述。

伪类的类型

动态伪类

上面举得栗子就是一种动态伪类，我们继续来探索动态伪类吧。

我们从功能出发，我要实现，鼠标放在文字上面，但不点击，颜色就变为天蓝色。

我们直接来看代码吧

 /* 选中的是鼠标悬浮状态的a元素 */
 a:hover{
     color: skyblue;
 }

成功实现,但是我们能不能让颜色变化在丰富一点呢，我们设置一个点击但是不松开（激活状态）的颜色变化可以实现吗，可以的可以的兄弟，我们可以用动态伪类选择器来实现

 /* 选中的是鼠标激活状态的a元素 */
 a:active{
     color: green;
 }

点击长按是绿色达成捏，下面我们来看一下完整的css代码

     <style>
         /* 选中没有访问过的a元素 */
         a:link {
             color: red;
         }
         /* 选中访问过的a元素 */
         a:visited{
             color: grey
         }
         /* 选中的是鼠标悬浮状态的a元素 */
         a:hover{
             color: skyblue;
         }
         /* 选中的是鼠标激活状态的a元素 */
         a:active{
             color: green;
         }
     </style>

欸，我们调换一下顺序可以吗，我把active放到最前面来试试。

     <style>
         /* 选中的是鼠标激活状态的a元素 */
         a:active{
             color: green;
         }
         /* 选中没有访问过的a元素 */
         a:link {
             color: red;
         }
         /* 选中访问过的a元素 */
         a:visited{
             color: grey
         }
         /* 选中的是鼠标悬浮状态的a元素 */
         a:hover{
             color: skyblue;
         }
     </style>

为啥激活的时候变绿的特效不见了捏，难道是浏览器出bug了？

我们来分析一下激活状态的代码逻辑，当我们长按的时候，同时处于link,hover,active三个的叠加状态，根据css代码运行的后来者居上二点原则，我们应该显示的是代码里最靠后的样式，即hover样式，所以导致了我们的绿色样式的丢失（被覆盖）。

所以为了别出问题，这四个动态伪类的顺序干脆别变了，这就是最合理的一个动态伪类的顺序，我们取首字母来记忆吧，就是lvha,可以记成，我送了npy一个lv包npy哈哈大笑。

注：link和visited是超链接<a>特有的两种状态。而hover和active是所有元素都具有的状态，这里就不做展示了

我们来拓展一个动态伪类叫获取焦点

 <body>
     <a href="http://www.baidu.com">去百度</a>
     <a href="http://www.jd.com">去京东 </a>
     <br>
     <input type="text">
     <input type="text">
     <input type="text">
 </body>

我们有三个输入框，我希望我在哪个输入框输入哪个输入框变成绿色，这里就要用到获取焦点的动态伪类

 input:focus{
     color:orange;
     background-color: green;
 }

这样我在第一个输入第一个就变绿了。

注：focus只有表单类元素或者是能往里面输入东西的元素才有这个状态。

我们再来看个栗子

 select:focus{
 
     color:orange;
 
     background-color: green;
 
 }

     <select>
         <option value="first">选项1</option>
         <option value="second">选项2</option>
     </select>

当然选择的元素也可以加focus哦，既然两个的特效一样，我们能不能用一个复合选择器来表示捏，当然我们可以用前面的并集选择器

         input:focus,select:focus{
             color:orange;
             background-color: green;
         }

目标达成。

结构伪类

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
 
     </style>
 </head>
 <body>
     <div>
         <!-- 结构1 -->
         <p>张三：绩点4.8</p>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
     </div>
 </body>
 </html>

我们从需求出发，我想让成绩最好的变成金黄色，当然我们可以用前面的知识来解决，比如说增加一个类或者增加一个id，但是后续如果成绩变化，赵六变成了第一名，这样我又要改，真是麻烦，有没有一个选择器，能什么都不加就选中众多p里面的第一个捏？

这里就要用到结构伪类选择器了，

     <style>
         /* 选中的是div第一个儿子p元素 -- 结构1*/
         div p:first-child {
             color: yellow;
         }
     </style>

我们再稍微修改一下代码

 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
         div p:first-child {
             color: yellow;
         }
     </style>
 </head>
 <body>
     <div>
         <span>张三：绩点4.8</span>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
     </div>

这个时候是谁亮捏

？？？？？？？神马谁都不亮？？？？？？？？？

不应该是李四亮吗，原来啊，这里是这样定位的捏，div定位第一个子类元素，但是第一个元素是span元素而不是p元素，李四是p元素但是不是第一个，所以没有一个变黄的。（吐槽一句，真有点反人类了）

但是如果我就想让第一个<p>元素子类变黄我该怎么办捏，我们不着first-child,我们去找first-of-type不就得了我们上代码,注意这里找的是所有同类型的第一个后代元素。

 div p:first-of-type {
     color: yellow;
 }

我们再来改一下代码

 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
         div p:first-child {
             color: yellow;
         }
     </style>
 </head> 
 <body>
     <div>
         <marqunee>
             <p>张三：绩点4.8</p>
         </marqunee>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
     </div>
 </body>

ps：这里先不管<marqunee>是什么意思，这里只是为了临时给张三换个父亲（bushi

我们来猜猜谁变黄了捏

有没有感觉到意料之外，这里p是div的后代没问题（注意空格分开是后代选择器哦，要是忘了回去看上一篇博文），这里的first-chilr表示的是只要是第一个子代就行了，并没有指定他的父亲是谁，所以张三再临时换了一个父亲的情况下还是变红了。

所以这里css样式选择的是div的后代的p元素，其父亲是谁无所谓，只要是父亲的第一个儿子就行。

我们再来魔改一下代码

 <body>
     <p>测试1</p>
     <div>
         <p>测试2</p>
         <marqunee>
             <P>测试3</P>
             <p>张三：绩点4.8</p>
         </marqunee>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
     </div>
 </body>

在猜猜哪一个变黄捏。

如果你猜对了，那么说明上面这一些你已经掌握了捏，如果猜错了，那就回过头再来一遍吧。

改完了<body>,我们再来改一下css样式

     <style>
         p:first-child {
             color: yellow;
         }
     </style>

我们去掉div 我们来看看什么效果

都变黄了，这里注意测试一是body的第一个儿子哦。魔改到这里就告一段落了，我们下面来看另一个例子，咱们回到最初的代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
 
     </style>
 </head>
 
 <body>
     <div>
         <p>张三：绩点4.8</p>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
         <p>钱七：绩点4.0</p>
         <p>孙八：绩点3.9</p>
     </div>
 </body>
 
 </html>

我们要把最后一名的成绩变红，我们该怎么办捏，当然通过英语知识，我们可以很合理的外推得到伪类选择器

 <style>
     div p:last-child {
         color: red;
     }
 </style>

一些样例同上了，这里就不做展示了。

但是，我这里如果要把王五变红该怎么办捏，我们再利用一下英语知识，王五是第三个，第三个的英语是什么，是third那么我们把last改成third，这样可以吗，当然不可以！！！怎么能这么随意捏，实际上的格式是

 <style>
     div>p:nth-child(3){
         color: red;
     }
 </style>

括号里面要写的就是第几个元素，如果我要把偶数个变红捏，为了展示方便，这里顺便修改一下代码

 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
         div>p:nth-child(2n) {
             color: red;
         }
     </style>
 </head>
 
 <body>
     <div>
         <p>第1个</p>
         <p>第2个</p>
         <p>第3个</p>
         <p>第4个</p>
         <p>第5个</p>
         <p>第6个</p>
         <p>第7个</p>
         <p>第8个</p>
         <p>第9个</p>
         <p>第10个</p>
     </div>
 </body>

2n表示的就是序号为偶数的元素，我们看看效果

当然，这里我们又可以用一下我们的英语知识，把2n换成even（啥意思可以去百度一下哦），也是可以实现的，如果选中奇数捏，我们就可以用2n+1或者用odd来替代。

这里我们在换一个需求，我们要把前五个变红，该怎么办捏，可以可以用公式表示捏，这里不绕弯子了，公式就是-n+5,这里n依次从0开始取，实现前五个变红

效果达成，啧-n+5看着好别扭，我改成5-n可以实现吗，原来规定必须是an+b的形式，（吐槽一句太不灵活了emmmm）

同样我们可以拓展到nth-of-type(),这里也就不做展示喽，这些区域留给旅行者们自己来探索吧，提醒一个点哦，这个排序的时候，眼里只有这一个元素哦，不要有外人哦。

上面这些是最常用的结构伪类，一定要练熟哦

我们来看一些比较不常用的结构伪类

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
 
     </style>
 </head>
 
 <body>
     <div>
         <span>测试1</span>
         <p>张三：绩点4.8</p>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
         <p>钱七：绩点4.0</p>
         <p>孙八：绩点3.9</p>
         <span>测试2</span>
     </div>
 </body>
 
 </html>

我们来看需求：钱七变红，这里你能实现吗，能实现说明上面的你还掌握的不错哦。

但是我们从前面一个一个数好像太麻烦了，从后面数好像更简单，那么我们能不能实现从后面排序捏，答案当然是可以的

     <style>
         div>p:nth-last-child(3)
         {
             color: red;
         }
     </style>

加个last问题轻松解决

目标达成捏，既然有个倒数子类，当然也有倒数type，我们上代码

     <style>
         div>p:nth-last-of-type(2)
         {
             color: red;
         }
     </style>

这里告一段落了，我们继续来探索

 <body>
     <div>
         <span>测试1</span>
         <span>测试1</span>
     </div>
     <div>
         <span>测试2</span>
         <p>张三：绩点4.8</p>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
         <p>钱七：绩点4.0</p>
         <p>孙八：绩点3.9</p>
     </div>
 </body>

小改一下代码，我们这次不从需求出发了我们从代码出发，那么下面css样式表示的是什么意思捏

     <style>
         span:only-child {
             color: red;
         }
     </style>

问谁会变红捏

没错答案就是，都不变红，only表示唯一，只有span是父类的独生子女的时候才会变红，注意这里不需要考虑兄弟的类型，只要是兄弟，他就不是独生子女，他就不能被选中。

既然有了child，当然也有type了,我们再来猜猜下面代码的效果

     <style>
         span:only-of-type{
             color: red;
         }
     </style>

只有测试2变红了，这里看的知识同类型的没有兄弟姐妹，是这个类型的独苗就可以被选中。

下面再说两个特殊的

我们直接看代码

         :root {
             background-color: gray;
         }

root有根的意思，就是选中了html的根元素，也就是html标签

看结果所有背景都是灰色的。

我们再看另一种特殊的

 <head>
     <meta charset="UTF-8">
     <title>结构伪类</title>
     <style>
         div:empty {
             background-color: red;
         }
     </style>
 </head>
 
 <body>
     <div></div>
 </body>

empty就是空的意思，这里简单来说，选中的不仅是div而且选中的是空的

欸为啥是空白的，div里面没有东西，也就没有这块空间，当然都是白的了。我们为了有点效果，我们改一下代码

     <style>
         div:empty {
             width: 100px;
             height: 100px;
             background-color: red;
         }
     </style>

有个小方块了，说明我们确实选中的是这一部分，

否定伪类

依旧是几个老朋友

 <head>
     <meta charset="UTF-8">
     <title>否定伪类</title>
     <style>
 
     </style>
 </head>
 
 <body>
     <div>
         <p>张三：绩点4.8</p>
         <p>李四：绩点4.5</p>
         <p>王五：绩点4.3</p>
         <p>赵六：绩点4.1</p>
         <p>钱七：绩点4.0</p>
         <p class="three">孙八：绩点3.9</p>
     </div>
 </body>

由于孙八绩点不到4，我们给他一个特殊类吧。现在我要把绩点大于等于4的人都变成红色，我该怎么办捏

     <style>
         div>p:not(.three) {
             color: red;
         }
     </style>

not然后括号里面表示一个类选择器，这样就排除了孙八，我们来看看结果

当然括号里面我们可以加其他选择器，这里就举一个例子来看看各位的功底吧。

     <style>
         div>p:not([title^='加油']) {
             color: red;
         }
     </style>

你看得懂括号里面的吗，能看得懂，说明功底可以哦哥们。

我们把第一名的张三变红，我们该怎么办捏，我们可以否定选择器套结构伪类选择器捏，

     <style>
         div>p:not(:first-child) {
             color: red;
         }
     </style>

UI伪类

我们从一个复选框开始

 <body>
     <input type="checkbox">
 </body>

我希望复选框被选的时候宽和高变得大一点，醒目一点，这里我要实现被选这一特点，当然不能用元素选择器直接进行改变，，这里我们会联想到获取焦点的动态伪类，我们来试试

     <style>
         input:focus{
             width: 200px;
             height: 200px;
         }
     </style>

我来试试效果

第一次选择之后，确实变大了，但是我取消之后，？？？？？怎么回不去了，看来这种方法是不行的，这里我们就要用新选择器了

     <style>
         input:checked{
             width: 200px;
             height: 200px;
         }
     </style>

这样就可以实现点击放大取消缩小喽，当然不仅仅复选框可以单选框也是可以的哦

注意：对于复选框和单选框不是所有的样式我们都能调，会受到一些限制，像颜色和背景色，不管我们怎么设置都是不能改变的。

 <body>
     <input type="checkbox">
     <input type="text">
     <input type="text" disabled>
 </body>

我们再来看这样一个栗子，我把第二个输入框禁用了，但是我想禁用之后让他变成红色，我该怎么实现捏，这里就要用新的UI伪类选择器了。

 
     <style>
         /* 选中的是被禁用的input元素 */
         input:disabled {
             background-color: red;
         }
     </style>

目标伪类

 <head>
     <meta charset="UTF-8">
     <title>目标伪类</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
     </style>
 </head>
 
 <body>
     <a href="#one">去看第一个</a>
     <a href="#two">去看第二个</a>
     <a href="#three">去看第三个</a>
     <a href="#four">去看第四个</a>
     <a href="#five">去看第五个</a>
     <a href="#six">去看第六个</a>
     
     <div id="one">第1个</div>
     <br>
     <div id="two">第2个</div>
     <br>
     <div id="three">第3个</div>
     <br>
     <div id="four">第4个</div>
     <br>
     <div id="five">第5个</div>
     <br>
     <div id="six">第6个</div>
 </body>

还是先看需求，我想实现我跳转到谁谁变绿。

     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
         div:target{
             background-color: green;
         }
     </style>

忽然发现好像很多选择器都和单词本身意思相关欸。

target选择器点谁谁绿，嘻嘻

语言伪类

 <!DOCTYPE html>
 <html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <title>语言伪类</title>
 </head>
 
 <body>
     <div>通通道人</div>
     <div lang="en">ttdr</div>
     <p>JAVA</p>
     <span>前端</span>
 </body>
 
 </html>

需求：我要把语言为英文的文字变为红色，我们猜猜这次的选择器叫什么吧

     <style>
         div:lang(en) {
             color: red;
         }
     </style>

没错就是lang,好像很好记捏，

效果达成捏，我们把ttdr改成中文其他不变，

？？？？为啥分明是中文还变红了捏。注意这里只要属性是英文，那么就会变红，并没有我们想象的那么智能。

如果我要把所有的简体中文都变成红色捏我该怎么写

 <head>
     <meta charset="UTF-8">
     <title>语言伪类</title>
     <style>
         div:lang(en){
             color: blue;
         }
         :lang(zh-CN) {
             color: red;
         }
     </style>
 </head>
 
 <body>
     <div>通通道人</div>
     <div lang="en">通通道人</div>
     <p>JAVA</p>
     <span>前端</span>
 </body>

目标达成，

概念