在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。...在CSS中,后代选择器的写法是: 祖辈 后代 { 样式 ; } 首先,先找到祖辈,然后中间有一个空格,空格后面跟着后代。...后代选择符可以由2个以上元素组成,例如: ul li a body li a html li a html body ul li a 以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。...一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。 后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。...同样的,后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符。
什么是组合选择符? 组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种,都是什么?...在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以波浪号分隔) 后代选择器 后代选择器用于选取某元素的后代元素
发出一声反派的笑声(破音) 作死 先来看一段HTML代码 有部分 HTML 和 CSS 的书或者网上有些文章会说,元素上的 id 和 class 是不能以数字开头的...有部分文章也会说,HTML 可以支持 id 和 class 以数字开头,但 css 不支持。 我呸!...请看下面的 CSS 代码 /* 注意:.\31 后面有一个空格 */ .\31 -d { width: 100px; height...详解 简写 CSS 类名选择器 和 ID选择器 并不是不能以数字开头,而是不能直接写数字,需要将数字转义一下才能使用。...之所以出现这么奇怪的表示方式(数字“1” 用 “\31 + 空格” 表示),是因为 \31 外加空格 是 CSS 字符 “1” 的十六进制转码。而 31 就是字符串 1 的 Unicode 值。
于是,css选择符的地位在这个前提下就空前的提高了。所以,在开始学习盒模型、浮动、定位之前,有必要回顾一下选择符。...一般稍微接触过css的网页设计人员,都会很快地学会三种css选择符: 元素选择符(例如:body 、a 、li ) ID选择符(例如:#head、#body、#foot) 类选择符(例如:.red、...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种,其它的选择符在css中往往用来区别处理不同的浏览器,或者用在jQuery一类的框架中。本文就不提了。...关于css选择符的优先级,网上也有很多文章,我就不赘述了。 所以说,如果感觉离不了class,离不了id,那只能说明两个问题——xhtml结构不合理或者css掌握得还不够。...由于css3的选择符目前还没被广泛支持,而结构又没有差异,不借助javascript有困难了。
类选择符 HTML代码: CSS代码: div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px; } .one{...这时就可以用类选择符选取要装饰的词。 需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。 类选择符的用法: 在CSS中,类选择符的名称必须以点号开头。...ID选择符 CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。...在CSS中,用 # 井号开头,后面跟着id名。 正确地使用ID HTML的id属性有些作用是class属性实现不了的。这些优势与CSS没关系,因此完全可以不适用ID选择符。...如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。 Web设计圈有个趋势,尽量不在CSS中使用ID选择符。
CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html 之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,然后我若无其事的说了句:用CSS事件啊。。。...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“伪类”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“伪类”的东东一般只有...看完,我来先小小地总结下,CSS伪类在每一代CSS标准中都会扩充一些,由于暂时用得最多的大致有以下五个(只是对于我来说哈~( ̄。。...看完是不是超级简单,有木有~;这几需要说明几点: A>以上可以只对输入框定义一个获取焦点后的(:focus)样式,就可以看出效果啦,遂,在开发的时候如果不是特别复杂的样式效果,切勿轻易动用JavaScript
属性选择符的使用 由 Ghostzhang 发表于 2006-04-17 16:15 在CSS的选择符中,除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID...)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”,试了一下属性选择符,感觉很不错,如果使用到页面中的话...,会让CSS的定义更加的强大,可惜现在IE并不支持这一选择符。...属性选择符可分为下面几种: Attribute Selectors E[attr] 属性选择符。 选择具有attr属性的E。...Attribute Selectors E[attr=value] 属性选择符。 选择具有attr属性且属性值等于value的E。
CSS简介 CSS 是一种描述 HTML 文档样式的语言。层叠样式表的简称,也是一种标记语言 CSS 描述应该如何显示 HTML 元素。网页的美容师,字体、颜色、版面布局。...css语法规范 选择器,一条或多条声明 h1{ color:red; font-size: 25px; } 1.基础选择器-标签选择器 2.类选择器+多类名 3.id选择器 以#号定义,只能调用一次 语法...: #id名{ 属性1:属性值; } 4.通配符选择器 * 代码案例 css案例-画盒子 css语法规范 /*修改p
1、安装插件: $ npm install github-markdown-css 2、新建github-markdown.css文件,内容如下: .markdown-body { box-sizing...@media (max-width: 767px) { .markdown-body { padding: 15px; } } 3、import "github-markdown.css...class="markdown-body"> Unicorns All the things --- 相关链接 github-markdown-css...使用说明!
属性选择符的优先级 由 Ghostzhang 发表于 2006-04-24 10:59 大家都知道样式定义存在优先级的问题,像“ID选择符”的优先级就比“样式选择符”要高等等。...在写完《属性选择符的使用》和《CSS样式的优先级补遗2》后才发现,原来属性选择符的优先级是比较特殊的,看看下面的例子: /*IE*/ div{float:left;color:Orange;} /* 特性值为...所以不难得出,属性选择符的特性值是在10到12之间,姑且写为11吧,以方便表示。
命名参考表: - TOP 以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合: CSS样式命名 说明 网页公共命名 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container...文件命名 说明 master.css,style.css 主要的 module.css 模块 base.css 基本共用 layout.css 布局,版面 themes.css、 主题 columns.css...专栏 font.css 文字、字体 forms.css 表单 mend.css 补丁 print.css 打印 CSS命名其它说明: DIV+CSS命名小结:无论是使用“.”...(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”...(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。
CSS语法由两部分组成:选择符、声明。...声明包括:属性和属性值 选择符 {属性: 属性值 ;属性:属性值} 选择符说明:CSS选择符(选择器) 选择符表示要定义样式的对象(标签名字),可以是元素本身,也可以是一类元素或者指定名称的元素,简单来说就是给对应的元素起个名称...1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值; 2)属性必须放在花括号中,属性与属性值用冒号连接。 3)每条声明用分号结束。
CSS :checked伪类选择器 思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。...需要说明的是这个CSS选择符只兼容IE9及以上。如果要兼容IE8等,可能这个方案就不适合了。...42px; border-radius: 42px; line-height: 42px; font-size: 16px; cursor: pointer; } 兄弟选择符...(E~F) 从上面的CSS,大家可以看到我用了这个CSS强大的选择符,顾名思义,选择E元素后面的所有兄弟元素F。...与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。 另外说一下这个选择符支持IE7及以上。
CSS优先级 当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意CSS优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。...选择符是由基本选择器组成,基本分为 后代选择符: #i1 .c1 .c2 子选择符:#i1 > .c1 > .c2 相邻选择符:.c1 + .c2 计算选择符中 ID选择器的个数a,计算选择符中类选择器...a:1 b:0 c:1 第二个选择符 a:0 b:1 c:1 第三个选择符 a:0 b:0 c:2 第四个选择符 a:0 b:1 c:0 第五个选择符 a:0 b:0 c:1 优先级顺序依次为: 1...错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。还是拿刚刚的例子说明。...DOCTYPE html> CSS样式优先级 #i1 {
要讲CSS选择器的优先级,我们首先要知道CSS选择器有哪些?具体可以参考CSS 选择器参考手册,同时我们还需要知道CSS选择器的解析原则。请阅读为什么CSS选择器是从右往左解析。...注意:权值实际并不是按十进制,用数字表示只是说明思想,一万个class也不如一个id权值高。而通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。...另外一种理解方式: CSS优先级:是由四个级别和各级别的出现次数决定的。 四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。...优先级的算法: 每个规则对应一个初始"四位数":0、0、0、0 若是 行内选择符,则加1、0、0、0 若是 ID选择符,则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符,则分别加0、0...、1、0 若是 元素选择符/伪元素选择符,则分别加0、0、0、1 算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
③@import只有在IE5以上才能识别,link所有都可以 ④js控制dom修改样式只能使用link标签 ⑤@import可以在css中再次引入其它的样式表 ---- 8. css选择符(w3school...color:#C00; font-weight:bold; } ⑹通配选择符: * { padding:0; margin:0 } ⑺属性选择符: a[href] { color:#C00; } ⑻伪类选择符...优先级由四个级别和各级别的出现次数决定 ①每个规则对应一个初始四位数: 0、0、0、0 ②若是行内选择符,则加 1、0、0、0 ③若是id选择符,则加 0、1、0、0 ④若是类选择符/属性选择符/...伪类选择符,则加 0、0、1、0 ⑤若是元素选择符/伪元素选择符,则加 0、0、0、1 将每个规则所得到的四位数从左到右进行比较,大的优先级越高。...给元素提供额外的说明 ---- 15.css reset的作用:通过重新定义标签样式,覆盖浏览器的css默认属性 ---- 16.css sprites:将一个页面所涉及的所有零星图片都包含到一张大图中去
important的支持、IE6下的多选择符等内容,需要的朋友可以参考下 一、什么是CSS Hack?...CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。...important*/-------------------------------------------------------------/* CSS选择符级Hack */*html #demo...说明IE6忽视!important的存在。 再来看看: .demo{ color:red !...import 四、IE6下的多选择符 多类选择符的写法。
一、CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象。...2.属性(property):选择符的样式属性,如颜色、大写、定位、浮动方式等。 3.值(value):是指属性的值。 ...4.同时可以为一个选择符定义多个属性,属性之间用分号";"隔开。 5.尽量使用通用属性,不使用存在兼容性差别的属性。...二、CSS长度单位 单位 说明 相对长度单位 em 相对于当前对象内文本的字体尺寸 px 像素(Pixel)推荐使用 绝对长度单位(基本上用不到) in 英寸 cm 厘米...mm 毫米 pt 点(point) 三、CSS颜色 颜色单位 说明 十六进制 如:color:#ffffff; 颜色名称 如:color:Red; 三原色单位 如:rgb(255,0,0
领取专属 10元无门槛券
手把手带您无忧上云