备注:
- E、F、G代表任意元素;
- attribute【简写成attr】代表任意元素的属性,value代表属性的属性值;
- 浏览器测试: Chrome 60.0.3112.113、IE 11.0、Firefox 55
基本选择器
基本选择器符号/其他标记 | 语法 | 名称 | 说明 | 范例 | 版本 |
---|---|---|---|---|---|
*(星号) | * {property:value;} | 通用选择器 | 匹配所以元素 | p *{color:#00FF00} | CSS2 |
E | E{property:value;} | 类型选择器 | 匹配指定标记的元素 | p{color:#00FF00} | CSS1 |
#(井号) | #myid{property:value;} E#myid{property:value;} | ID选择器 | 匹配唯一标识id属性为myid的E元素 | #intor{text-align:center} | CSS1 |
.(实点) | .myclass{property:value;} E.myclass{property:value;} | 类选择器 | 匹配class属性为myclassd的所有E元素 | .important {color:red;} p.important {color:red;} .important.urgent {background:silver;} | CSS1 |
通用选择器(*
)
在通用选择,写有*
,匹配任意元素类型的名称。它匹配文档树中的任何单个元素。
如果通用选择器不是简单选择器的唯一组件,则可以省略*
。例如:
- *[lang=fr] 并且[lang=fr]是相当的。
- *.warning并且.warning是相当的。
- *#myid并且#myid是相当的。
注意:
1、任意元素或选择器的前面放在 *;
2、* 和任意元素或选择器之间添加空格;
CSS 代码,通用选择器有四种用法:
- 用法一
单独使用。
语法:* { 执行代码 }
示例:
*{
font-family:"Microsoft YaHei"; /
}
备注:Microsoft YaHei :微软雅黑字体呈现效果:使用"YaHei":Chrome、Firefox呈现效果,而IE无法显示;使用"Microsoft YaHei":Chrome、Firefox、IE都能呈现效果。*/
- 用法二
星号(*
) + 空格 + 元素 组合使用。
语法:* p{ 执行代码 }
示例:
* p{
color:#0000FF;
text-decration:underline;
}
用法二,HTML 和 CSS 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
* .container{
border: 1px solid #0000ff;
}
</style>
</head>
<body>
<p><span class="container">通用选择器</span>全体元素都受到影响</p>
<p>这个段落不受该样式的影响。</p>
<hr/>
<ul class="container">雪糕味道:
<li>芒果味</li>
<li><strong>茉莉</strong>味</li>
<li>草莓味</li>
<li>巧克力味</li>
</ul>
<p class="container">h1~h2 标题效果:</p>
<h1 class="container">一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
运行结果,Chrome、Firefox、IE呈现效果一样。:
- 用法三
星号(*
) + 空格 + 其他类型选择器 组合使用。
语法:* .box{ 执行代码 }
,* #box{ 执行代码 }
等
示例:
* .container{
border: 1px solid #0000ff;
}
- 用法四
前面加了*
的属性,解决浏览器兼容的问题。IE(IE6、IE7 )浏览器才认可这个样式,其它浏览器不会认。也是css hack。
语法:.box{ * 属性 : 值; }
示例:
.container{
border:1px solid #0000ff;
width:220px;
*width:300px;
}
关于CSS hack问题:
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。
用法四,HTML 和 CSS 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
.container{
border:1px solid #0000ff;
width:220px;
*width:300px;
}
</style>
</head>
<body>
<p><span class="container">通用选择器</span>全体元素都受到影响</p>
<p>这个段落不受该样式的影响。</p>
<hr/>
<ul class="container">雪糕味道:
<li>芒果味</li>
<li><strong>茉莉</strong>味</li>
<li>草莓味</li>
<li>巧克力味</li>
</ul>
<p class="container">h1~h2 标题效果:</p>
<h1 class="container">一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
运行结果,Chrome、Firefox、IE呈现效果一样:
类型选择器
类型选择器就是以元素为名的选择器。
比如 p
段落元素,h1
标题元素,ul
li
无序列表元素等
语法:``
p{ color:#0000FF; text-decration:underline; }
h1{ color:color:#01eecc; }
li{ color:#07aa00; }
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
p{
color:#0000FF;
text-decration:underline;
}
h1{
color:#01eecc;
}
li{
color:#07aa00;
}
</style>
</head>
<body>
<ul>雪糕味道:
<li>芒果味</li>
<li><strong>茉莉</strong>味</li>
<li>草莓味</li>
<li>巧克力味</li>
</ul>
<p>h1~h2 标题效果:</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
运行结果:
Chrome、Firefox、IE呈现效果一样。
关系选择器:
关系选择器 | 语法 | 名称 | 说明 | 版本 |
---|---|---|---|---|
, (逗号) | E,F,G{property:value;} | 选择器分组 | 选择所有的E元素、F元素和G元素 | CSS1 |
空格 | E F{property:value;} | 包含选择符/后代选择器 | 选择所有被E元素包含或者后代的F元素 | CSS1 |
>(大于) | E>F{property:value;} | 子元素选择器 | 选择所有作为E元素的子元素F | CSS2 |
+(加号) | E+F{property:value;} | 相邻选择器 | 选择紧贴在E元素之后的F元素 | CSS2 |
~(波浪号) | E~F{property:value;} | 间接相邻选择器 | 选择紧跟E元素之后相邻的全部元素F | CSS3 |
###属性选择器:
注意:E 代表任意元素。
简单属性选择:E[attr]
CSS 代码:
<style src="text/css">
/*两个[]方括号之间不能有空格,否者无法呈现效果*/
*[title] {color:red;}
a[href][title]{color:#ff0000;}
img[alt]{border: 10px solid #32db18;}
</style>
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
a[href][title]{color:#ff0000;}
img[alt]{border: 10px solid #32db18;}
</style>
</head>
<body>
<p>被应用样式:</p>
<a href="http://new.baidu.com" title="百度新闻搜索——全球最大的中文新闻平台">百度新闻</a>
<a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
<a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a><br/><br/>
<img src="./time.png" align="baseline" alt="头像"/>
<p>无法应用样式:</p>
<a href="http://new.baidu.com/society" name="百度新闻">社会新闻</a>
<a href="http://http://www.csdn.net" >CSDN官网</a>
<a title="CSDN首页">CSDN官网</a>
</body>
</html>
运行结果:
根据具体属性值选择
CSS 代码:
<style src="text/css">
a[href="http://new.baidu.com"]{color: #e20600;}
/*两个[]方括号之间不能有空格,否者无法呈现效果*/
a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}
/*结合class选择器使用*/
p[class="important warning"] {color:#24CC03;}
</style>
HTML 代码1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>test测试</title>
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
a[href="http://new.baidu.com"]{color: #e20600;}
</style>
</head>
<body>
<p class="important warning">被应用样式:</p>
<a href="http://new.baidu.com" title="百度新闻">百度新闻</a>
<p class="important">无法应用样式:</p>
<a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>
<a href="http://new.baidu.com/gouji" title="百度新闻">国际新闻</a>
<a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>
<a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
</body>
</html>
运行效果:
HTM 代码2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}
p[class="important warning"] {color:#24CC03;}
</style>
</head>
<body>
<p class="important warning">被应用样式:</p>
<a href="http://new.baidu.com" title="百度新闻">百度新闻</a>
<p class="important">无法应用样式:</p>
<a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>
<a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>
<a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
</body>
</html>
运行结果:
根据部分属性值选择
CSS 代码:
<style src="text/css">
p[class~="important"]{color:#24CC03;}
</style>
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
p[class~="important"]{color:#24CC03;}
</style>
</head>
<body>
<p class="important warning">第一段落被应用样式</p>
<p class="important">第二段落被应用样式</p>
<p class="warning">第三段落无法应用样式:</p>
</body>
</html>
运行结果:
部分值属性选择器与点号类名记法的区别
CSS 代码:
<style src="text/css">
img[title~="Figure"]{border: 1px solid gray;}
</style>
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
img[title~="Figure"]
{
border: 10px solid gray;
}
</style>
</head>
<body>
<h2>可以应用样式:</h2>
<img title="Figure 1" src="松鼠.png" />
<img title="Figure 2" src="兔子.png" />
<hr />
<h1>无法应用样式:</h1>
<img src="松鼠.png" />
<img src="兔子.png" />
</body>
</html>
运行结果:
子串匹配属性选择器
- E[attr*=“value”] 选择器
CSS 代码:
<style src="text/css">
a[href*="http://new.baidu.com"][title="百度新闻"]{color: #136c97;}
</style>
- E[attr^=“value”] 选择器**
CSS 代码:
<style src="text/css">
a[href^="http"]{color:#ff0000;}
</style>
- E[attr$=“value”] 选择器
CSS 代码:
<style src="text/css">
/*匹配属性值以指定值结尾的每个元素。如下两个CSS样式,效果不同*/
p[class$="test"]{background:#ffff00;}
[class$="test"]{background:#FF8329;}
</style>
HTML 代码一:
<!DOCTYPE html>
<html>
<head lang="zh-HK">
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
p[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<p class="first_test">第一段落有应用样式。</p>
<p class="second">第二段落无法应用样式。</p>
<p class="test">第三段落有应用样式。</p>
<h2 class="test">标题无法应用样式。</h2>
</body>
</html>
HTML 代码二:
<!DOCTYPE html>
<html>
<head lang="zh-HK">
<meta charset="utf-8">
<title>test测试</title>
<style type="text/css">
[class$="test"]
{
background:#FF8329;
}
</style>
</head>
<body>
<p class="first_test">第一段落有应用样式。</p>
<p class="second">第二段落无法应用样式。</p>
<p class="test">第三段落有应用样式。</p>
<h2 class="test">标题无法应用样式。</h2>
</body>
</html>
- E[attr|=“value”]选择器
CSS 代码:
<style src="text/css">
[lang|=en]{background:yellow;}
[class|=top]{background-color:yellow;}
</style>
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top]
{
background:yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="content">Are you learning CSS?</p>
<p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value],必须声明 <!DOCTYPE>。</p>
</body>
</html>
结构伪类选择器:
注意:E 代表任意元素。
伪类选择器 | 语法 | 说明 | 版本 |
---|---|---|---|
:root | E:root{property:value;} | 选择匹配E 元素所有文档的根元素 | CSS2 |
:not(s) | E:not(s){property:value;} | 选择匹配所有不匹配简单选择器s 的E 元素 | CSS3 |
:empty | E:empty{property:value;} | 匹配没有任何子元素(包括text节点)的元素E | CSS3 |
:target | E:target{property:value;} | 匹配当前链接地址指向的E 元素 | CSS3 |
:first-child | E:first-child{property:value;} | 匹配父元素的第一个子元素E | CSS3 |
:last-child | E:last-child{property:value;} | 匹配父元素的最后一个子元素E | CSS2 |
:n-child(n) | E:n-child(n){property:value;} | 匹配父元素的第n 个子元素E | CSS3 |
:n-last-child(n) | E:n-last-child(n){property:value;} | 匹配父元素的倒数第n 个子元素E | CSS3 |
:only-child | E:only-child{property:value;} | 匹配父元素的仅有的一个子元素E | CSS3 |
:first-of-type | E:first-of-type{property:value;} | 匹配同类型中的第一个同级兄弟元素E | CSS3 |
:last-of-type | E:last-of-type{property:value;} | 匹配同类型中的最后一个同级兄弟元素E | CSS3 |
:only-of-type | E:only-of-type{property:value;} | 匹配同类型中的唯一一个同级兄弟元素E | CSS3 |
:nth-of-type(n) | E:nth-of-type(n){property:value;} | 匹配同类型中的第n 个同级兄弟元素E | CSS3 |
:nth-last-of-type(n) | E:nth-last-of-type(n){property:value;} | 匹配同类型中的倒数第n 个同级兄弟元素E | CSS3 |
其中,E:nth-child(n)中的参数n,可以是一个数字,可以是关键字odd或even,可以是公式2n 或 2n-1等,n的索引起始值为1。
状态伪类选择器:
伪类选择器 | 语法 | 说明 | 版本 |
---|---|---|---|
:link | E:link{property:value;} | 设置未访问的链接 | CSS1 |
:visited | E:visited{property:value;} | 设置已访问的链接 | CSS1 |
:hover | E:hover{property:value;} | 设置光标移动到链接上时 | CSS1/CSS2 |
:active | E:active{property:value;} | 设置选定的链接 | CSS1/CSS2 |
:focus | E:focus{property:value;} | 设置元素在成为焦点(onfocus事情发生)时的样式 | CSS1/CSS2 |
:checked | E:checked{property:value;} | 匹配表单上处于选中状态的元素E (radio 和 checkbox) | CSS3 |
:enabled | E:enabled{property:value;} | 匹配表单上处于可以状态的元素E | CSS3 |
:disabled | E:disabled{property:value;} | 匹配表单上处于禁用状态的元素E | CSS3 |
伪元素选择器:
伪类选择器 | 语法 | 说明 | 版本 |
---|---|---|---|
:first-letter/::first-letter | E :first-letter{property:value;} | 设置对象内的第一个字符的样式 | CSS1/CSS3 |
:first-line/::first-line | E :first-line{property:value;} | 设置对象内的第一行的样式 | CSS1/CSS3 |
:before/::before | E :before{property:value;} | 设置在对象前发生的内容,与content 属性一起用 | CSS2/CSS3 |
:after/::after | E :after{property:value;} | 设置在对象前发生的内容,与content 属性一起用 | CSS2/CSS3 |
::selection | E ::selection{property:value;} | 设置在对象被选择时的颜色 | CSS3 |