选择器

Posted 2020-08-24 monica123456

1，类选择器 <span class="stress">文本</span>   设置样式 .stress{}

2，ID选择器 <span id="stress">文本</span>  设置样式 #stress{}

相同点：可用于任何元素

不同：1，ID选择器只能用一次，类选择器可用多次  2，类选择器列表可为一个元素设置多个样式，而ID不可以

 

3，子选择器  .food>li{} 类food下的子元素li设置样式

4，包含（后代）选择器 .food li{} 

不同：子选择器是指直接后代，后代选择器是指所有后代

 

5，通用选择器 A{}  所有标签都设置

6，伪类选择器 a:hover{} a标签鼠标滑过的状态设置

7，分组选择符 h1,span{}

 

继承性  p{}  <p>........<span>....</span>....</p>  颜色，字号可继承，而border，solid不可继承

特殊性：同一元素有多个CSS样式时，使用权值最高的CSS

权值规则：    p   --------1

                  p span-----1+1=2

                  .css--------10

                  p span .css----1+1+10=12

                  #foot .note p ------100+10+1=111

层叠：同一元素具有多个CSS样式且权值相等，就近（后面的CSS）原则

重要性：p{color:red!important;}

           p{color:green;}

          此时执行第一个语句