样式的继承

其实，没你说的那么复杂，这里就是一个优先级和继承的问题继承：如果父元素上设置了能用于继承的样式，而子元素上又没定义相同的样式，那么就会直接父元素的，比如像 font-size、background等；有些样式是不能继承的，比如border、padding等；优先级：如果针对同一个元素在样式表中设置了多个选择器操作它时，那么在优先级相同的情况下，最后设置的会覆盖掉前面所有的设置，而且元素本身设置的样式优先级也会高于继承的样式；说一下优先级的规则：id选择的优先级为 0 1 0 0class选择的优先级为 0 0 1 0ele 选择的优先级为 0 0 0 1继承的样式是没有优先级的这里我只是说了三个常见的优先级，更多优先级规则LZ可以去看看css权威指南(第二版)；再回到你的问题当中table设置了背景色，那子元素td会直接继承过来，但是，又针对某一个td设置了一个class="red"，跟据上面的优先级规则，其他td是没有优先级的，只是单纯的继承了table的样式，而class="red的这个td的优先级为 0010，固优先级最高，所以应用之；最后补充一句：优先级相加即使大于10也不会向前进一如：0 0 1 0 大于 0 0 0 15

因为!important这个样式是继承至父级元素。而CCS样式优先级有一条原则就是：设定的永远大于继承的。如果你给当前文本所在的DOM节点一个!important属性的话，那它肯定就可以覆盖掉*中的样式了。这里并不存在像上面所说的文件顺序的问题，只有当两个样式的优先级相同的时候才会受样式规则顺序的影响（后面的样式会覆盖前面的样式），而这里两个样式规则的优先级根本不一样。希望题主明白问题的根源所在，不要被误导了。

因为!important这个样式是继承至父级元素。而CCS样式优先级有一条原则就是：设定的永远大于继承的。 如果你给当前文本所在的DOM节点一个!important属性的话，那它肯定就可以覆盖掉*中的样式了。这里并不存在像上面所说的文件顺序的问题，只有当两个样式的优先级相同的时候才会受样式规则顺序的影响（后面的样式会覆盖前面的样式），而这里两个样式规则的优先级根本不一样。希望题主明白问题的根源所在，不要被误导了。

目前只能通过覆盖的方式清空样式这个问题应该在写css的时候考虑到后面的问题一般只有通用的样式，和结构固定的模块适合使用继承来应用css否则的话，不应该让样式随便继承，对于结构或表现差异很小的两个模块，也不适合用继承来实现好点的方式是：把同样的，不易变化的样式部分抽离出来，然后用组合的方式应用到不同模块。比如两个div <div class="a"></div> <div class="b"></div> 可以提取出共同的样式，放在一个声明下： .fixedAd {position:fixed;width:200px;height:200px;border:1px solid #ccc;} 然后对于不同的div编写自己的样式： .a {color:#ffc;background:#ccf;} .b {color:#777;background:#999;} 最后组合的html结构是： <div class="a fixedAd"></div> <div class="b fixedAd"></div> 总之是：组合优于继承 这个和编程的道理差不多，呵呵

CSS选择符：1. id选择器（ # myid） 2. 类选择器（.myclassname） 3. 标签(元素)选择器（div, h1, p） 4. 相邻选择器（h1 + p） 5. 子选择器（ul > li） 6. 后代选择器（li a） 7. 通配符选择器（ * ） 8. 属性选择器（a[rel = "external"]） 9. 伪类选择器（a:hover, li:nth-child） 伪元素选择器、分组选择器。 继承性： 可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd； 不可继承的样式：border, padding, margin, width, height优先级（就近原则）：!important > [ id > class > tag ] !important 比内联优先级高优先级算法计算优先级就近原则，同权重情况下样式定义最近者为准! important>id >class>tagimportant比内联优先级高元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000!important声明的样式优先级最高，如果冲突再进行计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。

问题：页面上的CSS覆盖了组件的CSS 你说的意思应该是页面上定义CSS，但是被优先继承，导致外部链接中的组件CSS失效 被优先继承,导致失效的原因有几个：1.引用的样式名称冲突，比如页面内的class和组件内的class一样2.或者使用了行内样式，如style="color:red"，这个优先级很高，会覆盖其他样式3.页面内的命名过于简单，如class="menu"、class="nav"，因为这些是HTML5的新元素，有些组件库会做默认设置 解决方案 其实想要避免这些问题很简单 代码编写规范，不使用行内样式 编写样式时，采用模块化的命名规范，这里引荐Alice的命名规范，比如： HTML <div class="ui-box"> <h3 class="ui-box-title ui-box-title-hover"></h3> <p class="ui-box-conent"></p> </div> CSS .ui-box {} .ui-box-title {} .ui-box-title-hover {} .ui-box-conent {}

可以使用 less, sass 等写法，通过预编译处理，得到最终的css。less， sass 都可以支持 变量，函数等基本操作语法。举例： 使用 less 的 mixin 来模拟实现继承.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } menu a 直接将 .bordered 的样式合并进来， 从而实现了类似 #menu a 继承 .bordered 样式的效果。

