为什麽会有个「伪」字呢？

伪（Pseudo）这个意思有虚幻虚无的意思，类选择器是用来处理 DOM 操作不了选择器，伪元素则是原本并没有在 HTML DOM 中，是透过 CSS 创造出来的元素。

什麽是伪类选择器（Pseudo classes）？

前面篇章有提到 CSS 选择器，通常都能单独使用，而伪类选择器比较特别，他必须搭配其他选择器来使用，我们常使用的操作型伪类在触发条件前，一切都是假的！平时并不会有效果，最常见的范例就是<a>标签。

伪类选择器

这边将举出最常见的伪类选择器与使用方法，还有许多伪类选择器可以查看 MDN 官方文件
使用方法需在前面加:前缀，以<a>标签作为范例：a:hover { css... }

操作型伪类

• :hover，当游标悬浮在元素上时，产生效果，最常见的使用方式。

  游标悬浮在我上面，我颜色会变

• :active，当游标对着元素压住时，产生效果，通常使用在按钮类型的元件。

• :focus，当元素是焦点状态时，产生效果，通常都是使用在<input>输入框。

结构型伪类

• :nth-child()，会根据()条件，影响同级元素样式的伪类，通常使用在清单、表格这类有规律性的结构做变化。以下范例绿色为有修改样式，红色为未修改样式
  • (3)，代表同级元素第三个做样式。
    
  • (odd)，代表同级元素中的基数列做样式。
    
  • (even)代表同级元素中的偶数列做样式。
    
  • (3n + 1)，代表每 3 个为一组，每组第 1 个做样式，n 的起始值为 0 。
    

什麽是伪元素（Pseudo element）？

伪元素就更妙了，原本 HTML 结构上没有，但利用伪元素凭空造出一个虚幻的元素，在开发者模式下，只看到::before与::after，到底有还没有，伪元素的好处就是让 HTML 结构更加简单清楚，还感觉自己更厉害了。

伪元素

这边就举最常用的两个伪元素，通常伪元素的使用实际是想让 HTML 结构更简单，避免太多无意义的标签。
使用方法为需在前面加::前缀，以<div>标签作为范例：div::after { content: ''; css... }，其中伪元素要添加 content: ''; ，否则没效果。

• ::after，在元素後面安插新的元素，前一篇有介绍脱离文档流的父容器摊缩问题，需使用伪元素（当然还有别的方法，但这个方法比较乾净），因为在元素後面添加新的元素，刚好支撑了父容器的高度以解决摊缩问题，除了解决摊缩问题，还能制作与一般标签一样的事情，如下面按钮浅蓝色的部分。

• ::before，在元素前面安插新的元素，与上一个很相似，只是从元素後面变成元素前面，如下面按钮蓝紫色的部分。

• 伪元素中的 content 是必须要添加的，它代表了伪元素的内容物，通常情况下都是写一般 string 空字串，当然也有很多值可以写，但这就需要研究了。

我个人就很喜欢利用伪元素来自制 icon，并透过 CSS 动画优化。如手机上常出现的汉堡按钮。

汉堡按钮 Codepen

属性选择器

选择器大致上都介绍得差不多了！

这里刚好补充一下属性选择器，属性选择器也有点类似於伪类选择器，同样都是要搭配其他选择器才能使用，不过他是属於把选择器条件范围缩小，平时就有效果了，并不像伪类选择器平时没效果。

因为我平时很少使用，但想说都介绍选择器了，也觉得属性选择器可能有时候有奇效，所以简单介绍。
使用方法是属性用[key = value]来缩小范围。

• input[type="checkbox"]，锁定复选框套入样式。
  
  只针对复选框修改宽度高度
• a[url^="https://ithelp.ithome.com.tw/"]，选定超连结网址开头是https://ithelp.ithome.com.tw/套入样式
  
  • 条件等於前面加^，表示开头要包含的条件，如url^=https://，网址符合 HTTPS 协定的套入样式
  • 条件等於前面加$，表示结尾要包含的条件，如src$="png"，PNG 图档的套入样式
  • 条件等於前面加*，表示字串中只要有符合的条件，如url*=google，网址中有 google 的套入样式

总结

从一开始到现在，我们已经把最基础的切版技能都了解了，明天将进入切版重头戏 RWD 响应式网页设计章节！