-
nth-child(n) 定位某个父元素的一个或多个特定的子元素 (n)可以为整数(1,2,3...)当n为整数时不能为0,从1算 (n)也可以是多项式,多项式里的n可以为0 例如(n)为(2n)时,表示选中的是2,4,6,8...等等偶数项,一直往后选直到选完
查看全部 -
:last-child 用法与:first-child类似 选择的是元素的最后一个子元素 例如 div>p:last-child 选择的是div下的子元素p的最后一个
查看全部 -
:first-child 表示选择父元素下的第一个子元素
div>p:first-child 表示选择p元素的父元素下的第一个子元素
查看全部 -
目标选择器 :target 用来匹配页面中的url的某个标识符的目标元素 即例如 <a href="#mm">aaa</a> <h1 class="att" id="mm"> pp</h1> 那么点击aaa时就会触动h1标签 css中这样定义 #mm:target{}
查看全部 -
:empty 伪类选择器 选择器表示的就是空,用来选择没有任何内容的元素,一个空格都不行
查看全部 -
否定选择器 :not 表示选择除某个元素外所有元素 例如 div:not[id="aa"]{} 表示的就是div元素下,选择除了id="aa"的其他所有元素
查看全部 -
根选择器 :root :root选择器匹配元素所在文档的根元素。在HTML文档中,根元素始终是<html> 所以:root的作用相当于直接选择html 即 :root{}==html{} 建议选择使用:root选择器
查看全部 -
属性选择器 E[att^="val"] 元素E中 匹配 属性att以val开头的 E[att$="val"] 元素E中 匹配 属性att以val结尾的 E[att*="val"] 元素E中 匹配 属性att包含了val的
查看全部 -
语法缩写如下:
background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的缩写拆解成以下形式:
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color;
注意:
用逗号隔开每组 background 的缩写值;
如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
background-color 只能设置一个。
查看全部 -
设置背景图片大小 background-size 格式 background-size:auto或 长度值 或 百分比 或cover 或contain auto:表示默认值 ,不做改变 长度值:单位px 成对出现 设置宽高 百分比:0%-100%之间 ,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值 cover:填满整个区域 contain:将背景图片等比缩放至某一边紧贴容器边缘为止
查看全部 -
背景剪切 background-clip 格式 background-clip:border-box或padding-box或content-box或no-clip border-box:表示从边框开始剪切 padding-box:表示从内边开始剪切 content-box:表示从内部区域开始剪切 no-clip:表示不剪切 注意:这里剪切不仅剪切了图片,而且剪切了背景,即背景颜色也被剪切
查看全部 -
背景图片显示的起始位置 background-origin 格式 background-origin:border-box或padding-box或content-box border-box:表示图片从边框开始显示 padding-box:表示图片从内边开始显示 content-box:表示图片从内部区域开始显示 注意:要想设置成padding-box和content-box两种格式,必须把背景设置为 no-repeat 否则则是默认border-box
查看全部 -
文本阴影 text-shadow 格式 text-shadow:水平偏移距离 垂直偏移距离 阴影模糊程度 阴影颜色,可以用rgba色 类似的是边框阴影为 box-shadow
查看全部 -
设置本地机器没有的字体 @font-face 格式 @font-face{ font-family:"字体名称"; src:url("字体在服务器上的路径"); } 将@font-face设置好后,就可以设置某个元素的字体为上述定义的字体
查看全部 -
文本溢出省略 格式 text-overflow:ellipsis或clip 表示溢出部分什么方式表示,前者是省略号,后者表示直接剪切 over-flow:hidden 设置溢出部分隐藏 white-space:nowrap或break-word 设置文本行为 前者是浏览器默认设置,表示控制连续文本换行,后者表示内容将在边界内换行,一般用默认方式
查看全部
举报
0/150
提交
取消