css层叠的时候考虑3点：继承，特殊性和来源。这里只看特殊性：内联样式：1，0，0，0id选择器：0，1，0，0class选择器，属性选择器，伪类：0，0，1，0元素选择器，伪元素：0，0，0，1通配选择器：0，0，0，0继承值：无特殊性计算时特殊性就是简单的把各位上的数字相加，然后从第一位开始比较。只有前一位比较不出时才会比较下一位，换言之，0，1，0，0特殊性高于0，0，10，100。通配选择器（*）的0，0，0，0特殊性高于无特殊性的继承值。!important其实和特殊性无关，它属于重要声明。css层叠时，所有的重要声明和非重要声明会分开进行层叠。如果重要声明和非重要声明冲突，会应用重要声明的样式。最后，回答题主的问题，如果两个规则的来源，特殊性完全相同，会应用后出现的规则。

从需求入手进行分析：     如果想实现的样式效果是多个div都具有同样样式，给多个div标签赋予相同的class名，可以达到同类class样式同时控制的效果     如果想实现的是div中嵌套的div中每个层级嵌套的样式都具有其各自的样式，则需要引入其他的“选择器”配合class的类选择器来分别控制     多个div的关系不是嵌套的是混合的或者是并列的话，同样在Css操作标签时需要结合其他的选择器来实现对某一div的精确控制 从代码运用的角度来纠错： 使用class时注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用 确定CSS在控制标签时，标签元素正确继承属性 确认CSS代码中的样式属性代码正确，没有使用不存在的属性，比如把控制文字独有的属性错用到了块元素的属性控制上 “答案来源于网络，供您参考” 希望以上信息可以帮到您！

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）标注样式编写人，各模块都及时标注（标注关键样式调用的地方）页面进行标注（例如 页面 模块 开始和结束）CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）JS 分文件夹存放 命名以该 JS 功能为准的英文翻译图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

