-
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol><li><a href="#%23">Link1</a></li> <li><a href="#%23">Link2</a></li> <li><a href="#%23">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; }查看全部
-
分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。 多个url（多个target）处理： 就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。 如下面例子： html代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection"> content for aron </div> css代码： #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }查看全部
-
结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的URI的某个标志符的目标元素。我们先来上个例子，然后再做分析。 示例展示 点击链接显示隐藏的段落。 HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection"> content for Brand </div> CSS代码： .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; }查看全部
-
结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p> CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }查看全部
-
结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; } 相关HTML代码： <div> Text Input: </div> <div> Password Input: </div> <div> </div>查看全部
-
结构性伪类选择器—root :root选择器--根选择器意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。 示例演示： 通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; } “:root”选择器等同于元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE９以下还可以借助“:root”实现hack功能。查看全部
-
元素选择符（E） E[att^="value"]选择匹配元素E，且E定义了熟悉att，其属性值以value开头的任何字符串。 E[att$="value"]选择匹配元素E，且E定义了熟悉att，其属性值以value结束的任何字符串。 E[att*="value"]选择匹配元素E，且E定义了熟悉att，其属性值以value任意位置的任何字符串。查看全部
-
变形--原点 transform-origin查看全部
-
变形--矩阵 matrix()查看全部
-
属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 属性选择器 功能描述 E[att^="val"] 选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串 E[att＄="val"] 选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串。 E[att*="val"] 选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了"val"。换句话说，这符串与属值中的任意位置相匹配 实例展示： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }查看全部
-
变形--位移 translate()查看全部
-
缩放scale()函数让元素根据中心原点对对象进行缩放。查看全部
-
变形--扭曲 skew()查看全部
-
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);查看全部
-
transform:rotate(0deg);不旋转 transform: rotate(45deg);正值是顺时针查看全部
举报
0/150
提交
取消