CSS(21) -- 伪元素vs伪类

哈哈哈哈多好听
116 阅读3分钟

一. 伪元素选择器

在内容元素的前后插入额外的元素或者样式，但是这些元素并不会在文档中生成，很适合一些没有必要专门用标配元素元素渲染的效果，如：遮罩层！！！ 、Icon图标....

伪元素描述
::after作为选中元素的第一个子元素。
::before作为选中元素的最后一个子元素。
::first-letter选中块元素第一行的第一个字母，应用样式。
::first-line选中块元素的第一行，应用样式。
::selection应用于文档中被用户选中的部分，如使用鼠标选中文本。
::file-selector-button代表input(file)标签按钮，用来改变该按钮样式。
::marker应用于list-item元素上的标记点的样式。
::slotted用于选定那些被放在HTML模板中的元素。
::part应用于Web components中shadow-dom的任何匹配part属性的元素。

栗子1：

<div class="province">
  <span>中国中部的省份</span>
  <ul>
    <li>湖北</li>
    <li>湖南</li>
  </ul>
  <input type="file" />
</div>

.province::first-letter {
  color: #f00;
  font-size: 20px;
}
.province::before {
  content: '选择'
}
::selection {
  background-color: #ff0;
}
li::marker {
  color: #f00;
}
input::file-selector-button {
  border: 1px solid #f00;
  font-size: 20px;
  border-radius: 5px;
}

2098.png

栗子2：遮罩层

<div class="box">
    hhh
</div>

.box{
       position: relative;
       width: 300px;
       height: 300px;
}
.box::after{
       content: "";
       position: absolute;
       top:0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0,0,255,.5);
}

注意：

  • 伪元素 可以被理解为，原元素的子元素，所以可以采用子绝父相的定位方式来使遮罩层到达正确的位置！！！

  • 伪元素默认为行内样式，但如上给它设置了width:100% ; height:100% 却生效了。！！

因为： 行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素！！

二. 伪类选择器

伪类选择器是把已经存在的元素选出来，给它加上特殊的样式，不会凭空创建出新元素！！！常用于：鼠标经过 、选特殊（第几个）孩子

<1> 常见伪类选择器
(1) 动态伪类选择器
  • :link。元素被定义了超链接但并未被访问过
  • :visited。元素被定义了超链接并已被访问过
  • :active。元素被激活
  • :hover。鼠标悬停 *
  • :focus。元素获取焦点 *
(2) 针对 form 表单的
  • :checked。选中的复选按钮或者单选按钮表单元素
  • :enabled。所有启用的表单元素
  • :disabled。所有禁用的表单元素
(3) 关于 DOM 结构的
  • :fisrt-child。父元素的第一个子元素
  • :last-child。父元素的最后一个子元素的元素
  • :root。元素所在文档的根元素。在 HTML 文档中，根元素始终是 html，此时该选择器与 html 类型选择器匹配的内容相同
  • :nth-child(n)。父元素的第 n 个子元素。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。
  • :nth-last-child(n)：父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。
  • :nth-of-type(n) 。父元素内具有指定类型的第 n 个元素
  • :nth-last-of-type(n)。父元素内具有指定类型的倒数第 n 个元素
  • :first-of-type。父元素内具有指定类型的第一个元素，与 nth-of-type(1) 等同
  • :last-of-tye 。父元素内具有指定类型的最后一个元素，与 :nth-last-of-type(1) 等同
  • :only-child 。父元素只包含一个子元素，且该子元素匹配元素
  • :only-of-type。选择父元素只包含一个同类型子元素，且该子元素匹配选择元素
  • :empty。选择没有子元素的元素，而且该元素也不包含任何文本节点

栗子1：

div:hover{
   background : red;
}

栗子2：

.box span:nth-child(2){
   background : red;
}
avatar
文章
阅读
粉丝