详细解答可以参考3. 自定义样式通知（V2.3.3及以上版本开始支持）">官方帮助文档Android Push SDK支持用户自定义通知样式，用户可以设定自己的通知样式，涉及的内容包括通知的提醒方式（声音、震动、静默），通知在状态栏的显示图标，推送消息应用内到达时是否创建通知以及自定义通知布局文件等。自定义样式通知的设置包括两部分： 3.1 客户端设置通知样式 用户利用SDK提供的自定义通知样式接口创建自定义样式通知。SDK中有两个自定义样式通知类：1）BasicCustomPushNotification；2）AdvancedCustomPushNotification。其中BasicCustomPushNotification用户设置基础样式，包括提醒方式、状态栏图标以及当推送消息到达时应用正处于前台情况下是否创建该通知等。AdvancedCustomPushNotification是BasicCustomPushNotification的子类，继承了BasicCustomPushNotification的所有方法，同时还可以设置通知样式布局文件每个样式都需要对应一个特定的整数类型id，如果多个样式设置为同一个id，则最后设置的样式有效。如果SDK没有找到对应id的样式则会创建默认样式的通知样式只需设置一次，SDK会记住这个设置，在需要使用时加载对应样式具体使用例子请参考Demo 3.2 后端推送消息时添加自定义样式id 用户利用OpenApi推送消息时设定特定样式的id服务端不能设置样式，只能指定需要展现的样式id指定id的样式必须在客户端已经进行设置，否则SDK会创建默认样式的通知 3.3 Example BasicCustomPushNotification" class="reference-link">Example-BasicCustomPushNotificationBasicCustomPushNotification notification = new BasicCustomPushNotification();notification.setRemindType(BasicCustomPushNotification.REMIND_TYPE_SOUND);notification.setStatusBarDrawable(R.drawable.logo_yuanjiao_120);boolean res = CustomNotificationBuilder.getInstance().setCustomNotification(1, notification); AdvancedCustomPushNotification" class="reference-link">Example-AdvancedCustomPushNotificationAdvancedCustomPushNotification notification = new AdvancedCustomPushNotification(R.layout.notitfication_layout, R.id.m_icon, R.id.m_title, R.id.m_text);notification.setServerOptionFirst(true);notification.setBuildWhenAppInForeground(false);boolean res = CustomNotificationBuilder.getInstance().setCustomNotification(2, notification); OpenApi" class="reference-link">Example-OpenApi客户端设置完成后，服务端在推送通知时需要利用OpenApi指明对应的自定义样式ID final SimpleDateFormat dateFormat = new SimpleDateFormat("MM-dd HH:mm:ss");final String date = dateFormat.format(new Date());PushRequest pushRequest = new PushRequest();// 推送目标pushRequest.setAppKey(appKey);pushRequest.setTarget("device"); //推送目标: device:推送给设备; account:推送给指定帐号,tag:推送给自定义标签; all: 推送给全部pushRequest.setTargetValue("deviceId"); // 推送配置pushRequest.setType(1); // 0:表示消息(默认为0), 1:表示通知pushRequest.setTitle(date); // 消息的标题pushRequest.setBody("PushRequest body"); // 消息的内容pushRequest.setSummary("PushRequest summary"); // 通知的摘要pushRequest.setAndroidNotificationBarType(2);//设置的通知样式ID，通知栏自定义样式范围0-100// 推送配置: AndroidpushRequest.setAndroidOpenType("1"); // 点击通知后动作,1:打开应用 2: 打开应用Activity 3:打开 urlpushRequest.setAndroidExtParameters("{\"_NOTIFICATION_BAR_STYLE_\":\"2\"}"); 3.4 BasicCustomPushNotification API 默认构造函数 BasicCustomPushNotification的默认构造函数，所有配置采用默认设置：通知方式采用震动+通知；NotificationFlag采用Notification.FLAG_AUTO_CANCEL，状态栏图标用的是android.R.drawable.stat_notify_chat。 public BasicCustomPushNotification()； 构造函数参数 drawable 状态栏图标flags NotificationFlags，支持系统Notification下的Flag参数remindType 提醒类型，有BasicCustomPushNotification.REMIND_TYPE_SILENT：静默；BasicCustomPushNotification.REMIND_TYPE_VIBRATE：震动；BasicCustomPushNotification.REMIND_TYPE_SOUND：声音；BasicCustomPushNotification.REMIND_TYPE_VIBRATE_AND_SOUND：声音+震动 public BasicCustomPushNotification(int drawable, int flags, int remindType); 获取状态栏图标 获取已设置的状态栏图标 public int getStatusBarDrawable() 设置状态栏图标 更改状态栏图标设置 参数 statusBarDrawable 状态栏图标资源id public void setStatusBarDrawable(int statusBarDrawable); 获取提醒方式 获取已经设置的提醒方式 public int getRemindType(); 设置提醒方式 更改自定义通知的提醒方式 参数 remindType 提醒方式，提供的参数有：BasicCustomPushNotification.REMIND_TYPE_SILENT：静默；BasicCustomPushNotification.REMIND_TYPE_VIBRATE：震动；BasicCustomPushNotification.REMIND_TYPE_SOUND：声音；BasicCustomPushNotification.REMIND_TYPE_VIBRATE_AND_SOUND：声音+震动 public void setRemindType(int remindType); 获取Notification Flags参数 获取已经设置的notification flag参数 public int getNotificationFlags(); 设置Notification Flags参数 更改自定义通知的flags参数 参数 notificationFlags 支持系统自带的Notification Flag参数 public void setNotificationFlags(int notificationFlags); 获取是否服务端设置优先 利用OpenApi或者阿里云推送控制台推送消息都可以设置提醒方式，当后端设置的提醒方式和自定义样式提醒方式冲突时，SDK根据serverOptionFirst参数来判断提醒方式策略。如果该参数为true，则采用后端设定的提醒方式；如果该参数为false，则采用自定义样式指定的提醒方式。默认为false public boolean isServerOptionFirst(); 设置是否服务端优先 更改自定义通知的serverOptionFirst参数 参数 serverOptionFirst 是否服务器配置优先 public void setServerOptionFirst(boolean serverOptionFirst); 获取推送前台到达否创建通知参数 当推送到达时，如果应用处在前台，用户可以通过自定义样式决定是否创建通知。默认是创建通知 public boolean isBuildWhenAppInForeground(); 设置推送前台到达否创建通知参数 更改当推送到达时应用处在前台情况下是否创建通知的设置 参数 buildWhenAppInForeground 是否创建通知 public void setBuildWhenAppInForeground(boolean buildWhenAppInForeground); 3.5 AdvancedCustomPushNotification API AdvancedCustomPushNotification是BasicCustomPushNotification的子类，继承了上文中BasicCustomPushNotification的所有方法。 AdvancedCustomPushNotification构造函数 AdvancedCustomPushNotification类的构造函数，AdvancedCustomPushNotification没有默认构造函数 参数 view 自定义通知布局文件id。注：Notification的自定义布局是RemoteViews，和其他RemoteViews一样，在自定义视图布局文件中，仅支持FrameLayout、LinearLayout、RelativeLayout三种布局。iconViewId 自定义布局文件中icon的viewIdtitleViewId 自定义布局文件中title的viewIdcontentViewId 自定义布局文件中显示通知正文的viewId public AdvancedCustomPushNotification( int view, int iconViewId, int titleViewId, int contentViewId); 设置通知图标 设置通知栏中显示的图标，该图标显示在iconViewId所指定的控件中。 参数 icon icon图标资源id public void setIcon(int icon); 获取通知图标 获取设置的通知图标 public int getIcon(); 3.6 CustomNotificationBuilder API CustomNotificationBuilder用于注册用户设定好的自定义样式通知 获取CustomNotificationBuilder实例 CustomNotificationBuilder是单例类，必须通过指定接口来获取实例 public static CustomNotificationBuilder getInstance(); 注册自定义样式通知 用户创建好自定义样式通知后需要将其注册，并赋予其一个特定的id 参数 customNotificationId 所注册的自定义样式通知的id，id必须大于0。如果将多个不同的自定义样式通知赋予同一个id，则最后注册的通知有效，其他的通知将会被覆盖notification 创建的通知，该通知可以是BasicCustomPushNotification对象也可以是AdvancedCustomPushNotification对象，但是不能为null 返回 该方法会返回一个boolean类型的结果，如果返回true，则注册成功；反之则失败。 public boolean setCustomNotification(int customNotificationId, BasicCustomPushNotification notification);

