选择器整理

选择器整理

1.选择器
/

输入内容

/

/

2.标签选择器：

/

}

3.id选择器:

#box1{
color:

}

4.类选择器

.box2{
color:

}

5.通配符选择器

*{
/*background-color：

}

6.包含选择器

7.复合选择器

div,

p,

span{
color:red

}

8.属性选择器

div[id]{
width:

height:

background-color:

}

type^=“te”----指type值中te开头的

type*=----指type中包含的

9.伪类选择器

a:link{
color: ;

}

a:visited{
color

}

a:hover//鼠标悬停{
cursor:cell;//鼠标样式

font-size:40px;

}

a:active{
font-size:70px;

}

10.结构伪类选择器
ul>li*7//构建7个无序

ul li:nth-child( ){
background-color:

}

父元素 子元素：nth-child（n） ：父元素第n个子元素

even：偶数 odd：奇数

child：看的是第几行（编码所有子元素）

ul li:nth-of-type(n){
background-color：

}

of-type：选择li子元素进行涂色

11.伪元素选择器
ul li::before{
content：“(内容前加东西)”

}

ul li::after{
content:“（内容后面加东西）”

}

文体外观
/

p{
fond-size:20px;

fond-indent:2em; em----当前字体大小

}

文本水平对齐方式

text-align：center;//文本水平对齐方式

line-height：200px；//单行文本垂直居中

文本装饰

text-decoration：

list

list-style：none；//去掉前面符号

元素显示模式转换（行内元素无法设置宽高 转换为行内块 元素）

display:none； //隐藏元素

display：inline-block； //将元素转化为行内块元素

display：inline； //行内元素

背景

-attachment：fixed //保持背景面不动下滑

-position：top //所处位置

边框

border-width： //设置边框宽度

border-style：solid //边框样式

border:4px solid black

border-top-left-radio:40%

合并相邻边框

border:5px solid red; //边框红色

阴影

box-shadow：2px 2px 10px 10px black

2px：横坐标偏移量

2px：纵坐标偏移量

轮廓线

outline-style -width -color

防拖拽

resize:none; //防止拖拽

vertical-align：top/middle/bottom； //改变文字对齐方式

隐藏元素

display：none； //隐藏第一个box，下一个顶替后面跟 display：block

visibility：none； //隐藏第一个，但位置保留

绝对定位

position：relative //相对定位

position：absolute //绝对定位，不保留原来位置

固定定位

position：fixed； //相对于可视区域进行定位

粘性定位

position：sticky //开始滑动后，到达某一指定段落，开始跟着滑动