-
CSS3 only-of-type选择器 表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 HTML代码: <div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div> CSS代码: .wrapper > div:only-of-type { background: orange; }查看全部
-
CSS3 only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。 .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }查看全部
-
CSS3 nth-last-of-type(n)选择器 从最后一个子元素开始,选择父元素中指定的某种子元素类型 .wrapper > p:nth-last-of-type(3){ background: orange; }查看全部
-
CSS3 last-of-type选择器 选择父元素下的某个类型的最后一个子元素。 .wrapper > p:last-of-type{ background: orange; }查看全部
-
CSS3 nth-of-type(n)选择器 只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用 .wrapper > p:nth-of-type(2n){ background: orange; }查看全部
-
CSS3 first-of-type选择器 指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 .wrapper > p:first-of-type { background: orange; }查看全部
-
text-overflow:clip;//文本溢出截取 white-space:nowrap;//文本单行显示 overflow:溢出内容方式查看全部
-
CSS3 结构性伪类选择器—nth-last-child(n) 从某父元素的最后一个子元素开始计算,来选择特定的元素。 ol > li:nth-last-child(5){ background: orange; }查看全部
-
CSS3 结构性伪类选择器—nth-child(n) 用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。 n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。 ol > li:nth-child(2n或even){ background: orange; }查看全部
-
CSS3 结构性伪类选择器—last-child “:last-child”选择器选择的是元素的最后一个子元素。 ul>li:last-child{background:blue;margin-bottom:0px;}查看全部
-
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。而不是后代元素 ul,li{}是分组选择器,在多种选择器需要设置同一个样式时,使用这个。 ul li{}是包含(后代)选择器,用于将指定的ul下面的所有li设置同一样式。 ul>li{}是子代选择器,用于将指定标签下面的第一代子元素设置同一样式。查看全部
-
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); a为元素的水平伸缩量,1为原始大小; b为纵向扭曲,0为不变; c为横向扭曲,0不变; d为垂直伸缩量,1为原始大小; e为水平偏移量,0是初始位置; f为垂直偏移量,0是初始位置查看全部
-
案例:点击链接后,段落p将添加橙色背景和白色文字。查看全部
-
CSS3 结构性伪类选择器—target :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。 点击链接后显示设定的样式效果。 触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand; :target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。 #brand与后面的id="brand"是对应的,#号后对的名称与id=""中的名称对应。 <div class="menuSection" id="aron"> content for aron </div> #aron:target { background: red; color: #fff; }查看全部
-
第二个参数起始,第三个参数为结束颜色,中间可由多个颜色查看全部
举报
0/150
提交
取消