在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的。 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度,需要尽可能的 ...
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的。
网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度,需要尽可能的使用选择器来指定元素。而且使用选择器还可以定义很多规则,这样也可以减少重复定义class的代码量。
在CSS3中,主要有以下几种选择器:属性选择器、结构性选择器、UI状态选择器、通用兄弟元素选择器。下面分别介绍一下:
(一)属性选择器
顾名思义,属性选择器就是根据各种属性来选定目标的。通常我们还会结合通配符来使用属性选择器。表达式为:[attr=val] {样式内容},常用通配符有以下3个:
1) [ attr*=val ] 返回'attr'属性中包含val字符串的所有元素。如[id*=section]可选中#section1、#subsection,不能选中sec-tion。
2) [ attr^=val ] 返回'attr'属性以val字符串开头的所有元素。如[id*=section]可选中#section1、不能选中#subsection。
3) [ attr$=val ] 返回'attr'属性以val字符串结尾的所有元素。如[id*=section]可选中#subsection、不能选中#section1。
属性选择器规则简单,但是使用非常灵活多变,恰当使用可以对代码起到很好的精简。
(二)结构性选择器
在CSS中,除了我们自定义的类选择器外,还有CSS已经定义好的选择器,如a元素上的a:link, a:visited, a:hover, a:active这些状态伪类。可以结合类来使用,表达式:选择器 类名:伪类/伪元素{样式内容}。在CSS中结构性选择器如下(引自http://www.w3school.com.cn/):
选择器 | 例子 | 例子描述 | CSS |
---|
first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
这里选一些常用的有内容的选择器来说一下。
1)befor和after选择器:通常会配合content使用,在被选元素内(添加到该元素内的innerHTML)的前后添加content。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 h2:after { 8 content: "(在后面添加文字,可以指定样式)"; 9 color: blue;10 }11 </style>12 </head>13 <body>14 <p>显示效果:</p>15 <div id="main">16 <h2>第一个标题</h2>17 <p>第1个段落</p>18 <h2>第二个标题</h2>19 <p>第2个段落</p>20 <h2>第三个标题</h2>21 <p>第3个段落</p>22 </div>23 </body>24 </html>
在嵌套中要注意的是需要在子项目前设置counter-reset: 来为下级项目号重置couter,否则上文中的第2标题下的段落就从4开始了。
2)target:使用target选择器来对页面中的target元素(ID被设置为页面中的超链接来使用)指定样式,样式只有在用户点击了该链接,并且跳转到target元素后起作用。
3):nth-child(n),:nth-of-type(n):child与type的区别在于,child在统计子元素时是不分类型的,而type是区分类型的。举个栗子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 h2:nth-child(2) { background-color: blue; } 8 h2:nth-child(3) { background-color: grey; } 9 </style>10 </head>11 <body>12 <h2>第一个标题</h2>13 <p>第1个段落</p>14 <h2>第二个标题</h2>15 <p>第2个段落</p>16 <h2>第三个标题</h2>17 <p>第3个段落</p>18 </body>19 </html>
原标题:CSS3基础学习之选择器篇
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。