CSS的选择器

css a'ゞ『完美』 3年前 (2016-06-15) 1800次浏览 已收录 扫描二维码

导语:

今天去面试了,嗯,有笔试题,做着做着突然看到了选择器优先级,顿时糟了,说实话,这个优先级的概念我是知道的,不吹嘘啊,真的知道,只不过我一般都是用 Chrome 直接看哪条样式起作用了,久而久之就忘记了,嗯,就是酱紫的!今天来复习下。

CSS 选择器列表

css选择器有标签选择器、类选择器、id 选择器、通用选择器等等(这些算是基础的,相信大家都知道)
1.标签选择器
html 页面由很多个标签组成,通过标签选择器可以对某类标签应用相应的样式,如果对 p 标签应用下面的样式,那么页面中所有的 p 标签都会生效。

p{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

2.类选择器
类选择器是css非常常用的选择器,在 html 中可以为某个标签增加 class 属性后,就可以使用类选择器给这个标签添加样式了,比如我给一个 div 标签加了一个名字为 box 的 class,选择符是:“.”。

.box{
	width: 200px;
	height: 200px;
	background: red;
}

3.id 选择器
id 对我来说不常用,在 html 中可以为某个标签增加 id 属性后,就可以使用 id 选择器给这个标签添加样式了,比如我给一个 div 标签加了一个名字为 box 的 id,选择符是:“#”。

#box{
	width: 200px;
	height: 200px;
	background: red;
}

4.通用选择器
它很强大,意思就是可以选择全部的标签,不管加有没有加 class 和 id,然而,正因为它很强大,所以限制了它的灵活性,实际用的很少,就我来说,我也就是初学的时候用来清除所有的外边距和内边距用过。因为*是选择全部,所以消耗性能,新手看到这,我也不是说不对,只是看你愿不愿意牺牲性能了。还有就是*因为是全部,而有时候我们可能需要保持某些元素的 mrgin 和 padding,所以就有些得不偿失了,还有些元素根本没有默认的 magin 或者 padding,用不着清。

*{
	margin: 0;
	padding: 0;
}

5.分组选择器
在使用选择器时,有的元素样式是一样的,每次都为不同的选择器单独定义样式的话太繁琐,这时我们便可以使用分组选择器集中定义样式。不同标签或类或 id 以逗号隔开。选选择符:“,”。

