css 偶遇

css 继承 选择器 伪类 伪元素

css 继承

• 属性不能继承的
  
  • padding; margin; border; display; float; position; height…像这些内边距、外边距、边框、浮动、定位和高都是不可继承的。
• 属性可继承的
  
  • width; font; color; list-style; border-collapse; …像父盒子的宽、字体、 列表style样式、还有表格的一些样式是可以被继承的。
• 1：超链接a标签不能继承文字颜色 (自己的颜色给父元素中的颜色层叠掉)
  2：标题标签不能继承font-size;

css 选择器

• !important > 行内样式> id > class > node—10000 > 1000 > 100 > 10 > 1 这里的数字知识抽象的比喻,并不是说10*10 = 100(十个class类名权重可以高过一个id选择器)
• 特点
  
  • 权重会叠加;
  • 继承的权重(优先级)为0;
• ID 选择器
  
  • 写法注意 —– 命名ID名时最好使用驼峰命名方法;
• 类 选择器
  
  • 写法注意 —– 使用-或_ 将class 名字连接;例如:header-banner或header_banner 但是由于现在前端引入的框架中的css会使用-连接class,所以我们自己在开发中尽量使用_连接名字自己的class类名.
  • 使用注意 —– 尽量提取公共类;这样可以优化自己的css 代码,避免加载重复代码;
  • 使用注意 —– 需要给同一个标签的子集添加特定样式时:可以使用active或first或last或item_li;
  • 使用注意 —– 当html 模版需要被后台(php)从新渲染加工时;可以“`使用 JS 来动态的给标签设置特殊的样式,因为如果直接使用active 或 first类名时,会导致后台循环从新循环加工页面时,导致active类名无法被循环出来亦或者给没个循环的标签都会加上active类名.
• 标签 选择器
  -使用注意 —– 尽量避免 直接使用 标签选择器,以免造成不必要的样式层叠;

• 复合 选择器

  • 交集 选择器

      p .item_text{ color:blue;}    /* 选中class="item_text"的p元素 */ 
    
      <p>我是一个p元素</p>    /* 不会被选中 */
    
      <p class="item_text">我是一个class="item_text"的文本元素</p>    /* 选中该行 */

  • 并集 选择器

    .box, p, span{color:yellow;}
    <div class="box">我是一个div元素</div>
    
    <p>我是一个p元素</p>
    
    <span>我是一个span元素</span>
    以上三个标签都会被选中设置字体颜色为yellow;

  • 后代 选择器

    • 写法注意 —– 尽量不要写超过三层的后代选择器以免权重过高;

    • 所有后代

      .box p{color:blue;}
      <div class="box">
         <p>我是儿子p元素</p>
         <span>
             <p>我是孙子p元素</p>
         </span>
      </div>
      以上两个 p 元素的color都被设置成蓝色;

    • 直接后代

      .box > p{color:blue;}
      <div class="box">
         <p>我是儿子p元素</p>
         <span>
             <p>我是孙子p元素</p>
         </span>
      </div>
      以上 儿子p元素 color 会被设置为蓝色; 而孙子p元素则不会;

  • 属性 选择器

    E[attr] { sRules } ----- 选择有attr属性E元素会被选中;
    <div att="">我是一个div元素</div>;
    E[attr$="val"] { sRules } ----- 选择有attr属性且属性值以val开头的的E元素;
    <div att="valabc">我是一个div元素</div>;
    E[attr*="val"] { sRules } ----- 选择有attr属性且属性值包含val的E元素;
    <div attr="aaavalbbb">我是一个div元素</div>;
    E[attr^="val"] { sRules } ----- 选择有attr属性且属性值以val卡头的E元素;
    <div attr="valbbb">我是一个div元素</div>;
    E[attr|="val"] { sRules } ----- 选择有attr属性且属性值且 用```-```连接的;属性值仅为val也会被选中;
    <div attr="val">我是一个div元素</div>;/* 选中*/
    <div attr="val-bbb">我是一个div元素</div>;/* 选中*/
    <div attr="valbbb">我是一个div元素</div>;/*未选中*/
    E[attr~="val"] { sRules } ----- 选择具有attr属性且属性值为一用空格分隔的字词列表;其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
    <div attr="b">我是一个div元素</div>; /* 未选中*/ 
    <div attr="a">我是一个div元素</div>;/* 选中*/
    <div attr="a b">我是一个div元素</div>; /* 选中*/
    E[attr="val"] { sRules } ----- 选择具有attr属性且属性值为val的E元素;
    

  • 相邻兄弟 选择器

    span + p
    <div>;
            <span>我是一个sapn元素</span>
            <p>我是一个p元素</p>/* 选中*/
            <div>;
                    <p>我也会死一个p元素</p>/* 未选中*/
            </div>;
    </div>;

css 伪类

• 伪类 可以理解为不是真正的类;
• a:link{} 超链接未访问的样式
  a:visited{} 超链接访问过后的样式
  a:hover{} 鼠标放到超链接上的样式
  a:active{} 链接激活的样式
  :focus 获取焦点的样式

伪元素

• :before & :after (最新h5语法将单冒号:定义为伪元素;将双冒号::定义为伪类)
• 双伪元素 清除浮动方法;
  
.clearfix:before, .clearfix:after {
content: "";
display: table;
};
.clearfix:after {
clear: both;
};
.clearfix {
*zoom: 1; /*IE/7/6*/
};

• 免费送一个 伪元素 妙用连接
  
  • 伪元素布局 —– 一个DIV的CSS艺术 ;