2018年9月-10月前端学习总结——布局（css）_:before 与元素未重合-优快云博客

本文深入探讨了CSS中的高级技巧，包括使用伪类选择器解决按钮文字比例问题，利用text-indent属性处理带字背景图，运用nth-child()和nth-of-type()选择器精确选择元素，以及在移动端消除a标签点击背景色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.关于按钮-使用伪类选择器 :after/:before

引入情景

在制作一个“更多”的按钮时，由于运营所填充的按钮是图片形式，上面的“更多”两字随图片的缩放而失去正常比例，在界面中看着极为不协调以及虚化问题。于是将运营上传的按钮图片重新上传为不带文字只有背景图的按钮图片，再在按钮上添加文字。

语法

【:before】选择器向选定的元素前插入内容。使用content属性来指定要插入的内容。

【:after】选择器向选定的元素之后插入内容。使用content属性来指定要插入的内容。

具体使用

<a class='content' href='#'></a>

a.content:after {

     content: '更多';

}

然后将将该元素设置为绝对定位absolute，再调整左右边距/颜色等，实现之前的按钮效果。这样就可以解决图片上文字随图片缩放而虚化的问题。

2.关于带字标题背景图的处理：text-indent

引入场景

运营填充的标题是一张带字的背景图。但是某一个需求是，需要获取到这个标题的文字信息，但是此时标题是一整张图，并且运营填充该图时没有写入alt属性的选项，也即无法通过图的alt拿到标题文字。只能在上传带字背景图后再填写标题。此时标题与带字标题背景图同在，并且无法重合。

语法

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

具体使用

在标题的类里加一句：

.title{
     text-indent: -9999px;
}

既实现了视觉上“隐藏”真正的标题文字，又能使用jq获取到标题文字信息。

3.伪类选择器：nth-child()、nth-of-type()（可对比jq选择器 :gt :lt）

引入场景

调整某个专题的时候，只需要对热区中对某几个热区进行特别调整的时候，需要获取到对应位置对元素。比如，需要获取热区（class='hotlist'）中第2、3、4个，和第7个进行不同对微调整。其中2 3 4为同样css调整，7为另一种样式调整。

语法

【:nth-child(n)】选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

【注意】该选择器选取父元素的第 N 个子元素，与类型无关。

示例：

.wrap p:nth-child(odd){} //匹配第奇数个wrap的子元素p

.wrap .child:nth-child(even){} //匹配第偶数个wrap的类名为child的子元素 

.wrap .child:nth-child(3n+1){} //匹配第1,4,7....的wrap的类名为child的子元素

【:nth-of-type(n)】选择器匹配属于父元素的【特定类型】的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。

示例：

.wrap .child:nth-child(3n+1) -匹配类名为child的第1,4,7....个wrap的子元素，数的时候不会受其他类型的影响。

【注意】1. n 是计数器（从 0 开始），1 是偏移值

2.n写在前面，不能写成（1+3n）

具体使用

解决上面提到的引入背景。

<div class='wrap'>
    <div class='hotlist'>第1个子元素</div>
    <div class='hotlist'>第2个子元素</div>
    <div class='hotlist'>第3个子元素</div>
    <div class='hotlist'>第4个子元素</div>
    <div class='another'>第5个子元素 其他类型</div>
    <div class='another'>第6个子元素 其他类型</div>
    <div class='hotlist'>第7个子元素</div>
    <div class='hotlist'>第8个子元素</div>
    <div class='hotlist'>第9个子元素</div>
    <div class='hotlist'>第10个子元素</div>
</div>

（1）获取wrap的名为hotlist的第3个元素，如果第三个元素的类不是hotlist，就匹配不到这个元素。

 .wrap .hotlist:nth-child(3){}

（2）获取wrap的名为hotlist的前4个子元素

  .wrap .hotlist:nth-child(-n+4){}

（3）获取wrap的名为hotlist的从第7个开始后的子元素

  .wrap .hotlist:nth-child(n+7){}

（4）获取wrap的名为hotlist的第2 3 4个元素

.wrap .hotlist:nth-child(-n+4):nth-child(n+2){}

（5）获取wrap的名为hotlist的第3 4 5 6 7个元素，此时只能匹配到第3 4 7三个元素，因为其中5 6的类名是不是hotlist，匹配不到。

 .wrap .hotlist:nth-child(-n+7):nth-child(n+3){}

（5）获取wrap的名为hotlist的第3 4 5 6 7个元素，此时匹配的是wrap中的第3 4 7 8 9个子元素，因为他们类名是nth-of-type所指定的hotlist。

  .wrap .hotlist:nth-of-type(-n+7):nth-child(n+3){}

4.移动端a标签被点击时背景色的取消

引入场景

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

即在ios移动端的链接，在点击的时候，会有一个灰色的背景图，想要把它取消。

语法

（1）-webkit-tap-highlight-color :该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

（2）-moz-user-select:none | text | all | element ：设置或检索是否允许用户选中文本。

none：文本不能被选择

text：可以选择文本

all：当所有内容作为一个整体时可以被选择。

如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element：可以选择文本，但选择范围受元素边界的约束。

（3）-moz-user-focus ：通过将其值设置为ignore，可以禁用对元素的聚焦，这意味着用户将无法激活元素

具体使用

a {

      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

      -webkit-user-select: none;

      -moz-user-focus: none;

      -moz-user-select: none;

}