高手请进!关于CSS中class选择器使用多种样式的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高手请进!关于CSS中class选择器使用多种样式的问题相关的知识,希望对你有一定的参考价值。

在网上下了一些js的下拉菜单的特效 发现源码里存在一个class内使用多个样式,比如<div class="style1 style2"></div> 不理解这种方法 而在外面定义的css中只存在“style1”和“style2”这两种样式。我修改了引用的样式(<div class="style1"></div>或<div class="style2"></div>)发现都达不到原来的华丽效果了。 所以就想请高手讲解一下~

这是class类别选择器的一种简单应用,class="style1 style2"也就是使用style1与style2所有样式的并集,但是需要注意的是:这个是有顺序的,class="style1 style2"首先载入style1里面的样式,然后再载入style2的,如果style1与style2里面有相同的属性,但是他们的值不同,比如:style1里面有color:red;而style2里面有color:green;那么最终的值就是后面的那个color:green;,如果你要使用(<div class="style1"></div>或<div class="style2"></div>)这样的样子,只需把二者里面的内容放到一个里面就行了,顺便注意一下前面说到的问题就行了 参考技术A 看个例子,你就知道了. <style type="text/css">
.u1text-decoration:underline
.u2border-bottom-style: double
</style>
<span class="u1">单下划线</span>
<span class="u2">双下划线</span>
<span class="u1 u2">三下划线</span>你复制运行下看看。
参考技术B class="style1 style2"表示同时应用style1 style2,如果你改成了<div class="style2"></div>就只应用了style2了,效果肯定有差别啊

关于CSS (Cascading Style Sheets)

CSS规则

包含选择器和声明块

