每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > css
css选择器
发布时间:2018-12-06 10:33:05 修改时间:2018-12-06 13:45:13 阅读:6686 评论: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
回复列表
关键字词:nbsp,元素,style,盒子,span,1px