css中选择器怎么用
一、类选择器
class元素可以有多个值,中间用空格隔开。一个文件中,可以有多个相同的class值。
<p class="first done"></p>
样式:
.first{ background-color: red; }
二、ID选择器
#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。
(推荐学习:CSS视频教程)
<p id="polite"></p>
样式:
#polite{ text-transform: uppercase; }
三、通用选择器
* 允许选择一个页面的所有元素。
<p></p>
样式:
* { text-decoration: line-through; }
四、属性选择器
1:存在和值属性选择器(presence and value)
分为三种情况:属性名存在;属性名存在并且有对应的值;属性名存在并且包含对应的值。
[attr] 只要包含该属性即可。不论是否有值,不论值为何。
<p data-fruit></p>
样式:
[data-fruit]{ color: green; }
[attr=val] 包含该属性,并且值也相等。
<p data-fruit="apple"></p>
样式:
[data-fruit="apple"]{ color: red; }
[attr~=val] 包含该属性,并且该属性中至少有一个值为val。
<p data-fruit="apple banana"></p> <p data-fruit="apple"></p>
样式:
[data-fruit~="apple"]{ color: blue; }
上面两个标签都会被匹配到。
2:子串值属性选择器(substring value 也叫伪正则)
[attr|=val] 包含attr属性,并且值为value,或者值是以val- 这样的形式开头。
[attr^=val] 包含attr属性,并且值以val开头。
[attr$=val] 包含attr属性,并且值以val结尾。
[attr*=val] 包含attr属性,并且值中包含子字符串val。
五、伪类(pseudo-class)
以:作为前缀,被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上伪类。
比如让超链接,访问前后样式一致,同时鼠标悬停时不一致。
a:visited{ color: blue; } /** 选择器上的逗号不能省略* /a:hover, a:active, a:focus{ color: red; text-decoration: none; }
比如当一个列表的偶数行和奇数行的背景不同
<ul> <li><p>这是第一行</p></li> <li>p>这是第一行</p></li> <li>p>这是第一行</p></li> <li>p>这是第一行</p></li> </ul> li:nth-of-type(2n){ background-color: red; } li:nth-of-type(2n+1){ background-color:blue; }
这里的nth-of-type() 是匹配兄弟节点。因此不能写成p:nth-of-type。另外如果使用的是nth-child()的话,它匹配的也是兄弟节点。虽然看名字像是一个孩子节点。
六、伪元素(Pseudo-element)
通过::这样两个冒号前缀,组合关键字,添加到某个元素的后面,去选择该元素的某个部分。
<a href="http://www.xxx.com">xxx</a> a::after{ content:"后面追加内容"; }
或者
[href^="http"]::after{ content:"后面追加的内容"; }
七、组合器
名称 | 组合器 | 选择 |
---|---|---|
选择器组 | A,B | 匹配A或B的任意元素 ,或者匹配A和B |
后代选择器 | A B | B是A的后代节点,匹配B |
子选择器 | A>B | B是A的直接子节点,匹配B |
相邻兄弟选择器 | A+B | B是A的下一个兄弟节点,B紧跟A,匹配B |
通用兄弟选择器 | A~B | B是A之后的兄弟节点中的任一个,匹配B |
八、选择器层叠
casecase (层叠),规则:
importance
specificity
source order
放在代码后面的样式,会覆盖较早的样式。
id和class选择器优先于element选择器。
!important 具有最高优先级。
用户重要>开发者重要>开发者普通>用户普通样式>用户代理样式。
!important > id > class > element
通过style=" "的方式声明的样式,专用性最高。
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!
以上就是css中选择器怎么用的详细内容,更多请关注0133技术站其它相关文章!