站在CSS3的肩上定义选择器】的更多相关文章

按上下文选择元素 按祖先元素选择要格式化的元素 输入ancestor,这里的ancestor是希望格式化的元素的祖先元素的选择器. 输入一个空格(必不可少). 如果需要,对后续的每个祖先元素重复第(1)和 (2)步. 输入descendant,这里的descendant是要格式化的元素的选择器. 按父元素选择要格式化的元素 输入parent,这里的parent是包含直接格式化的元素的选择器. 输入>(大于号). 如果需要,对后代每个父元素重复第(1)步和第(2)步. 输入child,这里的chi…
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val]属性选择器:选择值以val指定的字符串开头的att属性使用这个样式. [att$=val]属性选择器:选择值以val指定的字符串结尾的att属性使用这个样式. 属性选择器的例子:利用[att$=avl]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式. <!DOCTYPE html>…
Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:…
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.html 1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS样式方法 *选择器也可以应用到子选择器中,例如下面的代码: #container * {…
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素 但不是P类型,不是红色</h1> < p>这是黑色的 注意对比…
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>index.html</title> <meta http-equiv="keywords" content=&qu…
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的 二.结构性伪类选择器: E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even…
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l…
1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C…
1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的. (1). 应用 ID 每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条 ,…