css选择器

发布时间：2018-12-06 10:33:05 修改时间：2018-12-06 13:45:13 阅读：6738 评论：0 0

（1）属性选择器

a[href] 所有的a 标签，这个a需要有 href 属性

 a[href='demo']  所有的a 标签，这个a需要有 href=demo

a[href*='demo'] 包含demo

 a[href^='demo']  以demo 开始

 a[href$='demo'] demo  结束

（2）伪类选择器

                a:active  a:link  a:hover a:visited

                新增:

                        li:first-child

                        li:last-child

                        li:nth-child() 根据n 去取值,索引是从1开始计算

                        li:nth-last-child 从后向前计算，倒着算

                            n 的用法. 取值0,1,2,3,4...

 

                        empty 空的.

                        div:empty   选中没有子元素的div

                        div:target 结合锚点进行使用，处于当前锚点的元素会被选中；

（3）伪元素选择器

                        我们的伪元素选择器是:: 两个

                            before: 想元素里面添加一个子元素，这个资源在最前面（它默认是一个行内元素，我们需要转换成一个块元素，必须设置content:''）

                            after: 想元素里面添加一个子元素，这个资源在最后面

 

                        first-letter 选中第一个字或者字母。

                        first-line 选中第一行

　　　　　　　　 ::selection 可改变选中文本的样式；

1   //选中.demo 的父元素下面的第二个子元素，并且这个子元素有一个class 属性，它的的值是demo
2 .demo:nth-child(2){

3  }

（4）有两种新增方式可以表示颜色

           rgba （ red，green，blue，Alpha 透明通道）

           hsla（Hue 色调，Saturation 饱和度，Lightness 亮度，Alpha 透明度）

           如果给父盒子设置了透明度，子盒子会继承父盒子的透明度；新增的颜色的标识方式里面，支持设置透明，而且设置的透明不会影响到子盒子；我想实现半透明的效果，我就可以使用 rgba,hsla 颜色的表示方式.

（5）text-shadow 可以设置文本阴影，实际上就是给文本添加影子..

        text-shadow:1px 1px 1px red;

             第一个1px 向右移动，负值的是向左移动（正值向右偏移，负值向左偏移）

             第二个1px 向下移动 ，负值是向上移动(正值是向下偏移，负值向上偏移)

             第三个1px 向下移动  代表的是模糊度，，不能为负数，值越大，越模糊（模糊度，不能为负数，值越大，模糊度越高）

             第四个red 代表模糊的颜色. 影子的颜色.

        text-shadow:1px 1px 1px red,-1px -1px 1px red

             //  可以为文本添加多个影子

（6）盒子模型

            我们可以改变盒子计算宽高的方式，通过设置盒子的这个属性

            box-sizing:content-box/border-box

                 content-box 盒子的高度以及宽度  盒子的宽度=width+padding+border

                 border-box  盒子的高度以及宽度  盒子的高度以及宽度=width

---