CSS基础之选择器及优先级

Abner_木木

于 2021-05-19 23:27:06 发布

阅读量71

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43401689/article/details/117049230

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

属性选择器div[width=100px]

https://www.w3school.com.cn/cssref/css_selectors.asp

优先级

  !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
     #  100级别
     .  []  :nth-child(2)   三者同级别 为 10级别  但是再多的10也没有100级别大
    通配符 *和  +  ~  >    没有权重  0也就是说有和没有不影响 优先级 
    比如  div p   和 h1+p

<html>
<head>
<style type="text/css">

h1+p
{
background-color:pink
}
div p
{
background-color:red
}
</style>
</head>

<body>
<div>这是 div
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。</p>
</div>

</body>
</html>

以下图片中p的背景颜色是red还是pink以最后样式是 div p 还是 h1+p为准
在这里插入图片描述

伪类

:nth-child(2)
:first-child
:first-type
以下代码p:first-child选择的是：是p元素而且p元素是其父元素的第一个子元素。因此没有选到该元素。

<!DOCTYPE html>
<html>
<head>
<style> 
p:first-child
{
background:#ff0000;
}
</style>
</head>
<body>

<li>第一个段落。</li>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>