css选择器
选择html文档中的某个元素或者某些元素
选择器的语法结构: 选择器名{属性名:属性值;...}
选择器是css代码,必须写在css文件或者style标签里
常用选择器
1.元素选择器:
- 会选择html文档中所有对应的元素;但是不灵活,无法给相同类型的元素设置不同的属性值.
2.群组选择器 - 会获取到每个逗号之间的所有对应的元素.
3.id选择器 - 获取到对应的id值的元素
- 前提:需要给对应的元素设置id值;
- ps:id值不能重复.
4.class选择器 - 获取到对应的class值的元素
- 前提:需要给对应的元素设置class值;
- ps:class值可以重复.
- 如果一个元素需要多个class,则class名之间用空格隔开.
5.后代选择器 - 语法:
E F {} - 找到E对应的元素里面所有的F对应的元素(E,F可以是元素名,id名,class名)
6.子选择器 - 语法:
E>F{} - 作用:找到E对应的元素里面所有的F对应的子子子元素
- (E,F可以是元素名,id名,class名)
7.相邻兄弟选择器 - 写法:
E+F {} - 特点:相邻兄弟选择器所找到的一定是同级元素(E,F一定是同级元素);
- 找到与E对应的所有的元素的同级的紧挨着的下一个F对应的元素.
- (E,F可以是元素名,id名,class名)
8.兄弟选择器
- 写法:
E~F{} - 特点:兄弟选择器所找到的一定是同级元素(E,F一定是同级元素);
- 找到元素E后面与之同级的所有F元素
- (E,F可以是元素名,id名,class名)
属性选择器
1.属性选择器A
语法：element[attribute]{}
给带有attribute属性的element标签设置的css样式.
2.属性选择器B
语法：e[attr="value"]{}
给带有attr属性并且值为value的e元素设置css样式.
3.属性选择器C
语法：e[attr~=value]
会选择所有的属性名为attr且值里面有value单词的e标签.
4.属性选择器D
语法：e[attr*=value]
会选择所有属性名为attr且值里有value连贯字符的e标签.
伪类选择器
- E:link 匹配到定义了超链接但没有点击过的元素.
- E:visited 匹配定义了超链接且已经点击过的元素.
- E:hover 鼠标停留在E元素上时.
- E:active 鼠标在E元素上按下时
W3C规定了伪类选择器的顺序（爱恨原则: LoVe HAte）
- 1.link和visited必须放在hover之前
- 2.active必须放在hover之后
CSS3增加了两个伪类选择器
1.target:只有跳转到该目标上,样式才会生效(一般有a连接参与,target是添加给跳转到的元素)
2.disabled:对属性为disabled的input标签生效
nth-child选择器
E:nth-child(number){}选择E元素所在的父元素里的第number个元素,当第number个元素不是E元素时,不起效果
E:nth-child(n){}n:代指所有的元素,从第一个直到最后.E:nth-child(2n+1){}2n+1=odd 选中E元素所在父级里所有编号为奇数的E元素E:nth-child(2n){}2n=even 选中E元素所在父级里所有编号为偶数的E元素E:nth-child(-n+8){}编号8之前的E元素.包含8E:nth-child(n+8){}编号8之后的E元素.包含8E:nth-of-type(number)type关心类型，获得E元素所在父元素里剔除了不是E元素之外的所有E元素之后的第number个E元素E:nth-last-of-type(2){}获得E元素所在父元素里所有的剔除了不是E元素之外的所有元素之后的第number个E元素.(到着数)- root:会直接找到html标签
- E:empty 选择内容为空的E元素.
:root {
background: orange;
}
E:only-child匹配父元素仅有的一个子元素E。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
轮廓设置
outline(轮廓):绘制在元素周围的一条线,位于元素边框的外围,用于突出元素.
轮廓线不计算在盒模型尺寸内.
如果要给多个元素都设置轮廓,一定要将轮廓考虑到元素的尺寸里, 不然会出现重叠
- 1.outline:不兼容ie低版本
- 2.outline的设置跟border语法一样,最大区别:outline不占用元素的空间大小.
轮廓线的颜色outline-color
轮廓线宽度 =>轮廓线没有高度
轮廓线样式:dotted,dashed,solid,
后面的不常用
double(双线),groove(凹槽线),ridge(凸槽线),inset(凹边),outset:凸边
阴影
box-shadow:
1.x方向的偏移度
2.y方向的偏移度
3.阴影的发散度(模糊程度)
4.阴影的宽度(大小)
5.阴影的颜色
6.inset:添加之后,阴影在元素内部.
box-shadow可以添加多组值,如果有多组值,组与组之间用逗号隔开.
圆角
圆角border-radius
圆角分四个位置:
top-left,top-right,bottom-left,bottom-right,
如果要用圆角画出标准的圆形
1.元素尺寸宽高相等
2.每个圆角的水平和竖直半径同时为宽或高的一半.
当统一写全部的角时,水平方向的写在一起,竖直方向的写在一起,
中间用/分隔开.当单独写某一个角的水平竖直值时,只需要用空格隔开即可.
如果给三个值,分别对应:左上,右上+左下,右下。
如果给两个值,分别对应:左上+右下,右上+左下。
隐藏方式
隐藏一个元素有两种方式:
- 1.display:none;(移除)不仅隐藏元素,而且其元素所占位置腾出来
- 2.visibility:hidden;(隐身)隐藏元素但其元素所占位置保留
resize
1.none:不允许元素改变大小;
2.vertical:只允许元素在竖直方向上改变大小;
3.horizontal:只允许元素在水平方向改变大小;
4.both:允许元素水平竖直都可以改变大小;
IE和Opera不兼容resize属性.
resize:both;
/*如果要使元素的resize属性起作用,必须加溢出隐藏*/
overflow: hidden;