css 选择符 应用
1.属性选择符：
eg.1）所有包含alt属性的图像都将会有一个灰色的边框
img[alt]?{
border:1px ?dotted #999;
}
2）包含title属性的链接将是红色
a[title]{
color:#C00;
}
happysnail
2、子对象选择符
eg.
这个规则将设置所有属于元素子对象的链接的样式
div > a {
text-indent :-9999px;
}
happysnail
happy
snail>
只有div 的直接 子对象a 才会有 text-indent 的属性，而下的a将不会有text-indent效果
3、相邻选择符
eg.只有snail是红色的
h2+p {
color:#C00;
}
happy
snail
.org
4、伪类和伪对象
- 只有第一个P有效果
I’m the first child
I’m the second child
news.p:first-child{
font-size:200%;
}
2）：focus将应用于那些获得焦点的对象
input[type=text]:focus{
color:#000;
background:#ffc;
}
3）p的第一行和第一个字母的效果
p:first-line
{
font:##C00;
}
p:first-letter
{
font-size:400%;
font-weight:bolid;
}
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 WEIXING.ME！
相关推荐
2010-10-21
CSS vertical-align 属性
CSS vertical-align 属性定义和用法vertical-align 属性设置元素的垂直对齐方式。 说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 | 默认值： || baseline | | 继承性： || no | | 版本： || CSS1 | | JavaScript 语法： || object.style.verticalAlign=”bottom” | 实例垂直对齐一幅图像： img { vertical-align:text-top; } 浏览器支持所有浏览器都支持 vertical-align 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 可能的值| 值 || 描述 | | baseline || 默认。元素放置在父元素的基线上。 | | sub || 垂直对齐文本的下标。 | | super || 垂直对齐文本的上标 | | top ||...
2010-09-13
基于DIV和CSS的布局结构（1）
基于DIV和CSS的布局结构（1） DIV在HTML中是一个块级元素，所以它很适合用来建设网页的结构。2000年互联网泡沫之后，CSS流行起来。虽然距离CSS发布已经有很长的一段时间，但它有限的浏览器支持使得开发人员害怕使用它。相对于表格结构，它有相对更高的学习曲线，开发人员必须了解CSS并且清楚地知道CSS间的块级元素和内联元素、何时使用相对定位、何时使用绝对定位来解决浏览器的定位问题，还需了解每个CSS特性在不同浏览器中的不同表现（这点在3.1节中已经提到过）。我们重新审视一下关于Web标准的三个部分：结构(Structure)、表现(Presentation)、行为(Behavior)，见图3-12。 | | | 图3-12? Web标准的三个核心元素 | 我们需要还原HTML最初的面貌，用它来描述文档的结构，并且掌握CSS的布局技术来实现页面的排版布局。在设计这种标准的网页时，我们应该先抛去外观，外观在这个时候并不是最重要的，一个结构良好的HTML结构页面可以以任何外观表现出来。如果认真地思考网页所包含的内容，你会发现，你规划的页面结构会包含类似以下几点内容： 标...
2011-08-23
css文件内使用js
这个是我的一个同事使用的方法，之前自己没有用过，看了他写的代码，我震惊了一下，原来css内部竟然也可以使用javascript代码，真实长见识了，学习了…… 下面是其中的一段代码，考了过来，留着以后自己查看使用。 ` #carousel_photo_container #pre { width: expression(document.getElementById("carousel_photo").width/2 600 ? "600px" : this.width); } ` 这单代码主要作用是根据图片的宽度来实现显示时候图片的宽度！
2010-09-05
前端开发所需掌握的技术（1）
?前端开发所需掌握的技术（1） 也许你对前端开发所要掌握的技术不是特别的了解，下面我们再来看一下下面这段招聘信息： 网站前端工程师（Front-end Web developer） 工作职责： 负责网站前端设计及开发。 职位要求： 计算机相关专业，本科以上学历。 精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。 了解不同浏览器之间的差异，写出的代码具有良好的兼容性。 熟悉页面架构和布局，对Web标准和标签语有深入了解。 对用户体验、交互操作流程及用户需求有深入了解。 能根据设计效果图严谨落实界面，精确到像素意识。 有丰富的网站前端工作经验。 笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。 2.1. 业内标准 关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介...
2010-08-31
CSS display:inline 详解
display:inline 它可以让行内显示为块的元素，变为行内显示，例如 DIV1 DIV2 这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了 DIV1 DIV2 DIV1和DIV2这时候显示在同一行了，试试看吧 和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 SPAN1 SPAN2 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。 display:inline比较经典的用法是用在 下的 中 display:inline 对应不显示为 display:none display:block 对应不显示为 hidden 说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方 在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，无论是初接触W...
2011-06-24
子标签float父标签div高度自适应问题（4种解决方法）
经常出现子标签浮动（float），父div不能自适应的问题，如下面的代码，li是float：left，外面div高度自适应 ` - 白芍 - 丹参 - 红景天 - 姜黄 ` 解决方法： 1）在子标签的最后加上清除浮动的标签 可以在ul的下面加上以下代码，清除浮动 ` ` 2)给div加css属性 ` .product { overflow:auto; zoom:1; } ` overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。 3)使用after伪类 ` .product:after { content:”.”; height:0; visibility:hidden; display:block; clear:both; } ` 4)浮动外部元素，float-in-float 这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都...