-
结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;} 示例演示 在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。 HTML代码： <div class="post"> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p> <p>第四段落</p> <p>第五段落</p> </div> CSS代码： .post { padding: 10px; border: 1px solid #ccc; width: 200px; margin: 20px auto; } .post p { margin:0 0 15px 0; } .post p:last-child { margin-bottom:0; }查看全部
-
ul > li:first-child { color: red; } ul > li:last-child { color: yellow; }查看全部
-
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href="##">Link1</a></li> <li><a href="##">Link2</a></li> <li><a href="##">link3</a></li> </ol> CSS代码： ol > li{ font-size:20px; font-weight: bold; margin-bottom: 10px; } ol a { font-size: 16px; font-weight: normal; } ol > li:first-child{ color: red; }查看全部
-
/* href="#brand" 与 d="brand" 绑定*/ /* :target p*/ :target p{ background: orange; color: #000; } /* :target all*/ :target { background: orange; color: #fff; } /* href="#brand1" 与 d="brand1" 绑定*/ :target { background: orange; color: #fff; } :target h3{ background: red; color: #fff; } :target pre{ background: green; color: #fff; }查看全部
-
/* :target p*/ :target p{ background: orange; color: #fff; } /* :target all*/ /* :target { background: orange; color: #fff; } */查看全部
-
div:empty { display:block; border: 1px solid green; background:linear-gradient(to left bottom,red,black,green,red,blue,yellow,purple); } /*一个div中设置多个背景*/ .div_m{ width:300px; height:95px; background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg), url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg), url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg); background-position: left top, 100px 0, 200px 0; background-repeat: no-repeat, no-repeat, no-repeat; }查看全部
-
结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。查看全部
-
HTML 全局属性 New : HTML5 新属性。 属性 描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制，移动，或链接，或删除 hiddenNew hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheckNew 检测元素是否拼写错误 style 规定元素的行内样式（inline style） tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息（可在工具提示中显示） translateNew 指定是否一个元素的值在页面载入时是否需要翻译 /* 推荐使用 : title 规定元素的额外信息（可在工具提示中显示）*/查看全部
-
01：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 02：根选择器 :root ==html 03：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 04：empty 选择没有内容的元素，一个空格都没有。 05：target 用法类似锚点，显示与隐藏。 06: nth-child(n) 里面的n是从1开始，但是（2n+1）表达式，n是从0开始的 07：nth-last-child(n),和上面的一样，但是从最后开始的 08: nth-of-type(n)和上面的区别是定义一个具体的子元素 09: last-of-type 选择最后一个，没有参数括号。 10 :nth-last-of-child(n)选择最后开始 。 11:only-child 父元素中只有唯一的那个子元素 12：only-of-type 子元素中唯一个查看全部
-
<pre> <h1>CSS3 径向渐变</h1> 径向渐变由它的中心定义。<br> 为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落） <br> <h2>语法:</h2> <code> background: radial-gradient(center, shape size, start-color, ..., last-color); </code> <h2>设置形状:</h2> <code> shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。</code> <h2>不同尺寸大小关键字的使用:</h2> <code> size 参数定义了渐变的大小。它可以是以下四个值：<br> closest-side<br> farthest-side<br> closest-corner<br> farthest-corner<br> </code> <h2>重复的径向渐变:</h2> <code> repeating-radial-gradient() 函数用于重复径向渐变： </code> </pre>查看全部
-
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 CSS3 径向渐变 径向渐变由它的中心定义。 为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）查看全部
-
HTML 全局属性 New : HTML5 新属性。 属性 描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制，移动，或链接，或删除 hiddenNew hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheckNew 检测元素是否拼写错误 style 规定元素的行内样式（inline style） tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息（可在工具提示中显示） translateNew 指定是否一个元素的值在页面载入时是否需要翻译查看全部
-
<<css3选择器>> 01：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 02：根选择器 :root ==html 03：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 04：empty 选择没有内容的元素，一个空格都没有。 05：target 用法类似锚点，显示与隐藏。 06: nth-child(n) 里面的n是从1开始，但是（2n+1）表达式，n是从0开始的 07：nth-last-child(n),和上面的一样，但是从最后开始的 08: nth-of-type(n)和上面的区别是定义一个具体的子元素 09: last-of-type 选择最后一个，没有参数括号。 10 :nth-last-of-child(n)选择最后开始 。 11:only-child 父元素中只有唯一的那个子元素 12：only-of-type 子元素中唯一个查看全部
-
文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。 比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff; /*text-shadow: 2px 2px 3px red;*/ text-shadow: 2px 2px 3px rgba(255,0,0,0.8); /*text-shadow: 2px 2px 3px rgba(255,0,0,.8);*/查看全部
-
嵌入字体@font-face @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ } /*font-family: name*/查看全部
举报
0/150
提交
取消