【CSS】选择器

CSS选择器|菜鸟教程

image.png

伪类&伪元素

• 在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以 : 开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；
• 在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

伪类

• ① 利用伪类选择元素是基于：当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。
• ② 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
• ③ 由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素

• ① 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
• ② 实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面...这种普通的选择器无法完成的工作。
• ③ 它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

---

伪类伪元素一览

另外若有新增的，后续再补充......

image.png

伪元素

image.png

伪类的语法：

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

---

first-child与first-of-type的区别

image.png

p:first-child  匹配到的是p元素,
因为p元素是div的第一个子元素；

h1:first-child  匹配不到任何元素，
因为在这里h1是div的第二个子元素，而不是第一个；

span:first-child  匹配不到任何元素，
因为在这里两个span元素都不是div的第一个子元素；


p:first-of-type  匹配到的是p元素,
因为p是div的所有类型为p的子元素中的第一个；

h1:first-of-type  匹配到的是h1元素，
因为h1是div的所有类型为h1的子元素中的第一个；

span:first-of-type  匹配到的是第三个子元素span。
这里div有两个为span的子元素，匹配到的是它们中的第一个。

---

巧用 before & after 伪类

参考：
CSS 巧用 before after 伪类
::before ::after CSS3中的伪类和伪元素

A. 动态在元素中添加字符串

① 电话号码前加上icon☎，价格前面加上￥......

特殊字符unicode参考这里。

12345645654
1800

说明：::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

② 字符串前后加固定字符，如书名《简爱》（引号也一样）

简爱

③ 通过attr()/url()/uri() 加content

image.png

 百度

上述案例配合hover使用更好，鼠标移上的时候再出现链接

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }

B. 两个图标之间加上分隔符

image.png

C. 不改变元素尺寸的边框

在宽度为百分比的元素中，为此元素增加边框，此时会导致元素超过原有的百分比；例如：导航条宽度为文档的 100% ，刚好撑满文档，但是需要在周围增加 1px 的边框

.meun {
    width: 100%;
    height: 80px;
    position: relative;
}
.menu::before {
    content: ""
    position: absolute;
    left: 0;
    border-left: 1px solid #ccc;
}
.menu::after {
    content: ""
    position: absolute;
    left: 0;
    border-right: 1px solid #ccc;
}

D. 通过css属性计数器counter对Item进行编号

counter-increment： 递增或递减一个或多个计数器
counter-reset： 创建或重置一个或多个计数器 

image.png

    
HTML tutorials
    
HTML Tutorial
    
XHTML Tutorial
    
CSS Tutorial

    
Scripting tutorials
    
JavaScript
    
VBScript

    
XML tutorials
    
XML
    
XSL

E. 简单几何图形

image.png

F.清除浮动

清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}

G. 实现多图片背景

现在background可以自行多图片背景了

也可以通过::before和::after 实现

.banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}

其他用法自行搜索练习......