CSS选择器与声明冲突

CSS选择器

css选择器有，元素选择器、id选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器(不相邻兄弟)、并集选择器(群组选择器)、通配符选择器还有伪类选择器等在这里我i就介绍以下几种，伪类选择器在我的其它文章有介绍可自行查看。
1、元素选择器就是选中相同元素定义一个CSS样式。
2、id选择器具有唯一性，一个页面中相同的id只能出现一次。
3、类选择器可以对相同元素和不同元素定义相同的class属性，然后对拥有同一个class的元素进行css操作，class名前面必须加上前缀.(英文符号)，否则选择器无法生效。
4、后代选中器，就是1选中元素内部中所有的某一种元素，包括子元素和其他后代元素(如孙子元素)。
5、子元素选择器是指父元素直接包含子元素。
6、相邻兄弟选择器，用法AB元素之间没有其他任何标签兄弟元素A+兄弟元素B。
7、通用选择器(不相邻兄弟)，后者都选中兄弟A“~”B兄弟元素，选中A后面所有兄弟元素B。
8、并集选择器，两个选择器之间必须用英文逗号隔开(,)。
9、通配符选择器，选中页面所有,*(一般用于清楚内外边距)。
下面通过举个栗子，这样大家更好理解。

  <p id="content">Lorem, ipsum dolor.</p>
  <p class="content">Temporibus, sed earum.</p>
  <p >Tempore, minima facilis?</p>

CSS样式 1、2、3

/* 元素选择器 */
p{
    color:yellow;
}
/* id选择器 */
#content{
    color: red;
}
/* 类选择器 */
.content{
    color:orange;
}

HTML元素4 5：

      <!-- 子元素选择器 -->
 <div>
   <p>学习</p>
 </div>
<!-- 后代选择器 -->
 <div>
     <p>
       <span>加油</span>
     </p>
 </div>

CSS样式：

div>p{
    color:red;
}
div span{
    color:yellow;
}

并集选择器 ，举个栗子：

  <p>1234</p>
   <div>4567</div>
   <span>891011</span>

都给他们CSS样式设置相同：

p,
div,
span{
    color:red;
}

不相邻兄弟选择器和相邻兄弟选择器：

<p>1234</p>
  <p>0</p>
  <div>4567</div>
   <span>891011</span>
    <p>789</p>

不相邻：

p~p{
    color:red;
}

相邻：

/* 相邻兄弟 */
p+p{
    color:yellow;
}

声明冲突

声明冲突：是指多个选择器选中同一个标签，如果属性名相同属性不同则会产生冲突，如果发生冲突浏览器会触发自己的层叠机制。
层叠过程分成3个过程:依次从比较优先级、比较特殊性、比较原次序来触发层叠机制。
1、比较优先级：从来源和重要性比较。

来源	高低
浏览器	低
作者	中
用户	高

重要性(!important)：作者低 用户最高。
2、比较特殊性：从高到低 行内样式(1000)、id(0100)、类/伪类(0010)、元素/伪元素(0001)。
3、比较次序(就近原则)：如果前2个比较完后还不能分出胜负、就比较次序、浏览器是从上往下分析代码，后来的获胜。