CSS 选择符： 1.id选择器(# myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li:nth-child) 可继承的样式： 1.font-size 2.font-family 3.color 4.text-indent 不可继承的样式： 1.border 2.padding 3.margin 4.width 5.height 优先级算法： 1.优先级就近原则，同权重情况下样式定义最近者为准; 2.载入样式以最后载入的定位为准; 3.!important > id > class > tag 4.important 比 内联优先级高，但内联比 id 要高 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。

a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等； b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）； c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； d. 页面进行标注（例如 页面 模块 开始和结束）； e. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）； f. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译。 g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

在Java中，OOP是一种与以下概念相关的编程样式： 继承：继承是一个类在其中获取另一类的属性的过程。 封装：Java中的封装是一种将数据和代码打包为单个单元的机制。 抽象：抽象是向用户隐藏实现细节并仅向用户提供功能的方法。 多态：多态是变量，函数或对象采取多种形式的能力。

*就是对所有的元素定义样式，其优先级和 p 是同等的。等于直接对 span 定义了 red，直接定义要优先于继承

为了尽量不触发tl;dr事件，我从CSS中的四个值来讲起吧1（咦指定值Specified values：在样式表中指定的值将确定一个属性使用的是声明值、继承值还是初始值计算值Computed values：格式化文档之前，根据样式表计算出的值相对的URI将转化为绝对URIfloat: left将导致计算值为display:block也发生在这一步相对单位em将转化为px或类似单位（当然，如果font-size中用到了em，则需要到下一步才能算出）使用值Used values：格式化文档之后，根据样式表及层叠关系计算出的值百分比值转化为px或类似单位line-height的相应计算真实值Actual values：使用值在一些UA中可能不允许被使用，因此还可能发生针对UA的转化比如在chrome里面，px不允许有小数，因此就算使用值是33.333px，真实值将是33px。这可能导致一些subpixel bug比如在kindle的浏览器里面，UA本身不支持灰度以外的颜色，因此所有的颜色将会转化会灰色对应的值的查看，以Developer Tools截图为例：

可以继承：font-sizedemo点击预览至于你这种情况，可能是你样式表中的其它规则给a或者span设置了字体大小 并且它的权重要高 你限定一下上下文

.fenlei li li这个类增加line-height:12px，应该你其他地方设置过line-height了，导致继承了上一级设置的line-height样式

*选择器就是重置所有标签的样式，也就是a的字体就是12px，而你在h2里设不设置字体大小，并不会影响字体a的大小。下面的情况去掉*的字体大小，那a没有设置字体大小的话，默认继承的是父级的

目前选择的是 LESS，有很多开源项目都使用他，可以阅读学习。他没有 SASS 要求那么严谨，比如要 mixin（中文不知道怎么翻译）时，SASS 要求被 mixin 样式需要添加 @mixin 声明，调用时也要求用 @include 调用。不过我很喜欢 SASS 的选择器继承 @extend，这点 LESS 还没有实现，比如：在 SASS 里：.menu { color: #000; }.sub-menu { @extend .menu; }输出：.menu, .sub-menu { color: #000; }但在 LESS 中，只能通过 mixin 实现：.menu { color: #000; }.sub-menu { .menu; }这就导致输出很多冗余的样式：.menu { color: #000; }.sub-menu { color: #000; }至于 Stylus，暂时还没用过，所以无法评价。

1.CSS的大名叫层叠样式表，具有后面定义的属性覆盖之前定义的属性的特点。2.颜色属性消失，即不再出现任何颜色属性？颜色属性消失是什么意思，是要让color眼不见为净么？还是说要让.text_color的颜色继承父级的颜色属性呢？亦或使它的颜色透明（元素就看不见了）？