细说C3选择器

最新推荐文章于 2023-05-14 15:02:35 发布

weixin_34119545

最新推荐文章于 2023-05-14 15:02:35 发布

阅读量214

点赞数

原文链接：https://segmentfault.com/a/1190000005716073

版权

今天介绍一下，css选择器和选择器的优先级。

一、选择器

更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cs...
下面单独说一下容易混淆的内容：

element>element 和 element element的区别：
```
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。    
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。    
```
加>的表示单纯的父子级关系，而不加>的为祖先关系，祖先关系包含父子级关系。这里很好理解，就不再展开说明了。
a标签的四个伪类：link，visited，hover，active
link：链接未被访问
visited：链接已经被访问过
hover：鼠标悬停在a标签
active： a标签被鼠标按着时

这四个伪类在书写时，要按照一定的顺序：lvha，这是因为css中规定，同等优先权的样式，写在后面的会覆盖前面的。可以利用love和hate来记忆。

注意区分nth-child(n)和nth-of-type(n)

p: nth-child(n) //p标签且为第n个子元素
p: nth-of-type(n) //第n个p标签

这个还是非常有必要详细展开的。

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

nth-child()用法

在这段代码中p:nth-child(2)表示p元素且为第二个子元素，p元素的父级为body，所以“第一个段落”的p标签为第二个子元素。将第二个子元素改为div，那么来看如下的代码：

nth-child()用法

发现p:nth-child(2)所寻找的元素不存在。因为不满足第二个条件。

再来说说nth-of-type(n)，这个比较理解，因为它的判断条件只有一个，第n个元素，我们将上面这段代码变换如下：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<div>第一个段落。</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

nth-of-type(n)的用法

那再来一段比较两者的代码：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background: yellow;
}
p:nth-of-type(2)
{
background: blue;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

nth-of-type(n)与nth-child(n)的用法比较

这样就能很清楚的看出两者的区别了。

二、选择器的优先级

在w3school中并没有给各个选择器名字，在css权威指南一书中，给出了选择器的名字，如通配选择器*{}，id选择器#id{}，class选择器.class{}，等等。

我们可以通过多个选择器给一个目标元素添加样式，如可以用通配选择器给所有元素一个border值，可以用div{}给所有div一个border值，还可以通过它的class名id名或者它的父级来设置border，那问题来了，这么多border，它要取哪个呢？

选择器的优先级，目前在网上来看有两种方法，但遵循的规则是一样的，即采用加权的计算方法，!important > id选择器 > class选择器 > 其他选择器。

!important 并不推荐使用，但存在就有存在的理由，但凡出现!important，均以!important为准，那要是出现多个呢？以最后一个为准。

可以给上述的选择器一个权值，如下（当然也可以自己设置一个权值，这个权值不易过小）


```
!important     --  1000
id选择器        --  100
class选择器     --  10 
其他选择器      --  1 
```

另外一种方法是，


```
!important ： id选择器 ： class选择器 ： 其他选择器

eg.
    1 : 0 : 0 : 0
    0 : 1 : 0 : 1
    0 : 0 : 1 : 0
    0 : 0 : 0 : 1
```

这里的比较大小怎么计算就很好看出了，从左向右比较，先比较左边第一位，相同则比较下一位，直到出现不同，较大的优先级高。上面中的例子eg，是优先级由大到小排列。

如果觉得还不错，就点一下下面的推荐吧，有什么问题，欢迎在下面的评论区留言~~

weixin_34119545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
细说C3选择器

今天介绍一下，css选择器和选择器的优先级。一、选择器更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cs...下面单独说一下容易混淆的内容：element>element 和 element element的区别：element element | di...
复制链接

扫一扫