p,.box{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

6.子选择器
当我们想让父元素下的某个子元素表现为特定的样式时,我们可以用子选择器。选择符:“>”。

.box>p{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
}

7.后代选择器
如果我们不但想找子元素,还想要找孙子元素呢,我们可以用后代选择器。这样他下面的所有 p 标签都会选中,选择符空格:“ ”。

.box p{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
}

8.相邻兄弟选择器
如果一个 div 后面紧跟着 p 标签,要选中这个 p 标签我们可以用兄弟选择器,他选择紧跟着当前元素后面的元素,选择符:“+”

div + p{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
}

我之前写过一个小 demo,用到了相邻选择器和 CSS3 中与用户界面有关的伪类选择器 E:checked
相邻选择器
接下来这些选择器就需要分版本了,css2.1 和css3(下列出现的 E 代表元素,可以是标签,可以是类,可以是 ID)

CSS 2.1 的属性选择器

E[att]
匹配所有具有 att 属性的 E 元素,不考虑它的值。(注意:E 在此处可以省略,比如“[cheacked]”,标识选择所有具有此属性的元素。)

<p title="我有 title 属性">随便写写</p>
p[title]{
	color: red;
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
}

E[att=val]
匹配所有 att 属性等于“val”的 E 元素

<div class="box"></div>
div[class="box"]{
	width: 200px;
	height: 200px;
	background: red;	
}

E[att~=val]
匹配所有 att 属性具有多个空格分隔的值、其中一个值等于“val”的 E 元素
比如我的 div 有多个 class,这时候用上面的div[class=”box”]就不起作用了

<div class="box div1 div2 div3"></div>
div[class~="div1"]{
	width: 200px;
	height: 200px;
	background: red;	
}

E[att|=val]
匹配所有 att 属性具有多个连字号分隔(-)的值、其中一个值以“val”开头的 E 元素

<div class="div-1 div-2">匹配所有 att 属性具有多个连字号分隔(-)的值、其中一个值以“val”开头的 E 元素</div>
div[class|=div]{ 
	color:#f90;
}

属性选择器有个特点是可以满足多个条件的选择

<div class="box-s div1 div2" title="神经病">
	啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
div[class~="div1"][class|=box][title]{
	width: 200px;
	height: 200px;
	color:#f90;
	background: #e5e5e5;
}

CSS3 的属性选择器

E[att^=”val”]
属性 att 的值以”val”开头的元素

<div class="b1 b32 box">
	属性 att 的值以”val”开头的元素
</div>
div[class^="b"]{
	color: green;
}

E[att$=”val”]
属性 att 的值以”val”结尾的元素

<div class="123b 456b 789b">
	属性 att 的值以”val”结尾的元素
</div>
div[class$="b"]{
	color: yellow;
}

E[att*=”val”]
属性 att 的值包含”val”字符串的元素

<div class="1b2 3b4 5b6">
	属性 att 的值包含”val”字符串的元素
</div>
div[class*="b"]{
	color: blue;
}

CSS2.1 中的伪类

E:first-child
这个选择器有点绕,首先选择子元素,然后这个子元素是 p 标签的元素

<div class="boxs">
	<p>111111</p>
	<p>222222</p>
	<p>333333</p>
</div>
p:first-child{
	color:#f90;
}

剩下的就是:

匹配所有未被点击的链接                                  a:link(lo)
匹配所有已被点击的链接                                  a:visited(ve)
匹配鼠标悬停其上的 E 元素                                 a:hover(ha)
匹配鼠标已经其上按下、还没有释放的 E 元素                  a:active(te)

组合起来就是 love(爱)hate(恨)的意思!
E:focus
匹配获得当前焦点的 E 元素

<input type="text" class="foc_in" value="获得焦点就变红" />
.foc_in:focus{
	color: red;
}

CSS3 中与用户界面有关的伪类

E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
兼容性 IE9+

<input type="text" value="可以用" />
<input type="text" disabled="disabled" value="禁用了" />
input:enabled{
	color: blue;
}
input:disabled{
	color: red;
}

E:checked
匹配表单中被选中的 radio(单选框)或 checkbox(复选框)元素
兼容性 IE9+
demo 在讲相邻选择器那里。

<label>选中
	<input type="checkbox" checked="checked" value="1" />
</label>
<label>未选中
	<input type="checkbox" value="0" />
</label>
input:checked{
	width: 50px;
    height: 50px;
}

E:before 在 E 元素之前插入生成的内容
E:after 在 E 元素之后插入生成的内容

<div class="con">中间</div>
.con:after{
	content: "后面";
}
.con:before{
	content: "前面";
}
利用伪元素做成的心

CSS3 中的结构性伪类

nth-child 选择器之视觉差

CSS 优先级的计算规则如下:

首先!important 是例外的,他的优先级最高,只要有!important 那它所在的那条样式属性的优先级就最高。
就是:

.box{
	width:200px;
	height:200px;
	color:red !important;
}

这时候只有 color:red 是最高的优先级,而 width 和 height 还是可以通过其他优先级进行覆盖的。
元素标签中定义的样式(style 属性),加 1000
每个 ID 选择符(如 #id),加 100
每个 Class 选择符(如 .class)、每个属性选择符(如 [attr=“val”])、每个伪类(如 :hover)加 10
每个元素选择符(如 p)或伪元素选择符(如 :firstchild)等,加 1
然后,将这四个数字分别累加,就得到每个 CSS 定义的优先级的值。
然后比大小。
最后一般人不知道的一个优先级:animation(css3 动画的优先级高于!important)
总要把干货留给坚持到最后的人 :lol:
多敲敲,自己写写代码测试测试,多折腾,就熟练了,优先级的问题很好解决的,Chrome 控制台直接就看出来了。·

参考资料

css 选择器 css 选择器优先级
结束语:
还有些选择器,我就不一个个写了,我也用的很少。
累了一天了,洗个澡睡觉。


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CSS 的选择器
喜欢 (16)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