css选择器集体声明

<title>静夜思</title><style type="text/css">h1,#two,.red{ color:#ff0000; font-size:14px;}h2,h3{color:#0000ff; font-size:16px; text-decoration:underline;}</style></head><body><h1>静夜思</h1><h2>床前明月…

Unit02： CSS 概述、 CSS 语法、 CSS 选择器、 CSS声明

Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.内部样式:在head元素内部的style标签内写样式,这种样式…

这 30 类 CSS 选择器，你必须理解！

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. *{ ; ; } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 CSS 样式的方法.在平时练习时使用这个没问题,但…

《Two Days DIV + CSS》读书笔记——CSS选择器

1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的 CSS 样式,比如,在 style.css 文件中对 p 标签样式的声明如下: <span style="font-family:Microsoft YaHei;font-size:14px;">p {</span> font-size: 12px; b…

css选择器３０种

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. 1 *{ 2 margin:0; 3 padding:0; 4 } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 …

css选择器的综合使用

代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>css的综合使用</title> <style> div { color: #daa520; } .red { /*上面点声明,下面class调用.*/ color: red; } #green { color: green; } *…

CSS(1)---css语法、css选择器

CSS(1)---css语法.css选择器一.CSS语法 1.CSS语法 CSS 规则由两个主要的部分构成:选择器以及一条或多条声明. 属性是您希望设置的样式属性.每个属性有一个属性值.属性和属性值被冒号分开. 示例  h1 {color:red; font-size:14px;} <!-- 在这里,h1 是选择器,color 和 font-size 是属性,red 和 14px…

CSS选择器有哪几种？举例轻松理解CSS选择器

CSS选择器汇总(清爽版) 1.元素选择器标签名{ } 2.id选择器 #id属性值{ } 3.类选择器 ·class属性值{ } 4.选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对应的元素(通常用于集体声明) 语法:选择器1,选择器2,选择器n{ } 5.复合选择器(交集选择器) 作用:选择更准确更精细的目标元素并为其设置属性语法:选择器1选择器2选择器n{ }  6.通配选择器作用:用来选中页面中所有的元素语法:*…

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

CSS选择器的权重与优先规则？

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明.…

css选择器的使用详解

-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选择器: 语法: .类名 { 属性:属性值: } 代码示例: .top { margin-top:25px; } <div class="top"></div> 3.id选择器: 语法: #ID名称 { 属性:属性值; } 代码示例: #top { padding-t…

CSS系列：CSS选择器

选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. CSS选择器包括:标记选择器.类别选择器.ID选择器及复合选择器. 1. 标记选择器一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式.因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称. 示例: <style type="text/css…

细说CSS选择器

众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. 声明块:由一个或多个声明组成,每个声明都是一个属性-值对(property-value). 选择器:定义了将影响文档中的哪些部分. 下面全面的总结一下CSS的各类选择器: 元素选择器: 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器.如 p.h3.em.a ,甚至可以是…

CSS选择器优先级总结

CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_t…

Html 之div+css布局之css选择器

CSS选择器什么叫选择器?通俗的来说就是我想改变html 中某个地方的字体大小或者背景色或者其它属性内边距外边距,宽度高度等等一些Css 样式. 那么我们如何找到对应的元素呢? 就要根据一定的规则来声明我要改变的是什么XX 的颜色, 但是要让程序知道你要改变什么东西怎么改变就要按照程序的标准去书写. 说了这么多,来看以下例子: <!DOCTYPE html> <html> <head> <meta charset="UTF…

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与匹配原理 CSS选择器大概可以分为:1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*) 8.属性选择器(a[rel='externaml']) 9.伪类选…

【CSS】使用CSS选择器

CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic selector).开发人员可使用这类选择器在文档中进行比较宽泛的选择,也可以将其看作结合多种选择器进行特殊选择的基础. 1.1 选择所有元素通用选择器匹配文档中的所有元素.它是最基本的选择器,不过使用很少,因为匹配过于广泛. 下面代码是一个使用通用选择器的样式示例: <!DOCTYPE html>…

HTML 学习笔记 CSS(选择器)

CSS元素选择器最常见的CSS 选择器就是元素选择器换句话说文档的元素就是最基本的选择器如果设置HTML样式选择器通常就是某个HTML元素比如p h1 em a 甚至可以是HTML本身 html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某一个样式从一个元素切换到另一个元素. 假设您决定将上面的段落文本(而不是h1元素)设置成灰色只需要把h1改成p html {color:black;} p {color:gray;…

网站CSS选择器性能讨论

CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话: 样式系统从最右边的选择符开始向左进行匹配规则.只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出. 如果你非常在意页面的性能那千…

CSS 选择器汇总

CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS 伪类 CSS 伪元素一,CSS 元素选择器最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 html 本身: html {color:black;} h1 {co…

CSS选择器以及优先级与匹配原理

最常用的五类CSS选择器准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常…

CSS选择器，CSS3选择器

CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器(CSS1) p{ color:pink; } 选择所有 <p> 元素. 3>类选择器(CSS1) 选择 class="className" 的所有元素. 所有浏览器都支持类选择器,但多类选择武器(.className1 .className2)不被IE6支持. .clas…

关于Css选择器优先级

今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解以备日后参照使用,毕竟自己理解的才是自己的. 三种基本的选择器◆标签名选择器,如:p{},h3{} 直接使用HTML标签作为选择器.◆类选择器,如.className{}.◆ID选择器,如#tab1{}. 扩展选择器◆后代选择器,如.polaris span img{} 空格间隔,最终指向img的样式设定◆群组选择器,如div,sp…

css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

CSS选择器:基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类.详细一些请见下表:类型选择符 E{}属性选择符E[attr]{}E[attr=value]{}选择具有attr属性且属性值等于value的EE[attr~=value]{}选择具有attr属性且属性值为用-连字符分隔的字词列表,由value开始的E.例如 <!DOCTYPE html PUBLIC…

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是这样描述的: 如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0) 计算选择器中 ID 属性的个数 (= b) 计算选择器中其他属性(类.属性选择…

前端--关于css选择器

css选择器就好像表达式一样,返回一组或者一个html元素,后面的样式声明块应用到返回的元素上.所以可以把css选择器理解为某个或者某一类html元素的抽象的写法. 在讲具体的各种选择器之前要提一下选择器分组和选择器组合的不同,选择器分组是在各个选择器之间加上逗号操作符,分组执行的是“或”操作,例如h1,h2 {color:red}.选择器组合实在个选择器之间用空格或者其他+ .>等符号连接,组合执行的是类似于只是类似于“与”的操作.任何选择器都可以进行分组或者组合(只要有意义). 再介绍一个概…