- 浏览: 119698 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
煎蛋就是幸福:
...
试读《跨终端Web》 -
xiaoshitoushifa:
最好把demo贴上啊!发一份到435065893@qq.com ...
漂亮的系统后台UI 欣赏 -
xiaoshitoushifa:
只有图片 没有demo 啊
漂亮的系统后台UI 欣赏
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。
1. *
* {
margin: 0;
padding: 0;
}
星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用。
#container * {
border: 1px solid black;
}
上面的代码中会应用于id为container元素的所有子元素中。 除非必要,我不建议在页面中过的的使用星状选择符,因为他的作用域太大,相当耗浏览器资源。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container {
width: 960px;
margin: auto;
}
井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10), 作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择 器的地步? 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error {
color: red;
}
这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a {
text-decoration: none;
}
这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y,要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有 的情况是不宜使用的,比如上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要 考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用,就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
5. X
a { color: red; }
ul { margin-left: 0; }
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
6. X:visited和X:link
a:link { color: red; }
a:visted { color: purple; }
使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p {
color: red;
}
相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素) 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
8. X>Y
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。在上面的css和html例子中,div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p {
color: red;
}
相邻选择器,与前面提到的X+Y不同的是,X~Y匹配与X相同级别的所有Y元素,而X+Y只匹配第一个。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] {
color: green;
}
属性选择器。比如上述代码匹配的是带有title属性的链接元素。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://css9.net"] {
color: #1f6053;
}
属性选择器。 上面的代码匹配所有拥有href属性,且href为http://css9.net的所有链接。
这个功能很好,但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢?看下一个选择器。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"]
a[href*="css9.net"] {
color: #1f6053;
}
属性选择器。正如我们想要的,上面代码匹配的是href中包含"css9.net"的所有链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
属性选择器。上面代码匹配的是href中所有以http开头的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href$=".jpg"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
属性选择器。在属性选择器中使用$,用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。(注意,这里仅仅是.jpg图片,如果要作用于所有图片链接该怎么做呢,看下一个选择器。)
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
14. X[data-*="foo"]
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现,需要这样做:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性,例如‘data-file’
html代码
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下:
a[data-filetype="image"] {
color: red;
}
这样所有链接到图片的链接字体颜色为红色。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子:
html代码
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代码
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中,匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素,如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代码中匹配的是所有处于选定状态的单选radio,设置1px的黑色边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容,看一个简单的例子:
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动,写法如下:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
19. X:hover
div:hover {
background: #e3e3e3;
}
:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是,在ie 6中,:hover只能用于链接元素。
这里分享一个经验,在设定链接划过时出现下滑线时,使用border-bottom会比text-decoration显得更漂亮些。代码如下:
a:hover {
border-bottom: 1px solid black;
}
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代码中设定了段落中第一行的样式:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
(IE6竟然支持,有些意外啊。)
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中,设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法,在下面例子中设定第偶数个元素的样式,可以用它来实现隔行换色:
tr:nth-child(2n) {
background-color: gray;
}
兼容浏览器:IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
与X:nth-of-type(n)功能类似,不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:
ul:nth-last-of-type(3) {
border: 1px solid black;
}
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {
border-bottom:none;
}
与:first-child类似,它匹配的是序列中的最后一个元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {
color: red;
}
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代码中第一个div中的段落p将会被匹配,而第二个div中的p则不会。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
这个伪类匹配的是,在它上级容器下只有它一个子元素,它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同,匹配出现的第一个元素。我们来看个例子:
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
在上面的html代码中,如果我们希望仅匹配List Item 2列表项该如何做呢:
方案一:
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
方案二:
p + ul li:last-child {
font-weight: bold;
}
方案三:
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera。
发表评论
-
去掉谷歌浏览器默认的input、textarea的边框
2012-08-08 10:33 8671、使用Chrome的都知道,当鼠标焦点在input、text ... -
autocomplete 属性规定输入字段是否应该启用自动完成功能。
2012-08-08 10:27 1303定义和用法 autocomplete 属性规定输入字段是否应 ... -
IE6,IE7下按钮(BUTTON)变宽的解决方法
2011-12-07 16:01 649代码如下: .button{overflow: visible ... -
CSS-命名总结
2011-11-02 07:47 783CSS-命名总结 CSS书写命名总结 一、命名原则: ... -
input样式
2011-09-10 15:23 686无边:border:0 none; outline-style ... -
用CSS实现图片替换文字三种方法(Image replacement)
2010-04-19 16:42 1230不论是对浏览者还是对 ... -
字体对齐方式对li行间距的兼容影响
2010-04-14 23:05 1353在进行布局的时候注意对li相关文字内容设置文字对齐方式,否则会 ... -
全面兼容IE6/IE7/IE8/FF的CSS HACK写法
2010-04-11 11:15 883浏览器市场的混乱,给 ... -
认识display:inline;与float:left;
2010-04-04 08:20 1021一. 首先我们要 ...
相关推荐
CSS 选择器是 CSS 中最重要的概念之一,用于选取要应用样式的元素。常用的选择器有: 1. 通配符选择器: `*`,选取所有元素。 2. 类型选择器: `h1`,选取所有 h1 元素。 3. 类选择器: `.class`,选取所有具有指定...
可以同时选中符合多个选择器的元素 语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} ...
具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、XML标签、CSS滤镜等。文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉...
常用的解析工具有正则表达式、XPath、Beautiful Soup等。这些工具帮助爬虫定位和提取目标数据,如文本、图片、链接等。 数据存储: 爬虫将提取的数据存储到数据库、文件或其他存储介质中,以备后续分析或展示。常用...
CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。 1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而...
CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。 1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而...
功能 爬虫基础知识 ...使用CSS选择器和XPath选取元素 CSS选择器 XPath 正则表达式的使用 正则表达式的基础知识和基本使用; 正则表达式中的分组构造; 常用匹配模式; Url抓取(当Url太多时,UI会卡) 抓取指定网
BS4库是一个Python库,提供了CSS选择器的实现。jquery是一个JavaScript库,提供了选择HTML文档中的元素的功能。PyQuery模块是一个Python库,提供了jquery的实现。Json是一种数据交换格式,用于交换结构化数据。Json...
16. CSS 选择器:包括标签选择器、类选择器、ID 选择器、属性选择器等。 17. CSS 中隐藏元素的方法:可以使用 display、visibility、opacity 等属性来隐藏元素。 18. 超链接访问后 hover 样式不出现的问题:可以使用...
它支持XPath和CSS选择器进行网页内容提取,同时也提供了方便的数据导出功能。 Beautiful Soup:Beautiful Soup是一个HTML/XML解析库,能够从网页中提取数据,并提供了简单易用的API操作。它适合用于静态网页的解析...
我们也看到了一些CSS选择器,如`body`、`label`、`ul`、`.btn`、`.separator`和`.title`等,这些选择器用于选择不同的HTML元素,并应用相应的样式。 在JavaScript脚本中,我们看到了一些代码,用于处理文档的加载和...
Css 选择器 .a+.b 的含义是选择所有拥有类名 a 的元素的下一个兄弟元素中拥有类名 b 的元素。 12. JS 节流,防抖代码的使用场景与简单实现: JS 节流和防抖是两个常用的函数节流技术,用于优化函数的执行性能。节流...
- **HTML和CSS**:基础的HTML结构和CSS选择器知识,用于定位网页中的特定元素。 - **编写步骤**:确定目标网站和数据,分析网页结构,编写爬虫代码,合理设置请求间隔,处理异常。 - **法律和道德**:遵守版权法、...
* 学习 CSS 需要掌握选择器、样式规则、盒模型、浮动、定位等概念 * 在学习 CSS 时,需要测试和实践各种样式效果,并写出相应的代码 三、JavaScript * JavaScript 是一种脚本语言,负责网页的交互和动态效果 * ...
2、CSS 语法,选择器,使用大括号来包围属性。 CSS样式加载的几种方式介绍: 外部样式: <link href="layout.css" rel="stylesheet" type="text/css" /> 内部样式: <style> h2 { color:#f00;} </...
css选择器 css的存在形式及优先级 css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position ...
2. 使用DOM或CSS选择器来查找、取出数据; 3. 可操作HTML元素、属性、文本; jsoup是基于MIT协议发布的,可放心使用于商业项目。 gson 主要用于在网络上获取数据解析文件,非常常用,而且只装单独包,即可用!!
解析网页的方法主要包括正则表达式、XPath和CSS选择器等。 三、爬虫开发环境搭建 1. 安装Python:Python是爬虫开发的主要语言,需要先安装Python环境。可以从Python官网下载对应版本的安装包进行安装。 2. 安装爬虫...