黑马程序员技术交流社区

标题: 手把手教你玩转CSS——基础选择器及CSS三大特性 [打印本页]

---

作者: 沐夕风    时间: 2018-9-17 16:38
标题: 手把手教你玩转CSS——基础选择器及CSS三大特性
CSS选择器选择器的作用

​        找到特定的HTML页面元素

CSS基础选择器1、 标签选择器

• 概念：
  标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
• 语法：
  
  

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• 作用：
  标签选择器 可以把某一类标签全部选择出来  比如所有的div标签  和 所有的 span标签
• 优点：
  是能快速为页面中同类型的标签统一样式
• 缺点：
  不能设计差异化样式。
• 2、类选择器
• 类选择器使用“.”（英文点号）进行标识，后面紧跟类名.
  • 语法：
    • 类名选择器
      
      
    .类名  {       属性1:属性值1;     属性2:属性值2;     属性3:属性值3;     }
    • 标签
      
      
    <p class='类名'></p>
  • 优点：
    
    
    • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
      
      
  我们可以给标签指定多个类名，从而达到更多的选择目的。
  
  

3、id选择器

id选择器使用#进行标识，后面紧跟id名

• 其基本语法格式如下：
  • id选择器
    #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 标签
    <p id="id名"></p>
    
• 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
  
  

4、[size=1.5em]通配符选择器

• 概念
  通配符选择器用*号表示，  *   就是 选择所有的标签      他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
• 其基本语法格式如下：
  
  

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {  margin: 0;                    /* 定义外边距*/  padding: 0;                   /* 定义内边距*/}

• 注意：
  会匹配页面所有的元素，降低页面响应速度，不建议随便使用
  
  

CSS三大特性
1、 CSS层叠性

• 概念：
  所谓层叠性是指多种CSS样式的叠加。
  是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
• 原则：
  
  
  • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
  • 样式不冲突，不会层叠
    
    

2、 CSS继承性

• 概念：
  子标签会继承父标签的某些样式，如文本颜色和字号。
  想要设置一个可继承的属性，只需将它应用于父元素即可。
  
  

简单的理解就是：  子承父业。

• 注意：
  
  
  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
    
    

3、CSS优先级（重点）

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

• 选择器相同，则执行层叠性
• 选择器不同，就会出现优先级的问题。
  
  

权重计算公式
继承或者 * 权重：0，0，0，0
每个元素（标签选择器）：0，0，0，1
每个类，伪类：0，0，1，0
每个ID：权重：0，1，0，0
每个行内样式 style="" 权重： 1，0，0，0
每个!important  重要的 权重：无穷大

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2