css选择器

CSS自学笔记（3）:CSS选择器

阅读更多关于 CSS自学笔记（3）:CSS选择器

CSS中提供了非常丰富的选择器，但是由于浏览器的支持情况，很多选择器很少用到。 1.基础选择器选择器含义示例 * 通用元素选择器，匹配任何元素 * { margin:0; padding:0; } E 标签选择器，匹配所有使用E标签的元素 p { font-size:2em; } .info和E.info class选择器，匹配所有class属性中包含info的有元素 .info { background:#ff0; } p.info { background:#ff0; } #info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; } 2.组合选择器选择器含义示例 E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; } E > F 子元素选择器，匹配所有E元素的子元素F div > strong { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F p + p

了解HTML CSS选择器操作和特性

阅读更多关于了解HTML CSS选择器操作和特性

　　子选择器　　在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, 意思即中间不包含别的标签嵌套), 这个时候就要使用子选择器. 　　代码示例: 　　p>span{ 　　　　font-size:20px; 　　} 　　" > "就称之为子选择器, 它的作用就是将标签选择器下的第一代子元素的<span>标签中的文本样式设置为字号20px, 但是这种显然不是很灵活, 只能选择子一代的标签元素, 如果我需要选择多代子标签, 就需要很麻烦的依次修改. 　　包含选择器　　明白了子选择器, 包含选择器也就好理解了, 它用于选择指定标签元素下的后辈元素, 可以越级指定, 而不是非要直接后代元素. 　　两种选择器具体使用视情况而定, 并不是包含选择器更加方便就全部使用, 就如同程序开发中使用更多的常量会是程序更加健壮, 选择器也是这样, 选择合适的时机选择不同的选择器. 　　分组选择符　　假如有一个样式, 你想同时给多个标签, 你可以给他们修改相同的类, id, 但是这样非常笨重, 而且ID选择器只可以设置一次, 所以这时候需要使用分组选择符, 通过符号" , "(没有双引号), 可以让多个选择器同时使用相同的样式. 　　代码示例　　p, span{ 　　　　font-size

css 层叠式样式表（2）

阅读更多关于 css 层叠式样式表（2）

一，样式表分类（1）内联样式。 --优先级最高，代码重复使用最差。（当特殊的样式需要应用到单独某个元素时，可以使用。直接在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。）（2）内嵌样式表。 --优先级别第二，不常用，代码重用性一般。（当单个文件需要特别样式时可以使用内嵌样式表。在 head 部分通过 <style> 标签定义内部样式表。）（3）外部样式表。 -- 优先级最低，最常用，代码重用性最高。（当样式需要被应用到很多页面的时候，可以使用。使用外部样式表可以关联多个元素或者文件。） 1、先创建一个样式表 2、写入样式表内容，调整样式表位置二。选择器每一条css样式定义由两部分组成，形式如下：选择器 { 属性 } 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。选择器是选择器，外部样式表只是代码位置（1）类别选择器（ class选择器）前面以"." 来标志，如： .d1 { color：red； } 在HTML页中： <div class="d1";>文字</div> 文字颜色为红色 <p class="d1";>文字</p> 文字颜色为红色定义了一个class类，将样式应用到了元素中。（2）id选择器优先级最高前面以"#"来标志，如： #d2 { color

阅读更多关于 CSS选择器

CSS选择器用于定制标签样式，集中管理某一类元素通用选择器优先级最低；用 * 来表示慎用，该选择器会选中整个页面所有的标签，然后对其修改在大型网站中，该选择器会被禁止使用（样式容易混乱） *{ width:100px; } 标签选择器用标签名定义当前页面中所有的叫做这个名字的标签，全部绑定样式 div{ width : 100px; height : 100px; background : red; } class选择器用英文状态下的句点 . 来标识，名称为自定义命名时，可以包含数字、下划线，但不能以数字开头具有重用性，可以给多个标签使用，使用时给对应的标签绑定 .ball{ width : 50px; height : 50px; background : green; } <div class=“ball”> </div> <p class=“ball”> </p> id选择器用 # 来标识，自定义名称不具有重用性，具有唯一性多个标签同时使用，会造成不可预知的错误 id选择器比class选择器的优先级高 #so{ color：red； } <div id = “so”> Hello </div> 群组选择器只能用于大批量的样式（大型项目中代替通用选择器）如果需要给个别标签去写样式，使用class或id p,span,div{ color

[译]HTML&CSS Lesson5: 定位

阅读更多关于 [译]HTML&CSS Lesson5: 定位

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局和针对单元素的布局——来介绍每种方法。浮动定位的其中一种方法就是使用 float 属性。 float 属性非常好用，可以用在很多地方。本质来说， float 属性是使元素脱离正常的流式布局，并将它放置在父元素的左侧或右侧。然后页面中所有的元素都会环绕浮动元素布局。例如我们将段落间的一张图片设置为浮动，那么这些段落都会围绕图片换行。当我们将多个元素同时设置为浮动元素，那么这些元素将呈现相邻或相对布局，如多列布局。 float 有好几个值，最常用的值是 left 和 right 。使元素浮动到父级元素的左侧或右侧。 img { float: left; } 浮动练习我们先创建一个通用页面，含有页头，页脚，中间有两列。最理想的情况就是在 <body> 元素内创建第二节课"了解HTML" 中提到的 <header> ， <section> ， <aside> 和 <footer> 元素。 <header>...</header> <section>...</section> <aside>...</aside> <footer>...</footer> <section> 和

JQuery高性能优化

阅读更多关于 JQuery高性能优化

使用JQuery时，你可以使用多种选择器，选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。通常比较常用的选择器有以下几个： ID选择器 $("#id") 标签选择器 $("td") 类选择器 $(".target") 属性选择器 $("td[target='target']") 伪类选择器 $("td:hidden") 根据经验，我们应该知道这5种选择器的性能是依次下降的测试html片段： <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable"> <tr> <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td> </tr> </table> 测试结果测试方案：对每个脚本执行1w次，统计3次运行结果的平均值方案 IE6 IE7 IE8 IE9 chrome firefox opera safari $("#mytable td.target") 5150 5630 780 293 69 148 31 102 $("#mytable .target"

w3c搬运CSS念念碎

阅读更多关于 w3c搬运CSS念念碎

w3c搬运CSS念念碎基本使用当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。如果值为若干单词，则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。选择器你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 id选择器：#id名在现代布局中，id

前端学习笔记3-CSS入门一

阅读更多关于前端学习笔记3-CSS入门一

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网 1.CSS的3种引用方式： ---外部样式表，CSS代码和HTML代码分开存放，在HTML中通过link标签引入CSS。 CSS代码： div{ width: 200px; height: 200px; border: 1px solid red; } HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <link href="demo1.css" type="text/css" rel="stylesheet"> </head> <body> <div>快看我，我是外部</div> </body> </html> 效果展示： ---内部样式表， CSS代码写在HTML的head标签的style标签中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-

CSS详解（3.选择器）

阅读更多关于 CSS详解（3.选择器）

文章目录一，元素选择器二，类选择器【重点】三，ID选择器四，后代选择器五，属性和值选择器六，通配符选择器七，交集选择器八，并级选择器九，子选择器十，伪类选择器一，元素选择器 HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。格式：元素 { 属性: 值; } 例如：h1 { color: red; } h2 { color: #FF0000; } 或者：h1, h2 { color: #ff0000; } 二，类选择器【重点】如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。格式1： .类名 { 属性: 值; } 格式2：元素.类名 { 属性: 值; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = " http://www.w3.org/1999/xhtml " > < head > < meta http-equiv = " Content-Type " content = " text/html; charset

CSS(05)-(复杂选择器)

阅读更多关于 CSS(05)-(复杂选择器)

1 兄弟选择器兄弟元素:具备相同父元素的平级元素之间称为兄弟元素兄弟选择器只能往后找,不能往前找. (1)相邻兄弟选择器获取紧紧挨着选择器1后面的符合选择器2的兄弟元素选择器1+选择器2{样式声明} (2)通用兄弟选择器选择器1~选择器2{样式声明} 获取选择器1后面所有符合选择器2 的兄弟元素 2 属性选择器 [attr]{ } —拥有attr属性的元素 [attr1][attr2]…{} —同时拥有attr1,attr2属性的元素 elem[attr]{} —匹配拥有attr属性的elem元素 [attr=value]{} —匹配拥有attr属性且值为value的元素 [attr1=value1][attr2=value2]{} elem[attr=value]{} 模糊属性选择器: [attr^=value]{}匹配属性以value开头的元素 [attr$=value]{}匹配属性以value结尾的元素 [attr*=value]{}匹配属性含有value的元素 [attr~=value]{}匹配元素中有value这个独立单词的元素 3 伪类选择器 :link/:visited/:hover/:active/:focus (1)目标伪类: 当锚点被激活时,被激活的锚点匹配样式 :target (2)结构伪类: 通过结构关系匹配元素 ①selector:first

订阅 css选择器