选择器:选中元素
1. 元素选择器(h1,p,a,span...)
2. id选择器(#选择器名称)唯一的  在html中的写法:id=选择器名
3. 类选择器(.选择器名称)在html中的写法:class=选择器名

声明块:出现在大括号中
声明块中含多个声明,声明以分号结束
每一个声明表达了某一方面的样式(如:背景颜色,字体颜色等属性)

添加样式的方法

1. 内部样式表(在head里面插入style标签)
2. 外部样式表(在head里面使用link标签插入css文件链接(相应属性写在此独立文件中))
3. 内联样式表(在html中的各个标签中写style的相应属性)
推荐用第二种,原因:1.可以解决多个页面样式重复的问题
                   2.有利于浏览器缓存,从而提高页面响应速度
                   3.有利于把html和css代码分离,更容易阅读和维护
                   

CSS常见的样式声明

1. color:元素内部的文字颜色(预设值(定义好的单词),三原色(红绿蓝,每个颜色用0-255之间的数字来表达))
       rgb表示法:rgb(红,绿,蓝)
       十六进制表示法:#红绿蓝
2. background-color:元素背景颜色
3. font-size:元素内部文字的尺寸大小
        单位:px(像素) 绝对单位
              em 相对单位(相对于父元素的字体大小)
        每个元素必须有字体大小,若没有声明,则使用父元素的字体大小。若没有父元素(html),则使用基准字号。
4. font-weight:文字粗细程度,可取值数字,可取值为预设值。
5. font-family:文字类型(用户计算机中存在的字体才会生效) 
                一般使用多个字体来匹配不同环境
6. font-style:字体样式,通常设置为斜体。
        i元素:默认样式,斜体字体。实际使用中,通常用它表示图标(icon)
7. strong,em:默认加粗
8. text-decoration:文本修饰,给文本加线
   a元素,del元素和s元素默认自带线
9. text-indent:首行文本缩进
10. line-height:每行文本的高度(该值越大,每行文本的距离越大)
    设置行高为容器的高度,可让单行文本垂直居中。
    行高可设置为纯数字,表示相对于当前元素的字体大小(推荐使用)
11. width:宽度
12. height:高度
13. letter-space:文字间隙
14. text-align:元素内部文字的水平排列方式

选择器

帮助你准确的选中想要的元素

简单选择器: 1. id选择器
            2. 元素选择器
            3. 类选择器
            4. 通配符选择器(*) 
            5. 属性选择器([属性])
            6. 伪类选择器(选中某些元素的某种状态,如:hover(鼠标悬停状态),:active(激活状态,鼠标按下状态),:link(超链接未访问时的状态),:visited(超链接访问过的状态)) 
                         若同时都写上,则书写顺序为:link,visited,hover,active(记忆:love hated)
            7. 伪元素选择器(::before,::after,...)
                            xxx::before{
                              content:\'xxx\'
                            }
                            
                                                       
选择器的组合:1. 后代元素 -- 空格
             2. 并且
             3. 子元素 -- >
             4. 相邻兄弟元素 -- +
             5. 后面出现的所有兄弟元素 -- ~
            

选择器的并列:多个选择器,用逗号分隔  (语法糖)
 

有关层叠问题

 层叠:解决声明冲突的过程(浏览器自动处理(权重计算))
(声明冲突:同一个样式多次应用到同一个元素)
 解决过程:1.比较重要性(重要性从高到低:作者样式表中的!important样式。作者样式表的普通样式。浏览器默认样式表中的样式。)
          2.比较特殊性(总体规则:选择器选中的范围越窄越特殊。具体规则:通过选择器计算出一个4位数(千位:如果是内联样式则计为1,否则计为0。百位:等于选择器中所有id选择器的数量。十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数量。个位:等于选择器中所有元素选择器,伪元素选择器的数量。))
          3.比较源次序(代码书写靠后的)
 
 
应用:1.重置样式表(书写一些作者样式,覆盖浏览器的默认样式)
       常见的重置样式表:normalize.css,reset.css,meyer.css

有关继承问题

子元素继承父元素的某些css属性
通常,跟文字内容相关的属性都能被继承

属性值的计算过程

一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有css属性必须有值
属性值计算过程:一个元素从所有属性都没有值,到所有的属性都有值
过程的四个步骤:1. 确定声明值:参考样式表中没有冲突的声明,作为css属性
               2. 层叠冲突:对样式表有冲突的声明使用层叠规则(比较重要性,特殊性,源次序),确定css属性值
               3. 使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
               4. 使用默认值:对仍然没有值的属性,使用默认值
e.g:<div><a></a><p></p></div>
     div{color:red}
     a在参考样式表(浏览器默认样式表)中有声明了,所以a元素没有变为红色。而p没有声明,则继承了div的color属性,变为红色。
     
特殊的两个css取值:inherit(手动继承,将父元素的值取出应用到该元素)                 
                  initial(初始值,将该属性设置为默认值)   
     

盒模型

 box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
 盒子类型:1.行盒(display等于inline的元素)
          2.块盒(display等于block的元素)
          行盒在页面中不换行,块盒独占一行
  常见的块盒:容器元素,h1~h6,p...
  常见的行盒:span,a,img,video...
  
  盒子的组成部分:无论是行盒还是块盒,都由下面几个部分组成
  从内到外分别是:1. 内容(content):width,height,设置的是盒子内容的宽高
                  (内容区=内容盒)
                 2. 填充(paddig):padding-left/right/top/bottom,设置的是盒子边框到盒子内容的距离
                  (填充区+内容区=填充盒)
                 3. 边框(border):边框样式(border-style)+边框宽度(border-width)+边框颜色(border-color)
                  (边框+填充区+内容区=边框盒)
                 4. 外边距(margin):margin-left/right/top/bottom,设置的是边框到其他盒子的距离
                  

  盒模型应用:
  改变宽高范围:默认情况下,width和height设置的是内容盒宽高
  CSS3有个box-sizing属性
  box-sizing:border-box(改变宽高的影响)
  
  背景覆盖范围:默认情况下,背景覆盖边框盒
  可通过background-clip进行修改
  
  溢出处理:overflow控制内容溢出边框盒后的处理方式
  
  断词规则:word-break会影响文字在什么位置被截断换行
            
  空白处理(单行文本溢出部分打点):
  white-space:no-wrap
  overflow:hidden
  text-overflow:ellipsis
  
  
  
  行盒盒模型:
  常见行盒:包含具体内容的元素(span,strong,em,i...)
  特点:1. 盒子沿着内容延伸。
        2. 行盒不能设置宽高。
           调整行盒的宽高,应使用字体的大小,行高,字体类型,间接调整。
        3. 内边距(填充区)
           水平方向有效,垂直方向不会实际占据空间。
        4. 边框
           水平方向有效,垂直方向不会实际占据空间。
        5. 外边距
           水平方向有效,垂直方向不会实际占据空间。
       
       
   行块盒:
   display:inline-block
   特点:不独占一行
         盒模型中所有尺寸都有效
    
    
   空白折叠发生在行盒(行块盒)内部或行盒(行块盒)之间
   
   
   可替换元素和非可替换元素:
   非可替换元素:大部分元素,页面上显示的结果取决于元素内容。
   可替换元素:少部分元素,页面上显示的结果取决于元素属性。(img,video,audio...)
   (绝大部分可替换元素均为行盒。可替换元素类似于行块盒,盒模型中所有尺寸都有效)
   
   
   块盒:
   每个块盒的总宽度必须刚好等于包含块的宽度
   宽度默认值是auto
   margin的取值也可以是auto,默认值为0
   auto:将剩余空间吸收掉
   width吸收能力强于margin
   
   若宽度,边框,内边距计算后仍然有剩余空间,该剩余空间被margin-right全部吸收
   
   每个块盒垂直方向上的auto值:height:auto(适应内容的高度)
                              margin:auto(表示0)
   
   百分比取值:padding,宽,margin可以取值为百分比
   所有百分比相对于包含块的宽度
   高度百分比:包含块的高度是否取决于子元素的高度,设置百分比无效
              包含块的高度不取决于子元素的高度,百分比相对于父元素的高度
     
   上下外边距的合并:两个常规流块盒,上下外边距相邻,会进行合并
                    两个外边距取最大值
            

常规流

盒模型:规定单个盒子的规则
视觉格式化模型:页面中多个盒子排列规则
视觉格式化模型大体将页面中盒子的排列分为3种方式:
1. 常规流
2. 浮动
3. 定位

常规流(文档流,普通文档流,常规文档流)布局:
所有元素默认情况下都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块为其父元素的内容盒
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto


浮动:
应用场景:文字环绕,横向排列 
基本特点:修改float属性值为:left(左浮动,元素靠上靠左)
                            right(右移动,元素靠上靠右)
                            默认为none
         当一个元素浮动时,元素必定为块盒(会更改display属性为block)
         浮动元素的包含块和常规流一样,为父元素的内容盒
盒子尺寸:宽度为auto时,表示适应内容宽度
         高度为auto时,表示适应内容高度
         margin为auto时,为0
         边框,内边距,百分比设置与常规流一样
盒子排列:左浮动的盒子靠左排列
          右浮动的盒子靠右排列
          浮动盒子在包含块中排列时,会避开常规流盒子
          常规流块盒在排列时,无视浮动盒子
          行盒在排列时,会避开浮动盒子  
          外边距合并不会发生
若文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒
高度坍塌造成的原因:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
         解决方式:清除浮动(涉及css属性clear)
                  .clearfix::after{content:\'\'; display:block; clear:both}
                  
浮动的一些细节:浮动盒子的顶边不得高于上一个盒子的顶边
               若剩余无法放下浮动盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
    
    
定位:
手动控制元素在包含块中的精准位置(涉及css属性position)
position取值:static(默认值)
              relative(相对定位)
              absolute(绝对定位)
              fixed(固定定位)           
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:文档流中的元素摆放时,会忽略脱离了文档流的元素
                       文档流中元素计算自动高度时,会忽略脱离了文档流的元素              
相对定位:不会导致元素脱离文档流,只是让元素在原来位置上进行偏移(盒子的偏移不会影响其他盒子)
绝对定位:宽高为auto时,适应内容
          包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块。若找不到,则其包含块为整个网页(初始化包含块) 
固定定位:其他情况和绝对定位完全一样,而包含块不一样(固定为视口(浏览器的可视窗口))
定位下的居中(主要是绝对定位和固定定位):定宽(高)
                                       将左右(上下)距离设置为0
                                       将左右(上下)margin设置为auto                                  
绝对定位,固定定位元素一定是块盒
绝对定位,固定定位元素一定不是浮动
没有外边距合并

多个定位元素重叠时:堆叠上下文
                   设置z-index,通常情况下,该值越大,越靠近用户
                   只有定位元素设置z-index有效
                   z-index可以是负数,若为负数,则遇到常规流/浮动元素,将会被其覆盖
                    

其他选择器扩展

更多伪类选择器:first-child(选中第一个子元素)
               last-child(选中最后一个子元素)
               nth-child(选中指定的第几个子元素)
               nth-of-type(选中指定的第几个元素类型)
 
更多伪元素选择器:first-letter(选中元素中的第一个字母)
                 first-line(选中元素中第一行的文字)
                 selection(选中被用户框选的文字)
            

更多样式

透明度:opacity(设置整个元素的透明度,取值为0~1)
鼠标:cursor(取值pointer,auto,grab...)
     设置鼠标图片样式:cursor:url(\'xxx\'),auto
盒子隐藏:display:none
         visibility:hidden
背景图:属于css概念
       当图片属于网页内容时,必须使用img元素(HTML)
       当图片仅用于美化页面,必须使用背景图(CSS)
       背景图涉及的css属性:background-image(背景图图片)
                           background-repeat(背景图是否重复)
                           background-size(背景图大小)
                           background-position(背景图位置,可应用在精灵(雪碧)图)
                           background-attachment(背景图是否固定(相对于视口))
                           background-color(背景图和背景颜色混用)
       简写形式:background:background-color background-image background-position/background-size bakcground-repeat background-attachment...
       
设置body背景:画布(一块区域)
        特点:最小宽度为视口宽度
              最小高度为视口高度
HTML元素的背景:覆盖画布
若HTML元素有背景,BODY元素正常(背景覆盖边框盒)
若HTML元素没有背景,BODY元素的背景覆盖画布

关于body的背景图:有背景图的宽度百分比,相对于视口
                 有背景图的高度百分比,相对于HTML元素(网页)的高度
                 背景图的横向位置百分比,预设值都相对于视口
                 背景图的纵向位置百分比,预设值都相对于网页
       

@规则

@import "路径" (导入另外一个css文件)
@charset "utf-8"(告诉浏览器该css文件使用的字符编码集是utf-8,要写到css文件的第一行)

web字体和图标

web字体:解决用户电脑上没有安装相应的字体,强制让用户下载该字体
         制作新字体(使用@font-face指令):@font-face{font-family:\'newfont\',src:url(\'字体路径\')}  p{font-family:\'newfont\'}
字体图标(常用):网址:iconfont.cn

块级格式化上下文

简称BFC,它是一块独立的渲染区域,规定了该区域中,常规流块盒的布局。
常规流块盒的布局:
常规流块盒在水平方向上,必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻,则进行外边距的合并
常规流块盒的自动高度和摆放位置,无视浮动元素
BFC渲染区域:
此区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:根元素(<html>)
                                                     浮动和绝对定位元素 
                                                     overflow不等于visible的块盒
不同的BFC区域,它进行渲染时互不干扰
创建BFC的元素,他的自动高度需要计算浮动元素(副作用最小的创建方式为overflow:hidden)
创建BFC的元素,他的边框盒不会与浮动元素重叠  
创建BFC的元素,不会和他的子元素进行外边距合并 

布局

多栏布局:两栏布局,三栏布局
等高布局实现:CSS3的弹性盒
             JS控制
             伪等高(某一栏的height写大一点,然后加上margin-bottom,主区域溢出部分隐藏从而实现伪等高)
元素书写顺序:主区域代码靠前书写
后台页面布局:部分区域实现溢出滚动 
 

行高的取值(扩展)

1. px(像素值)
2. 无单位数字(行高为字体大小的几倍(先继承,再计算像素值))
3. em单位(行高为字体大小的几倍(先计算像素值,再继承))
4. 百分比(相当于em单位)
 

行盒的垂直对齐

多个行盒在垂直方向上的对齐:给没有对齐的元素设置vertical-align属性(有预设值和数值)
图片的底部白边:图片的父元素是个块盒,块盒高度自动,图片底部和父元素底部之间往往会出现空白
解决底部白边:设置父元素字体大小为0(有文字的话不建议使用)。设置图片为块盒(display:block) 

字体的参考线(扩展)

 一个字体,有5条线(从上到下):顶线,上基线,基线,下基线,底线(不同文字类型参考线不一样)
 
 决定参考线:font-size,font-family,line-height
 
 font-size:字体大小,设置的是文字的相对大小
 文字的相对大小:1000,2048,1024
 文字顶线到底线的距离为文字的实际大小(content-area 内容区)
 行盒的背景,覆盖content-area
 
 行高:顶线向上延伸的空间,和底线向下延伸的空间,两个空间相等,该空间叫做gap(空隙)
 gap默认情况下是字体设计者决定的
 top(顶线上面)到bottom(底线下面)叫做virtual-area(虚拟区/行高)
 错误说法:文字一定出现一行的最中间
 正确说法:content-area一定出现在virtual-area的中间
 
 vertical-align:一个元素如果子元素出现行盒,该元素内部也会产生参考线
 设置的值为baseline时表示该元素的基线与父元素的基线对齐
 设置的值为super时表示该元素的基线与父元素的上基线对齐
 设置的值为sub时表示该元素的基线与父元素的下基线对齐
 设置的值为text-top时表示该元素的virtual-area的顶边对齐父元素的text-top(文本顶边)
 设置的值为text-bottom时表示该元素的virtual-area的底边对齐父元素的text-bottom(文本底边)
 设置的值为top时表示该元素的virtual-area的顶边对齐父元素的顶边(该行中的最高顶边)
 设置的值为bottom时表示该元素的virtual-area的底边对齐父元素的底边(该行中的最低底边)
 设置的值为middle时表示该元素的中线(content-area的一半)与父元素的x字母高度一半对齐
 设置的值为数值时表示相对于基线的偏移量。向上为正数,向下为负数
 设置的值为百分比时表示相对于基线的偏移量。百分比时相对于自身virtual-area的高度
 行盒组合起来可以形成多行,每一行的区域叫做line-box。
 line-box的顶边是该行内所有行盒最高顶边,底边是该行行盒的最低底边
 实际上一个元素的实际占用高度(高度自动),高度的计算通过line-box计算。
 line-box是承载文字内容的必要条件,以下情况不生成行框(line-box):某元素的内部没有任何行盒。某元素字体大小为0。
 
 可替换元素和行块盒的基线:
 图片:基线位置位于图片的下外边距
 表单元素:基线位置在内容底边
 行块盒:行块盒最后一行有line-box,用最后一行的基线作为整个行块盒的基线
        若行块盒内部没有行盒,则用下外边距作为基线
 

堆叠上下文

是一块区域,这块区域由某个元素创建,他规定了该区域中的内容在z轴上排列的先后顺序。
创建堆叠上下文的元素:html元素(根元素)
                    设置了z-index(非auto)数值的定位元素
同一个堆叠上下文中元素在z轴上的排列(从后到前):1. 创建堆叠上下文的元素的背景和边框
                                              2. 堆叠级别为负值的堆叠上下文       
                                              3. 常规流非定位的块盒
                                              4. 非定位的浮动盒子
                                              5. 常规流非定位行盒
                                              6. 任何z-index是auto的定位子元素,以及z-index是0的堆叠上下文
                                              7. 堆叠级别为正值的堆叠上下文
每个堆叠上下文,独立于其他堆叠上下文,他们之间不能相互穿插
    

svg(扩展)

 可缩放的矢量图
 使用代码书写而成,缩放不会失真,内容轻量
 svg可嵌入浏览器,也可单独成为一个文件
 svg使用xml语言定义
 书写svg代码:<svg width=\'\' height=\'\' xmlns=\'xxxxxx\'>...</svg>
 矩形:<rect/>
 圆形:<circle/>
 椭圆:<ellipse/>
 线条:<line/>
 折线:<polyline/>
 多边形:<polygon/>
 路径:<path/>
 某些属性:fill(填充颜色)
           stroke(描边)
           stroke-width(描边的宽度)
           x,y(位置)
           width,height(宽高)
           cx,cy(圆形(椭圆)的中心点坐标)
           r(圆形半径)
           rx,ry(椭圆的短半径和长半径)
           x1,y1,x2,y2(线条的首尾坐标)
           points(折线(多边形)的点坐标)
           d(书写路径): M = moveto
                          L = lineto
                          H = horizontal lineto
                          V = vertical lineto
                          C = curveto
                          S = smooth curveto
                          Q = quadratic Bézier curve
                          T = smooth quadratic Bézier curveto
                          A = elliptical Arc(设值:半径1,半径2,顺时针旋转角度,小弧(0)大弧(1),顺时针(1)逆时针(0))
                          Z = closepath
           

数据链接(扩展)

data url
书写:将目标文件的数据直接书写到路径位置
语法:data:MIME,数据
意义:优点:减少了浏览器的请求
            有利于动态生成数据
      缺点:增加了资源的体积
            导致传输内容增加,从而增加单个资源的传输时间
            不利于浏览器缓存
            会增加原资源的体积到原来的4/3
应用场景:当请求单个图片体积较小,并且该图片因为各种原因不适合制作雪碧图,可使用数据链接
          图片由其他代码动态生成,并且图片较小,可使用数据链接

base64:一种编码方式
        通常用于将一些二进制数据,用一个可书写的字符串表示

浏览器的兼容性

厂商前缀:IE:-ms-
          Chrome,safari:-webkit-
          opera:-o-
          firefox:-moz-
         
浏览器在处理样式或元素时,使用如下方式:当遇到无法识别的代码时直接略过
 
css hack:根据不同的浏览器(主要针对IE),设置不同的样式和元素
样式:IE中,CSS的特殊兼容符号
      *属性:兼容IE5,IE6,IE7
      _属性:兼容IE5,IE6
      属性值\\9:兼容IE5~IE10
      属性值\\0:兼容IE8~IE11
      属性值\\9\\0:兼容IE9~IE10    
 IE5~IE7的外边距bug:浮动元素的左外边距翻倍
 IE的条件判断:<!--[if IE]>
                <p>
                    这是IE浏览器
                </p>
                <![endif]-->
                <p>
                    这是非IE浏览器
                </p>


两种解决兼容性问题的思路(会影响代码的书写风格):渐进增强和优雅降级
渐进增强:先适应大部分浏览器,然后针对新版本的浏览器加入新的样式
          书写代码时,先尽量避免书写有兼容性问题的代码,完成后再逐步加入新标准中的代码
优雅降级:先制作完整的功能,然后再针对低级版本浏览器进行特殊处理
          书写代码时,先不用特别在意兼容性,完成整个功能后,再针对低版本浏览器处理样式
          
 推荐网址:caniuse,可查看各属性在不同浏览器版本的兼容性
 

居中总结

水平居中:
行盒(行块盒)水平居中:直接设置行盒(行块盒)父元素 text-align:center

常规流块盒水平居中:定宽,设置左右margin为auto

绝对定位元素水平居中:定宽,设置左右的坐标为0(left:0,right:0),将margin设置为auto
(实际上,固定定位是绝对定位的特殊情况)


垂直居中:
单行文本的垂直居中:设置文本所在元素的行高为整个区域的高度

行块盒或块盒内多行文本的垂直居中:设置盒子上下内边距相同,达到类似的效果(没有完美方案)

绝对定位的垂直居中:定高,设置上下的坐标为0(top:0,bottom:0),将上下margin设置为auto

样式补充

display:list-item
设置该属性值的盒子,本质上仍然是一个块盒,但同时该盒子会附带另一个盒子
元素本身生成的盒子叫主盒子,附带的盒子称为次盒子,次盒子和主盒子水平排列
涉及的css属性:list-style-type(设置次盒子中内容的类型)
              list-style-position(设置次盒子相对于主盒子的位置)

图片失效时的宽高问题:若img元素的图片链接无效,img元素的特性和普通行盒一样,无法设置宽高

行盒中包含行块盒或可替换元素:行盒的高度与它内部的行块盒或可替换元素的高度无关

text-align:left(左对齐)
            right(右对齐)
            center(居中)
            justify(除最后一行外,分散对齐)

利用颜色属性值的transparent制作三角形
  
 direction和writing-mode:
 direction设置的是开始到结束的方向
 writing-mode设置的是文字书写方向
 

以上是对CSS的部分整理和总结,希望有用,有什么建议欢迎提出哦!
大家一起进步~

以上是关于高手请进!关于CSS中class选择器使用多种样式的问题的主要内容,如果未能解决你的问题,请参考以下文章

SCSS / CSS 最接近父选择器

笔记 选择器 样式优先级 常用css3

css高手请进!用div+css制作圆角矩形的原理

css里关于定义class选择器的问题

关于CSS (Cascading Style Sheets)

关于css的优先级