CSS选择器及优先级

CSS选择器及优先级
一、CSS1选择器

　　

CSS1选择器注：

注1：为什么要LVHA

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以说，a:hover定义一定要放在a:link、a:visited的后面。再重复一遍正确的顺序是：a:link、a:visited、a:hover、a:active .
```
注2：在谷歌浏览器中，a标签的herf中有内容时，a:link{color:blue}才有效，因为a:link会对拥有href=“ ”，即拥有实际链接地址的a对象发生效果。
```
二、CSS2选择器

补充：1、复合选择器（交集选择器）

　　--作用：

　　　　-可以选中同时满足多个选择器的元素

　　--语法：　

　　　　-选择器1选择器2选择器N{}

　　　2、否定伪类

　　--作用：
　　　　-可以从已选中的元素中剔除出某些元素

　　--语法　　

　　　　：not（选择器)

注1：

[target = _black],选择有target属性并且属性值是_black,没有其他值
1. 例如： [title=demo]{ background: yellow; } <p title="demo">p1</p> //有效 <p title="demo demo11">p2</p> //无效，title多了demo11这个值，若换成注2中的方法就可以
注2：
1. [title ~= demo]{ background: yellow; } <p title="demo demo1">p1</p> //有效 <p title="demo22">p2</p> //无效，[title ~= demo]是说title属性包含demo这个词，属性值之间用空格分隔的单词,demo22就不是demo这个词了，尽管包含demo，所以上面表格中说的包含单词demo需要理解清楚。
三、CSS3选择器

注1：first-child 和 first-of-type

CSS2选择器中有个：first-child

div:first-child{ outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; color: rgb(0, 153, 0);"> red; }//无效，因为<div>1</div>并不是body元素的第一个子元素
<body>
    <p>0</p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

CSS3选择器中有个：first-of-type

div:first-of-type{/*改*/ outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; color: rgb(0, 153, 0);"> red; }//有效，因为<div>1</div>是body元素的子元素中所有div的第一个

同理：last-child和last-of-type一样

注2：:only-child 和 :only-of-type
```
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p>4</p>
</body>

p:only-child { //无效，p不是body的唯一子p元素
    background: red;
}

p:only-of-type{//有效，p是body的唯一一个p子元素
    background: red;
}
```
注3：:nth-child(n) 和 :nth-of-type(n)
```
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p>4</p>
</body>

p:only-child { //无效，p不是body的唯一子p元素
    background: red;
}

p:only-of-type{//有效，p是body的唯一一个p子元素
    background: red;
}
```
body p:nth-child(2){ background: red; }//无效，body中第二个元素是<div>2</div>，不是p元素，此选择器无效。

补充：关于body p:nth-child(2)，如果body中的第二个元素是p元素则有效，如果不是p元素，则无效；若是body :nth-child(2)，则选中body中第二个元素。

body p:nth-of-type(2){ background: red; }//有效，效果如下图，因为<p>5</p>是body中第二个p元素

同理 :nth-last-child(n)和:nth-last-of-type(n)一样
1. 注4：根元素选择器
2. :root这个选择器没什么意思，和你直接使用html一样
3. :root {...}
4. html {...}
  
  伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
  
      那么问题来了，什么是伪类？什么是伪元素？
      首先，阅读 w3c 对两者的定义：
          CSS 伪类用于向某些选择器添加特殊的效果。
          CSS 伪元素用于将特殊的效果添加到某些选择器。
  
      可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西
其他内容，详见https://blog.csdn.net/q1056843325/article/details/53189526

css选择器优先级顺序

当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢？

定义的属性有冲突时，浏览器会选择用那一套样式呢，下面来介绍一下选择器的优先级。

一、css选择器优先级

不同级别
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式（优先级1000）
3. id选择器（优先级100）
4. 类选择器、伪类选择器（优先级10）
5. 元素选择器（优先级1）
6. 通配符选择器（优先级0）
7. 浏览器自定义或继承（没有优先级）
总结排序：!important > 行内样式 > ID选择器 > 类选择器、伪类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同

总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，

例如：

　　#box1 div{}(优先级为100+1=101）和#box1{}（优先级为100），那么两个选择器优先显示的是第一个选择器的样式，因为它的优先级高

但是注意，选择器优先级就算不会超过它的最大数量级,也就是说无论多少个选择器在一起，优先级也不会超过只有一个高级优先级选择器的优先级

并集选择器的优先级是单独计算的

div,p,#p1{}

可以在样式的最后，添加一个important,则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式

例1、

test.css文件
```
#my{background:blue;}
```
html文件
```
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*这里是内部样式*/
#my{background:red;}
</style>
<span id="my">333</span>
```
执行结果：span最后为红色。

说明css引入方式优先级：内部样式表 > 外部样式表

例2、
```
 <link rel="stylesheet" type="text/css" href="./css/test.css">
 <style>#my{background:red;}</style>
 <span id="my" style="background: yellow">333</span>
```
执行结果：span最后为黄色。

说明css引入方式优先级：内联(行内)样式 > 内部样式表 > 外部样式表

二、复杂选择器优先级，后代选择器优先级多种情况

有时候当我们写样式的时候会用到好多个后代样式，那么优先级的情况是什么情况呢。来看几个例子。

我这里举的例子有点少，如果你在学习，你可以多自己写几个例子看看效果。

1、 id个数多的优先级高
```
#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}
<br>//下面span标签的颜色是蓝色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的颜色</span>
　　　　</div>
　　</div>
```
2、id个数相等的看class个数，class越多优先级越高
```
/*这个例子和题目不符，目的是为了让你看一下，这个span标签的样式是红色的。 
虽然第三个样式的class个数多，但是他这个样式的span标签的样式是继承的，看第一个的总结，
他的优先级是最低的。所以他没有选中的优先级高。这里我就不写了，自己在第三个样式p的后面在写上一个span标签。
你会发现他的样式优先级是最高的。*/
#box .head span{
    color:blue;
}
#box .head span{
    color:red;
}
#box .head .p{
    color:deeppink;
}
<div class="box" id="box">
    <div class="head">
        <p class="p"><span>我的颜色</span></p>
         
    </div>
</div>
```
3、id和class个数相等，看元素个数，个数越多优先级越高。
```
//颜色应用的是第一个的样式，粉色
#box .head p span{
　　color:deeppink;
}
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}
 
<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的颜色</span></p>
　　</div>
</div>
```
4、优先级相同，后面的样式会覆盖前面的样式，不分先后顺序，只看选择器类型和个数。
```
//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
    color:red;
}
#box div .p span{
    color:blue;
}
 
<div class="box" id="box">
    <div class="head" id="head">
        <p class="p" id="p"><span>我的颜色</span></p>
    </div>
</div
```
文章引用于：https://www.html.cn/qa/css3/13543.html、https://blog.csdn.net/wangchaohpu/article/details/82413850
相关阅读:
产生随机不重复ID
.NET 中使用 SQlite 数据库_1.新数据库的创建
 WCF 服务IIS部署 SvcUtil.exe 工具文件地址及生成代理类命令
 查看进程占用各字段含义
 内存溢出
 Python 正则表达式使用问题集锦
 Ninja编译过程分析
 git 命令使用集锦
 使用aapt查看当前apk的属性
 Android PowerManager电源管理（Android N ）
原文地址：https://www.cnblogs.com/webpon/p/13445297.html

CSS选择器及优先级

css选择器优先级顺序