目录
概述
选择器：通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。
1.元素选择器
作用：通过元素选择器可以选则页面中的所有指定元素(元素=标签)
语法：标签名 {}
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>hello world</p>
</body>2.id选择器
通过元素的id属性值选中唯一的一个元素
语法：#id属性值 {}
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#pid{
color: red;
}
</style>
</head>
<body>
<p id='pid'>hello world</p>
</body>3.类选择器（推荐）
通过元素的class属性值选中一组元素
语法：.class属性值 {}
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.pClass{
color: red;
}
</style>
</head>
<body>
<p class='pClass'>hello world</p>
</body>4.并集选择器（选择器分组）
通过选择器分组可以同时选中多个选择器对应的元素(用逗号分隔)
语法：选择器1,选择器2,选择器N{}
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
#pid,.pClass,h1{
color: red;
}
</style>
</head>
<body>
<h1>welcome</h1>
<p id='pid'>hello</p>
<p class='pClass'>world</p>
</body>5.交集选择器（复合选择器）
作用：可以选中元素同时满足多个选择器的条件
语法：选择器1选择器2选择器N{}
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
/*注意这里只有span中的p能被选中*/
span.pClass{
color: red;
}
</style>
</head>
<body>
<p class='pClass'>hello</p>
<span>
<p class='pClass'>world</p>
<span>
</body>6.通配选择器
作用：可以选中页面中的所有的元素
语法：*{}
<head>
<meta charset="UTF-8">
<title>通配选择器</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h1>welcome</h1>
<p>hello</p>
<p>world</p>
</body>7.子元素选择器（慎用）
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{}
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素。该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
:first-of-type 和:first-child这些非常的类似，只不过child，是在所有的子元素中排列，而type，是在当前类型的子元素中排列
:last-of-type
:nth-of-type*IE6及以下的浏览器不支持子元素选择器
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
/*为p元素中所有span元素设置颜色*/
p>span{
color: red;
}
/*为第一个span设置背景色*/
body > span:first-child{
background-color: yellow;
}
/*为第偶数个span设置背景色*/
body > span:nth-child(even){
background-color: yellow;
}
p:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>hello</span>
<p>
<span>world</span>
</p>
<span>hello again</span>
</body>8.兄弟元素选
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个 选中后一个兄弟
前一个 ~ 后面所有 选中后面所有兄弟
<html>
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/*为span后的一个p元素设置一个背景颜色为黄色*/
span + p{
background-color: yellow;
}
/*为span后的所有p元素设置一个背景颜色为黄色*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
9.后代元素选择器
作用：选中指定元素的指定后代元素（元素之间用空格相隔）
语法：祖先元素 后代元素{}
<head>
<meta charset="UTF-8">
<title>后代元素选择器</title>
<style type="text/css">
/*选中了hello和world*/
#d1 span{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<span>hello</span>
<p>
<span>world</span>
</p>
</div>
</body>10.伪类选择器（特殊状态）
伪类专门用来表示元素的一种的特殊的状态。比如：访问过的超链接，普通的超链接，获取焦点的文本框。
:link表示普通的链接（没访问过的链接）
:visited表示访问过的链接
:hover伪类表示鼠标移入的状态
:active表示的是超链接被点击的状态
* :hover和:active也可以为其他元素设置。但是 IE6中，不支持对超链接以外的元素设置:hover和:active
:focus 表示的是文本框获取焦点
::selection 表示元素选中内容（注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection）
:not(选择器) 表示否定伪类，可以从已选中的元素中剔除出某些元素
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{
color:green;
}
a:visited{
color:blue;
}
p:hover{
color:blue;
}
p:active{
color:skyblue;
}
input:focus{
color:blue;
}
p::selection{
background-color: orange;
}
/*兼容火狐浏览器*/
p::-moz-selection{
background-color: orange;
}
/*给除class属性=pClass以外的所有其他p标签设置红色的背景色*/
p:not(.pClass){
background-color: red;
}
</style>
</head>
<body>
<a href='www.123.com'>123网址</a>
<p>hello</p>
<p class='pClass'>world</p>
<input>focus me</input>
</body>11.伪元素选择器（特殊位置）
:first-letter 表示第一个字符
:first-line 表示 第一行
:before表示元素最前边的部分
:after表示元素的最后边的部分
一般before都需要结合content这个样式一起使用， 通过content可以向before或after的位置添加一些内容
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter {
color: red;
font-size: 20px;
}
p:first-line {
background-color: skyblue;
}
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
</style>
</head>
<body>
<p>hello world</p>
</body>12.属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
* [属性名] 选取含有指定属性的元素
* [属性名="属性值"] 选取含有指定属性值的元素
* [属性名^="属性值"] 选取属性值以指定内容开头的元素
* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
* [属性名*="属性值"] 选取属性值以包含指定内容的元素
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
p[title]{
background-color: yellow;
}
/*为title属性值是hello的元素设置一个背景颜色为黄色*/
p[title="hello"]{
background-color: yellow;
}
/*为title属性值以ab开头的元素设置一个背景颜色为黄色*/
p[title^="ab"]{
background-color: yellow;
}
/*为title属性值以c结尾的元素设置一个背景颜色*/
p[title$="c"]{
background-color: yellow;
}
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
</body>
</html>13.选择器的优先级
* 当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
* 这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
*
* 优先级的规则
* 内联样式 ， 优先级 1000
* id选择器，优先级 100
* 类和伪类， 优先级 10
* 元素选择器，优先级 1
* 通配* ， 优先级 0
* 继承的样式，没有优先级
*
* 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
* 但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样， 则使用靠后的样式。
*
* 并集选择器的优先级是单独计算
* div , p , #p1 , .hello{}
*
* 可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级， 将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
扫一扫
2267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
