@media screen and (min-width:800px){ .a{  background: url('../image/banner/banner1.jpg') no-repeat left top;}} max-width:定义输出设备中的页面最大可见区域宽度   宽度小于800px里面的值才会生效 min-width:定义输出设备中的页面最小可见区域宽度  宽度大于800px里面的值才会生效 块元素(如div等)宽度默认是100% 既为父元素宽度的 100%. body的默认…
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承100%的宽度. DOM结构如下: <div class="grantparent"> <div class="parent"> <div class="child"></div> <div cl…
1.基本选择器 2.组合选择器 3.伪类选择器 4.伪元素选择器 CSS选择器规定了CSS规则会应用到哪些元素上 1.基本选择器 基本选择器:通配选择器.元素选择器.类选择器.ID选择器.属性选择器 /* 通配选择器.性能最低的一个CSS选择器 */ *{} /* 元素选择器 */ element{} /* 类选择器 */ .class{} /* ID选择器 */ id{} /* 属性选择器 */ element[attribute]{} element[attribute="value&quo…
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类…
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同css文件:写在后面的起作用 不同css文件:后导入的起作用 但今天遇到一个问题 <body> <div style="color: red"> <span>123</span> </div> </body> 却是这样的…
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.css四个基本选择器(标签选择器.类选择器.id选择器.通用选择器) 5.css组合器(重点) 5.1.后代选择器(特征为空格)空格的意思就是后代 5.2.儿子选择器(特征>) 5.3.毗邻选择器(特征为+) 5.4.弟弟选择器(特征为~) 6.css属性选择器 6.1.查找属性名含有name的标签…
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与后代选择器的基本语法 语法 子元素选择器的语法如下: div>ul{color:red:} 子元素选择器使用大于号">"做为连接符,子元素选择器只能选择作为某元素子元素的元素 后代选择器的语法如下: h1 em{color:red;} 后代选择器可以选择作为某元素后代的元素,父…
<div class="boxa"> <div class="boxb">我是div</div> </div> .boxa{ width:300px; height:300px; background-color:green; border:2px solid red; } .boxb{ <!--没有写宽度即默认宽度 为父元素的100%--> height:300px; background-color:o…
The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, as outlined on the World Wide Web Consortium's site: http://www.w3.org/Style/CSS/specs. This support allows developers to enhance their websites witho…
一.方法说明 通过IDomObject元素,获取完整的CSS选择器,过滤HTML和BODY元素,自动将class.id添加到选择器上,优先添加class,无class再添加id.如: <html> <head></head> <body> <div id="result"> <h3 class="t"><a "="" href="http://www…