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个比较完后还不能分出胜负、就比较次序、浏览器是从上往下分析代码,后来的获胜。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值