CSS篇-CSS小技巧与注意手记(四)

美丽的紫琪

一 : 结构伪类选择器

• 选出第一个与最后一个元素令其变色

    
    
    



    
斯嘉丽
    
邓紫棋
    
雪芙
    
朱莉
    
卡戴珊

效果

效果

• 选出某个元素令其变色

    
    
    



    
斯嘉丽
    
邓紫棋
    
雪芙
    
朱莉
    
卡戴珊

效果

• 选出偶数元素令其变色

• 选出奇数元素令其变色

• 从后往前数选出某一个元素

li:nth-last-child(2){
            color: #c81623;
        }

二 : 属性选择器

• 选出所有带有属性的元素

    
    
    


    
女神
    
女神
    
女神
    
女神
    
女神
    
女神
    
女神
    
女神
    
女神

效果

效果

• 选出class=girl2 的元素

• 选出以girl开头的元素

• 选出以girl结尾的元素

• 选出带有girl的元素,任意位置都可以

三 : 伪元素选择器

• 选出文本第一个词或字

    
    
    



    

        日本漫画《火影忍者》及其衍生作品中氏族之一，以擅长三大瞳术之一的写轮眼而闻名。宇智波是六道仙人长子因陀罗后裔，继承仙人之眼，与千手一族进行了多年的战争，最终宇智波斑与千手柱间共同建立木叶村。 [1]  日语发音接近“团扇”，团扇既是其族徽也象征其擅于火遁，被誉为“团扇宇智波”。
    

效果

效果

• 选出文本的第一行

• 修改选中文本的样式

• E::before与E::after

在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用

    
    
    


    
名字

效果

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，

• 使用E::before与E::after制作图标字体

注意 : 伪元素默认是行内元素,没有宽高

四 : css3盒子模型

css3中可以通过box-sizing来指定盒子模型,即可指定为content-box,border-box,我们计算盒子大小的方式就发生了变化.

box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

效果

五 : 滑动生成边框

效果预览

效果

为了达到此效果,在鼠标触放在盒子时加上一个内减边框的伪类元素,用定位去实现,让伪类元素压在父盒子上.

六 伪元素图标字体应用

鼠标经过时边框与下箭头(文字)同事变换红色

效果

其中下箭头 是图标字体,我们利用伪元素在div盒子后面加一个伪元素,是一个图标字体下箭头,设置鼠标经过时候,边框与伪元素的颜色同时变为红色.