css样式不影响孙子

2024-09-01

css——子代与后代选择器

一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的子元素中的 li元素,不包括孙元素.曾孙元素等: 2.后代选择器(用空格连接):ul li 后代选择器是选择ul包围的所有元素中的所有li元素,包括子元素.孙元素.曾孙元素等:

CSS Modules 解决 react 项目 css 样式互相影响的问题

1. CSS Modules引入目的写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每次都需要把所有的样式表都导入到程序中,如果我们可以像使用js模块一样,想用哪块就用哪块,是不是就很理想了. CSS Modules就解决了这个问题,它自动为每一个类生成一个哈希值,可以惟一标志这个类,因此避免了我们说的第一个问题,它让我们可以像使用js模块那样,想用哪部分样式,就引入哪部分样式.下面

bootstrap-全局css样式

bootstrap-全局css样式 1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container) 流式版心(.container-fluid)宽度100%(游览器的宽度) 4.栅格系统 (一行分成12分,每一列都可以在行中占据相应的分数,根据屏幕的大小,改变占据的分数) .col-xs 手机 .col-sm 平板 .col-md 电脑屏幕 .col-lg 超大屏幕 eg

Bootstrap3 CSS样式基本用法总结

按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 <a class="btn btn-default" href="#" role="button">a标签按钮</a> <input type="button" class="btn btn-default" value="input的button标签按钮" />

CSS样式常用属性整理

web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常用属性> ******* CSS 常用属性 ********* z-index: auto (默认值) 检索或设置对象的层叠顺序. 并级的对象,此属性参数值越大,则被层叠在最上面. 如两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的. 必须定义posit

CSS样式表（三）

前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对象右边的外延边距 margin-bottom 检索或设置对象底边的外延边距 margin-left 检索或设置对象左边的外延边距 argin:检索或设置对象四边的外延边距. 如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上.

权重和层叠规则决定了CSS样式优先级

一.基本的优先级规则比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承二.CSS权重规则在<页面重构中的模块化设计>中提到,影响CSS样式权重,有两个重要因素: A:样式的优先级跟样式定义的顺序有关 B:权值的大小跟选择器的类型和数量有关一般来说,在同一个CSS文件中,如果有两个同名的样式

css样式 --- CSS hack

前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应该

CSS样式----图文详解：css样式表和选择器

主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择器.伪类选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷

CSS样式表继承详解

最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<

Web前端开发基础第四课（认识CSS样式）

CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img> 类选择器 ID选择器通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标

CSS样式选择器优先级

CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器特殊性 (a,b,c,d) Style= ”” 1,0,0,0 #wrappe

bootstrap学习总结-css样式设计(一)

由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstra

使用background和background-image对CSS优先级造成影响

在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="

去除冗余 – 精简您的CSS样式代码

讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致我们有时候写的CSS样式会与浏览器默认的CSS样式一致,有时候您自己都可能没有意识到. 常见的例子有: ① div{width:auto; height:auto;} 对于一些刚使用CSS的童鞋,有时候,其为了表达这段div高度是自动适应于内部元素的,会情不自禁的加上height:auto;的样式.很

[css]【转载】CSS样式分离之再分离

原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/ 一.关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞.无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用. CSS本身就代表着精简与重用.例如我们可以设置一个如下的样式: .exa

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

[程序猿入行必备]CSS样式之优先级

专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据如何的优先次序推断CSS样式的优先级的呢? 总结例如以下: 样式的来源样式有多处来源,有网页开发作者设定的.有浏览器默认的.还有网页用户设定的.各种样式声明逐层叠加,或继承.或覆盖.或叠加计算,影响元素的展现效果. 样式的来源依次有: 1.浏览器默认样式: 2.用户样式. 3.作者链接样式. 4.作者页内嵌

JS操作CSS样式

一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把WEB文档划分为:标题.段落.正文.列表等元素的.HTML没有办法很好的表现WEB文档的外观.HTML定义了文档的结构,这样很好.现在只需要通过CSS控制页面的外观就可以了,而且不会改变HTML的内容. CSS其实,就是实现了对HTML的再次定义,如果某个浏览器不支持CSS,那该浏览器一样可以浏览页

分享一下自己在用的CSS样式重置代码

通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html{ color: #000; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 100%; } /* IE6对positon:fixed的单独处

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论它本身是何种元素.元素对象设置了float属性之后,它将不再独自占据一行.浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止.fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素

css样式不影响孙子

热门专题