admin管理员组文章数量:1794759
css3选择器详解
1.基本选择器 <!DOCTYPE html> <html> <head> <title>使用css3基本选择器</title> </head> <body> <ul class="clearfix demo"> <li class="first" id="first">1</li> <li class="active">2</li> <li class="important item">3</li> <li class="important">4</li> <li class="item">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li class="last" id="last">10</li> </ul> </body> </html> <style type="text/css"> *{ margin: 0; padding: 0; } /*清除浮动效果*/ .clearfix:after,.clearfix:before{ display: table; content: "" } .clearfix:after{ clear: both; } .demo{ width: 250px; border:1px solid #ccc; padding: 10px; /*上下外边距20px 元素水平居中*/ margin: 20px auto; } li{ /*list-style-type ， list-style-position ， list-style-image*/ /*wwwblogs/ymj0906/archive/2012/06/15/2550084.html*/ /*隐藏列表项*/ list-style: none outside none; float: left; height: 20px; line-height: 20px; width: 20px; border-radius: 10px; text-align: center; background: pink; color: green; margin-right: 5px; } </style>
效果如图所示
通配符选择器使用通配符选择器改变背景色 将元素类名为demo下的所有元素背景色设置为橙色
/*将元素类名为demo下的所有元素背景色设置为橙色*/ .demo *{ background: orange; } 元素选择器列表ul的背景色将变成灰色
ul { background: grey; } id选择器 #first{ background: lime; color: #000; } #last{ background: #000; color: lime; } 类选择器 .item{ background: green; color: #fff; font-weight: bold; } 多类选择器如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素 列表3同时具有important和item类名 列表4只有important类名 列表5只有item类名
.item{ background: green; color: #fff; font-weight: bold; } .item.important{ background: red; } 带标签的类名选择器仅需要对ul为”block”定义样式
ul.block{ background: #ccc; } 群组选择器将具有相同样式的元素分组在一起，每个选择器之间用逗号隔开 “selector1,selector2”表示选择匹配为selector1和selector2的所有元素
2.层次选择器主要层次关系包括后代 父子 相邻兄弟 和通用兄弟几种关系
举例说明
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4 <div>5</div> <div>6</div> </div> <div>7 <div>8 <div>9 <div>10</div> </div> </div> </div> </body> </html> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 300px; margin:0 auto; } div{ margin:5px; padding: 5px; border:1px solid #ccc; } </style>将事例中的body画出dom树形草图
后代选择器后代选择器之间以空格隔开 后代选择器 E F E为祖先元素，F为后代元素，这里F不管是E元素的子元素，孙辈元素都将被选中 不论F在E中有多少层级 ，F都将被选中
使用后代选择器改变背景颜色
div div { background: orange; } 子选择器E>F 选择某元素的子元素 E为父元素 F为子元素，这里F仅仅是E的子元素而已
改变body下的子元素div的背景色
div div { background: orange; } body > div { background: green; } 相邻兄弟选择器E+F 选择紧接在另一个元素后的元素 它们具有一个相同的父元素 E F是相邻元素
为了说明相邻兄弟选择器，在此处添加一个类名active <div class="active">1</div> div div { background: orange; } body > div { background: green; } .active + div { background: lime; }此时第二个div的背景色变成"lime"色
通用兄弟选择器E~F 用于选择某元素后面的所有兄弟元素 与相邻兄弟选择器类似 它们具有一个相同的父元素
div div { background: orange; } body > div { background: green; } .active + div { background: lime; } .active ~ div { background: red; } 3.伪类选择器伪类选择器语法书写
E:class {property:value}
其中E为html中的元素，class是伪类选择器名称，property是属性，value是属性值
动态伪类选择器动态伪类选择器语法
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 目标伪类选择器 <!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } </style> </head> <body> <p><a href="#news1">跳转至内容 1</a></p> <p><a href="#news2">跳转至内容 2</a></p> <p id="news1"><b>内容 1...</b></p> <p id="news2"><b>内容 2...</b></p> </body> </html>:target应用场景 制作手风琴，高亮显示脚注
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="accordionMenu"> <div class="munuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>第一个区域</p> </div> <div class="munuSection" id="promotion"> <h2><a href="#promotion">Promotion</a></h2> <p>第二个区域</p> </div> <div class="munuSection" id="event"> <h2><a href="#event">Event</a></h2> <p>第三个区域</p> </div> </div> </body> </html> <style type="text/css"> /*设置位置*/ .accordionMenu{ background: #fff; color: #424242; margin: 0 auto; width: 500px; border: 1px solid red; font-size: 12px; font-family: Arial, Verdana, sans-serif; } /*accordionMenu下所有的子元素或者孙辈元素h2*/ .accordionMenu h2{ margin: 5px 0; position: relative; } /*制作向下三角效果*/ .accordionMenu h2:before { border: 5px solid black; content: ""; height: 0; position: absolute; right: 10px; top: 10px; border-color:#fff transparent transparent transparent; width: 0; } /*制作手风琴标题栏效果*/ .accordionMenu h2 a{ background: #8f8f8f; display: block;/*块级元素，铺满整个区域*/ color:#424242;/*默认的字体颜色*/ font-size: 13px; margin: 0; padding: 10px 10px;/*文字距离四周的间距*/ text-shadow: 2px 2px 2px #aeaeae; text-decoration: none; } /*目标标题的效果，点击之后标题的效果*/ .accordionMenu :target h2 a, .accordionMenu h2 a:focus, .accordionMenu h2 a:hover, .accordionMenu h2 a:active{ background: #2288dd; color:#FFF; } /*标题栏对应的内容*/ .accordionMenu p{ margin: 0; height: 0;/*默认栏目内容高度为0，达到隐藏的效果*/ overflow: hidden; /*padding: 0 10px;*/ } /*关键代码，展开对应目标内容*/ .accordionMenu :target p{ height: 100px; overflow: auto; } /*展开时标题上的三角效果*/ .accordionMenu :target h2:before{ border-color: transparent transparent transparent #fff; } </style> 语言伪类选择器 <!DOCTYPE html> <html lang="fr"> <head> <title></title> </head> <body> <p>WWWF's goal is to: <q cite="www.wwf"> build a future where people live in harmony with nature </q>we hope they succeed </p> </body> </html> <style type="text/css"> :lang(en){ quotes: '"''"'; } :lang(en) q {background: red}; :lang(fr){ quotes: '“''”'; } :lang(fr) q {background: green}; </style>当修改为<html lang="en-US">时,如下图所示
ui元素状态伪类选择器一般状态包括 启用 禁用 选中 未选中 获得焦点 失去焦点 锁定和待机等 可参考 twitter.github/bootstrap/base-css.html#forms示例
结构伪类选择器 <!DOCTYPE html> <html> <head> <title>html dom树形结构图</title> </head> <body> <div> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <div>abc</div> <p>para</p> <b>ghi</b> </div> </body> </html>结构伪类选择器语法
结构伪类选择器中，有4个伪类选择器接受参数n :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) 这个参数n可以是1,2,3,4，odd,even,2n+1,-n+5 参数n的起始值始终是1 而不是0 为0时选择器将选择不到任何匹配的元素
参数按常用的类型划分七种情况
1.具体的数值 :nth-child(3) 2.n为表达式"nlength" :nth-child(2n) 3.n为表达式"n+length" :nth-child(n+2) 4.n为表达式"-n+length" :nth-child(-n+2) 5.n为表达式"nlength+b" :nth-child(2n+1) 6.n为odd 奇数 7.n为even 偶数
结构伪类选择器的使用方法 1.:first-child的使用 定位某个元素的第一个子元素
ul>li:first-child { background-color: green; }2.:last-child的使用 定位某个元素的最后一个子元素
ul>li:last-child { background-color: blue; }3.nth-child的使用 定位某个父元素的一个或多个特定的子元素
ul>li:nth-child(3){ background-color: yellow; }注意ul>li:nth-child(3)表达的并不是一定选择列表ul元素中的第3个子元素li 如果当第3个li元素前存在其他类型的元素，是不会改变第3个li元素的背景色的
4.nth-child(n)
ul>li:nth-child(n){ background-color: orange; }4.nth-child(2n)
ul>li:nth-child(2n){ background-color: blue; }5.nth-child(2n+1）
ul>li:nth-child(2n+1){ background-color: blue; }6.nth-child(n+5）
ul>li:nth-child(n+5){ background-color: blue; }7.nth-child(-n+5）
ul>li:nth-child(-n+5){ background-color: blue; }8.nth-child(4n+1）
ul>li:nth-child(4n+1){ background-color: blue; }:nth-last-child使用 从父元素的最后一个子元素开始计算来选择特定的元素
ul>li:nth-last-child(4){ background-color: yellow; }其中nth-child(odd)和nth-last-child(even)选择的元素是相同的 其中nth-child(even)和nth-last-child(odd)选择的元素是相同的
:nth-of-type的使用 只计算父元素中指定的某种类型的子元素 nth-of-type选择的是某父元素的子元素，并且这个子元素是指定类型的 :nth-last-of-type选择的某类型子元素是从后向前排序计算
:first-of-type和:last-of-type的使用 类似于:first-child和:last-child，不同之处就是指定了元素的类型 :first-of-type是用来定位某个父元素下某个指定类型的第一个子元素 :last-of-type是用来定位某个父元素下某个指定类型的最后一个子元素
:only-child的使用 表示一个元素是它父元素的唯一子元素
:only-of-type的使用 表示选择一个元素是它父元素的唯一一个相同类型的子元素
:only-of-type表示一个元素有很多个子元素，而其中只有一个子元素是唯一的，使用:only-of-type就可以选中这个唯一类型的子元素
:empty的使用 用来选择没有任何内容的元素
否定伪类选择器:not() 过滤内容
伪元素可用于定位文档中的文本 1::first-letter 用来选择文本块的第一个字母
首字母下沉效果
p:first-child::first-letter{ float: left; color: #903; padding: 4px 8px 0 3px; font: 75px/60px Georgia; }2::first-line 匹配元素的第一行文本 将匹配block inline-block table-caption table-cell等级别的元素的第一行
p::first-line{ background-color:yellow; }3.::before ::after 这两个主要用来给元素的前面或后面插入内容
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="www.runoob/">访问菜鸟教程</a> <a href="www.runoob/">访问菜鸟教程</a> </body> </html> <style type="text/css"> a { position: relative; display: inline-block; outline: none; text-decoration: none; font-size: 16px; padding: 5px 15px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\\5B"; left: -2px; } a:hover::after { content: "\\5D"; right: -2px; } </style>4.::selection 匹配突出显示的文本
::selection{ background:red; color:#fff; }用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性
属性选择器
属性选择器的使用 1，E[attr] （1）用于选取带有指定属性的元素。 /**选择了.demo下所有带有id属性的a元素 **/
.demo a[id] { }（2）也可以使用多属性进行选择元素。 /**选择了.demo下同时拥有href和title属性的a元素 **/
.demo a[href][title] { }2，E[attribute=value] 用于选取带有指定属性和值的元素。当前也可以多个属性一起使用：
/**选择了.demo下id="first"的a元素 **/ .demo a[id="first"] { }/**选择了.demo下id=“first”，且拥有title属性的a元素 **/
.demo a[id="first"][title] { }注意：E[attribute=value] 这种属性选择器，属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时。
/** 匹配不到元素 **/ a[class="links"] { } /** 这个才能匹配到 **/ a[class="links item"] { } <a href="" class="links item">hangge</a>3，E[attribute~=value] 用于选取属性值中包含指定词汇的元素。同上面的完全匹配不同，这个只要属性值中有 value 就相匹配。
/** 可以匹配到元素 **/ a[class~="links"] { } <a href="" class="links item">hangge</a>4，E[attribute^=value] 匹配属性值以指定 value 值开头的每个元素。
/** href属性值以"mailto:"开头的所有a元素 **/ a[href^="mailto:"] { }5，E[attribute$=value] 匹配属性值以指定 value 值结尾的每个元素。
/** href属性值以"png"结尾的所有a元素 **/ a[href$="png"] { }6，E[attribute*=value] 匹配属性值中包含指定 value 值的每个元素。
/** title属性值中只要包含有"site"的所有a元素 **/ a[title*="site"] { }7，E[attribute|=value] 这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。
/** 下面3个img都会被匹配到 **/ img[src|="figure"] { } <img src="figure-0.png" alt="图1"> <img src="figure-1.png" alt="图1"> <img src="figure-2.png" alt="图1">E[attribute*=value]和E[attribute~=value]区别 E[attribute*=value]匹配的是元素属性值中只要包含val字符串就可以 E[attribute~=value]匹配的是元素属性值中要包含val，并不仅是字符串 www.hangge/blog/cache/detail_1727.html
版权声明：本文标题：css3选择器详解 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969117a123643.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论