什么是选择器和其作用
实现对HTML页面中的元素实现一对一，一对多或者多对一的控制。
HTML页面中的元素就是通过CSS选择器进行控制的
比如：p这个选择器就表示选择页面中的所有的p元素(标签)，在选择器之后所设置的样式会 应用到所有的p元素上。
各类选择器
由于网页实现的效果和功能不一样，所以要用到不同的样式，那么选择器也是如此，可以实现对不同元素的控制，从而达到对网页的多重显示。
元素选择器
元素选择器(标签选择器)，可以根据标签的名字来从页面中选取指定的元素。通常选择器会写在<head>标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
p{
color:black;
font-family: sans-serif;
}
</style>
</head>
<body>
<h>我是元素选择器的介绍</h1>
<p>我是</p>
</body>
</html>
001.JPG
上图中可以看到:
- 标题是：我是元素选择器的介绍
- 而段落中的“我是”，字体成为了红色，因为我在元素选择中设置了颜色为红色。
类选择器
类选择器，可以根据元素的class属性 值 选取元素。不过得在<body>标签中定义类。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.hello{
font-size:25px;
}
.p2{
color: blue;
}
.p3{
color:red;
}
span.p3{
color:chartreuse;
font-size: 30px;
}
</style>
</head>
<body>
<h1>悯农</h1>
<!--标题-->
<p id="p1">床前明月光</p>
<!--
我们可以为元素设置class属性
它和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
-->
<p class="p2 hello">我是p2类，但是还有个兄弟hello</p>
<!--可以同时为一个元素设置多个class属性值，上为值为p2和hello，下面只是类属性，值都为p2。多个值之间使用空格隔开-->
<p class="p2">我只是单个p2类，没有兄弟hello</p>
<p class="p2">床前明月光</p>
<p>我是p标签</p>
<p class="p3">我是p3类，没有兄弟</p>
<span class="p3">我是span标签中的p3类</span>
</body>
</html>
在上面的代码中我们看到，虽然有含有类的标签有5个，但是类属性相同的有2两个:
- <p class="p2">我只是单个p2类，没有兄弟hello</p>
-
<p class="p2">床前明月光</p>
而<p class="p2 hello">我是p2类，但是还有个兄弟hello</p>中，虽然也定义了一个属性p2，但是后面多加了一个属性hello。所以我们为了区别多属性和单一属性的区别，在内部样式中，给含有hello属性的标签，又添加了一个字体的大小，这样两个都有p2属性的标签，却在显示的时候不一样了。
001.JPG
看的比较仔细的小伙伴会发现，有两个属性相等的p3但是页面显示时结果却不一样，这是为什么呢？
*<p class="p3">我是p3类，没有兄弟</p>
*<span class="p3">我是span标签中的p3类</span>
其实不难发现，虽然属性是相同的，但是我们定的标签不一样呀！所以我们在写样式的时候，特意把标签也加上了，表明我们span.p3（即我是span标签中类属性值为p3的行），也是下面我们要讲到的（复合选择器）交集选择器。
ID选择器
ID选择器，可以根据元素的id属性值选取元素，虽然看着和类选择器有点相似，但是最大的区别就是，类属性可以定义多个相同的，就如同上面的代码一样，有多个一样的属性，如p2，但是id属性是不能重复的。
<!DOCTYPE html>
<html lang='en'>
<html>
<head>
<meta charset='utf-8'>
<meta name='description' content='id选择器，选择器' >
<meta name='keywords' content='id选择器，什么是id选择器'>
<title>我这里是id选择器的介绍</title>
<style>
#p1{
font-size:30px;
color:red;
}
#p2{
font-size:35px;
color:blue;
}
</style>
</head>
<body>
<h1>id选择器是这样的</h1>
<p id='p1'>子曰：学而时习之。</p>
<p id='p2'>子曰：学而时习之。</p>
<!--这里同样的Id属性，但是，因为值不能相同，所以我们分别给了一个p!和p2-->
</body>
</html>
id.JPG
切记，给标签定义id属性时，值一定不能为重复的。
复合选择器（交集选择器）
上面的类选择器中我们已经用到了。
span.p3{
color:chartreuse;
font-size: 30px;
}
<!--会选中页面中具有p3class的span元素-->
群组选择器(并集选择器)
群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
我们在实际的操作过程中通常会遇到一个场景，即元素很多，但是我们又想让他们的样式一样，总不能像我们介绍元素选择器那样，一个个的定义样式吧。
所以我们通常会使用群组选择器，这样代码更加简单，但是效果却不丢失。
<!DOCTYPE html>
<html lang='en'>
<html>
<head>
<meta charset='utf-8'>
<meta name='description' content='id选择器，选择器' >
<meta name='keywords' content='id选择器，什么是id选择器'>
<title>我这里是id选择器的介绍</title>
<style type="text/css">
p,.p1{
font-size:30px;
color:red;
}
</style>
</head>
<body>
<h1>id选择器是这样的</h1>
<p>子曰：学而时习之。</p>
<p>子曰：有朋自远方来。</p>
<p class="p1">子曰：学而时习之</p>
</body>
</html>
这里我们用了群组选择器，把p元素和含有类属性值为p1的元素，都设置为相同的字体大小和颜色了。
并集选择器.JPG
通用选择器
通用选择器和我们学习过的其他编程语言一样，用了一个通配符会选中页面中所有的元素。
后代选择器
在介绍后代选择器的时候，我们首先得明白html中的族谱，如下所示:
族谱.JPG
通过观察族谱我们可以了解各个标签之间的关系:
- 祖先元素
---直接或间接包含后代元素的元素。 - 后代元素
---直接或间接被祖先元素包含的元素。 - 父元素
---直接包含子元素的元素。 - 子元素
---直接被父元素包含的元素。 - 兄弟元素
---拥有相同父元素的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素和后代元素选择器</title>
<style type="text/css">
/*为div中的span设置一个颜色为绿色*/
/*
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
*/
#d1 span{
color: green;
background-color:black;
}
/*选中id为d1的div中的p元素中的span元素,字体大小为50px*/
#d1 p span{
font-size: 50px;
}
/*为div的子元素span设置一个背景颜色为黄色*/
/*
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
*/
div > span{
background-color: yellow;
}
h1>strong {
background-color:red;
}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is really <em><strong>very</strong></em> important.</h1>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body标签中的span</span>
</div>
</body>
</html
在上面的代码中我们写了两个<div>标签，不同的是，我们给第一个增加了一个id属性值为d1。这样我们在写内部样式表的时候，就会看到区别。
- 在第一个我们用id选择器的特殊符号 # 选择了属性值为d1的标签div，并设置颜色为绿色
- 第二个我们用了后代选择器，即:#d1 p span 这样我们给整个span元素设置了一个字体大小为50px。
- 第三个，我们用了子代选择器，特别注意的是，我们在这里加了一个符号 >作为子代选择器的特殊用法。
后代选择器.JPG
伪类和伪元素
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
设置链接的状态-->伪类选择器
有时候我们在浏览网页的时候回看到，鼠标滑过的、点过的、和悬停的，和正常链接颜色都能是不一样的，其实这个也是通过伪类选择器来实现的。
伪类选择器用来表示特殊状态的。
- 正常链接
---a:link - 访问过的链接
---a:visited（涉及用户的隐私了，只能定义字体颜色，像其他的字体大小都不能设置。） - 鼠标滑过的链接
---a:hover - 正在点击的链接
---a:active
如果上面的都想实现，那就得按照上面的顺序，一次写，因为颜色的继承也是有优先级的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*
伪类专门用来表示元素的一种特殊的状态
比如：访问过的超链接、普通的超链接、获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
*/
/*
为没访问过的链接设置一个颜色为黄色
:link 表示普通的链接（没访问过的链接）
*/
a:link{
color: yellow;
font-size: 50px;
}
/*
为访问过的链接设置一个颜色为红色
:visited 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色，比如用户点进去一个小网页，却说没有访问过，但是网页字体却变了，是不是就露馅了。
*/
a:visited{
color: red;
}
/*
:hover 表示鼠标移入的状态，即: 悬停状态
*/
a:hover{
color: skyblue;
}
/*
:active 表示超链接被点击的状态 即：点击了但是没有移开
*/
a:active{
color: black;
}
/*
:hover和:active也可以为其它元素设置
IE6中，不支持对超链接以外的元素设置:hover和:active
*/
</style>
</head>
<body>
<a class="abc" href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a class="bcd" href="http://www.hao123.com">没访问过的链接</a>
<p>我是一个段落</p>
</body>
</html>
其他的伪类和页面内的文本框
- 获取焦点
——:focus - 选中的元素(就是鼠标选择时)p::selection{}
——::selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*文本框获取焦点以后，修改背景颜色为黄色，即点进去就是获取焦点*/
input:focus{
background-color: yellow;
}
/*
为p标签中选中的内容使用样式可以使用::selection伪类
注意：这个伪类在火狐中需要采用另一种方式编写
选中就是你用鼠标选中p标签内的内容。
*/
/*兼容大部分浏览器的*/
p::selection{
background-color: orange;
}
/*兼容火狐的*/
p::-moz-selection{
background-color: orange;
}
</style>
</head>
<body>
<p>请在这里输入想要查找的内容</p>
<input style="color: yellow">
</body>
</html>
给段落或者行首定义样式
- 首字母(还有行内首个汉字)
——:first-letter - 首行(给整个段落内的整个首行)
——:first-line - 指定元素前
——:before - 指定元素后
——:after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
/*使用伪元素来表示元素中的一些特殊的位置*/
/*为p中第一个字符来设置一个特殊的样式
颜色为红色，字体大小为20px
*/
p:first-letter{
color: red;
font-size: 20px;
}
/*为p中的第一行设置一个背景颜色为黄色*/
p:first-line{
background-color: yellow;
}
</style>
</head>
<body>
<p>
锄禾日当午,<br>
汗滴禾下土。<br>
谁知盘中餐,<br>
粒粒皆辛苦。 <br>
</p>
</body>
</html>
效果如图所示，注意看首个汉字。
伪元素.JPG
其他选择器
属性选择器可以挑选带有特殊属性的标签即：
可以根据元素中的属性或属性值来选取指定元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素
*/
/*为所有具有title属性的p元素，设置一个背景颜色为黄色*/
p[title]{
background-color: yellow;
}
/*!*为title属性值是hello的元素设置一个背景颜色为黄色*!*/
p[title="hello"]{
background-color: red;
}
/*!*为title属性值以ab开头的元素设置一个背景颜色为黄色*!*/
p[title^="ab"]{
background-color: blue;
}
/*!*为title属性值以c结尾的元素设置一个背景颜色*!*/
p[title$="c"]{
background-color:brown;
}
/*!*为title属性值包含c的元素设置一个背景颜色*!*/
p[title*="f"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个title属性值为hello的段落</p>
<p>我是一个普通的p标签段落</p>
<p title="abb">我是以ab开头的段落</p>
<p title="abccfd">我是属性值中有f的段落</p>
<p title="dabc">我是以c结尾的段落</p>
</body>
</html>
我们首先样式的第一个
-
p[title]{
background-color: yellow;
}
为所有具有title属性的p元素，定义背景元素为黄色
所有属性为title的p标签.JPG
接下来我们一共展示以下的集中属性值不同的样式
- 属性值为hello的p元素 ---> p[title="hello"]
- 属性值中以ab开头的p元素 ---> p[title^="ab"]
- 属性值以c结尾的p元素 ---> p[title$="c"]
- 属性值中包含f的p元素 ---> p[title*="f"]
不同样式的属性值.JPG
子元素选择器
子元素选择器我们在上面的选择器中有点设计，它主要的用途就是可以给一个元素的子元素设置样式。而且是直接的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素</title>
<style type="text/css">
/*为div的子元素span设置一个背景颜色为黄色*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body标签中的span</span>
</div>
</body>
</html
通过我们写的代码可以看到，我在div标签下，有很多span的元素，但是我想让除了父代元素是p标签的所有span标签变成黄色，那么我们这里就用了子代选择器通过加了一个大于号 >来实现。
子元素选择器.JPG
为了满足很多人的不同想法，其实还有很多其他的子元素选择器
- :first-child
选择第一个子标签 - :last-child
选择最后一个子标签 - :nth-child
选择指定位置的子元素 - :first-of-type
- :last-of-type
- :nth-of-type
选择指定类型的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
/*由于在body中有p元素，在div中也有p标签，如果不用如下的写法，那么第一个都会变色。*/
body>p:first-child{
background-color: yellow;
}
p:last-child{
background-color: red;
}
/*even为选中了偶数行，odd为选中奇数行
也可以在里面写相应的数字，那就成了制定行了。
*/
p:nth-child(even){
background-color: blue;
}
</style>
</head>
<body>
<!--<span>我是span</span>-->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<div>
<p>我是一个p标签</p>
</div>
</body>
</html>
:first-of-type
:last-of-type
:nth-of-type
/*和child类似，只不过child是在所有的子元素中找*/
/*而type是在当前类型的子元素中找，下面的例子即在p标签内的第一个和最后一个
这个大家可以自己写着看看有啥不一样。
*/
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: red;
}
兄弟选择器
除了根据祖先父子关系，还可以根据兄弟 关系查找元素。
用法：
- 查找后边一个兄弟元素
---兄弟元素 + 兄弟元素{} - 查找后边所有的兄弟元素
---兄弟元素 ~ 兄弟元素{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
*/
span + p{
background-color: yellow;
}
/*
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
在这段代码中我们大家要注意的就是
- 兄弟即同一个父类元素。
- 在查找兄弟后面那个兄弟元素时，必须是紧跟着的就是要查找的，如果中间加一个其他的，那是不会被选中的。
- 查找后面的兄弟元素时，那就是只要是在后面，那我们就选中。
否定伪类
既然我们能选中伪类，那么我们也能不选中其中的某个值。
否定伪类可以帮助我们选择不是其他东西 的某件东西。
语法:
:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。
网友评论