【day47 选择器优先级及嵌套关系】的更多相关文章

day47 选择器优先级及嵌套关系

复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常用的基本标签 div,a,link,img,p,i,span,b,ul>li,(br/hr),sup,sub.pre,table>thead>tbody>tfoot>tr>th|td 4.css引入 行间式:style属性中 内联式:head标签的style标签中 外联式:…

基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

css基础选择器 # *(统配选择器): 控制html, body,以及body下所有用于显示的标签 # div(标签选择器): 该标签名对应的所有该标签 # .(class选择器)(eg: .div => class="div"): 类名为div的所有标签 # #(id选择器)(eg: #div => id="div"): id名为div的唯一标签 选择器的优先级 # 理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式 #…

前端,基础选择器,嵌套关系.display属性,盒模型

基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以class起名的标签,控制class名匹配的标签 (因为标签的class名可以重复) <div class="foo">123</a> .foo{ width:80px; height:80px; background-color:pink; } 3.id选择器 以…

day48 前端高级选择器优先级

复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2"></div> 统配选择器 | !important | 行间式 2. 选择器优先级 通常作用范围越精确优先级越高 !important > 行间式 > id > class > 标签 > 统配 3. 长度与颜色 px in mm cm em rem vw…

【CSS系列-选择器优先级总结】

转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .test{ background-COLOR:#a00; width:100px; height: 100px; } 虽然把background-color写为了background…

一天搞定CSS： CSS选择器优先级--08

选择器优先级:是指代码的执行顺序 通俗的说,就是多个选择器同时对一个标签分别添加样式,那么这个标签显示那个选择器设置的样式 1.优先级规则 2.规则1和2说明 优先级相同,谁后谁优先 优先级不同,优先级高的优先 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*1.选择器的优先级一至的情…

深入理解CSS选择器优先级

题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简单的重构例子,然后介绍了CSS的选择器优先级,再然后介绍了CSS的最佳实践, 再然后就介绍如何重置浏览器的默认样式,最后比较虚的.纯理论的介绍了CSS重构的策略,然后就没有然后了.这书整体内容很简单,但是,其中对于 CSS选择器优先级计算 作了比较深入的讲解. 什么是选择器优先级(Specificity) 直…

盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的宽高 显示宽高 border+padding+content 自身布局 margin-top | margin-left 兄弟布局 margin-bottom | margin-right 父级水平居中 margin:0 auto; 与inline相关的盒子 vertical-align ''' 文…

导航栏布局时遇到的问题以及解决办法 css选择器优先级

得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下效果 或者可以使用第二种方法 #menu ul li{ float:left; margin-left:10px;text-align:center;padding-left:10px;实现列表项文字的居中 line-height:28px; height:28px; width:40px; bor…

前端CSS css引入方式 css选择器 css选择器优先级

一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二. CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 三. CSS的几种引入方式 行内样式 行内样式是在标记的style属性中设定CSS样式.不推荐大规模使用,说白了就是…