CSS选择器到底有哪些？CSS笔记（一）
文章目录
- CSS简介
- CSS样式编写
- 1、内联样式
- 2、内部样式
- 3、外部样式
- CSS语法
- 选择器
- 常用的选择器
- 元素选择器
- id选择器
- 类选择器
- 选择器分组（并集选择器）
- 通配选择器
- 复合选择器（交集选择器）
- 后代元素选择器
- 子元素选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器：
- 兄弟元素选择器
- 否定伪类选择器
- 声明块
- 块和内联元素(html)
- 之前的笔记
之前两次笔记我们简单的介绍了一下HTML，接下来我们学习一下css，就是我们之前所说，结构、表现、行为中的 表现。我们发现之前做的html好像不是很美观吧。。。那什么是表现呢，简单来说，我们的图片大小、字体大小、背景颜色等所有外在的东西，全都叫做 表现，由我们的css负责。
CSS简介
层叠样式表(Cascading Style Sheets)
- 首先说下什么是样式，比如我们要设置网页字体的大小，网页的背景等等，这些东西都叫做样式，而样式表就是多个样式总汇成的表。css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。
- 所谓层叠，可以将网页看成一层一层的结构，层次高的会覆盖层次低的。
- 而css就可以为网页的各个层次设置样式。
CSS样式编写
1、内联样式
接下来我们说下如何编写我们的CSS样式。
<html>
<head>
<meta charset="UTF-8">
<title>CSStitle>
head>
<body>
<p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土。p>
<p>谁知盘中餐，粒粒皆辛苦。p>
body>
html>=
-
内联样式（可以将css样式编写到元素的style属性当中）：< p style=“color: red;font-size: 40px;” > 锄禾日当午，汗滴禾下土。< /p >这样编写在p标签内部就是内联样式，简单说来内联样式就是将我们的样式直接编写到我们的style属性当中，这种样式我们称之为内联样式，内联样式只对当前元素内容起作用。内联样式不方便我们重复使用。
但是此时我们的css和html都写在一起了，这其中的
color: red;font-size: 40px;就是css，我们说一个优秀的页面要求我们的结构、表现、行为分离！！！但是现在很明显不满足要求。所以内敛样式属于结构与表现的耦合，不方便后期维护，不推荐使用！！
那说了这么多，不让我们用，我们到底要怎么写我们的CSS呢？让我们看看。
2、内部样式
<html>
<head>
<meta charset="UTF-8">
<title>CSStitle>
<style type="text/css">
p{
color: red;
font-size: 40px;
}
style>
head>
<body>
<p>锄禾日当午，汗滴禾下土。p>
<p>谁知盘中餐，粒粒皆辛苦。p>
body>
html>
- 内部样式表：也可以将CSS编写到head中的style标签中。将我们的样式表编写到我们的style标签中，通过我们的CSS选择器(上面代码中p{}就是选择我们的p标签)选中指定元素，然后可以同时为这些元素一起设置样式，可以时样式进一步的复用。将我们的样式表编写到style标签中，也可以使结构和表现进一步分离，这也是我们推荐的使用方式。
我们推荐使用的内部样式能在这一个页面中使用，但是如果我们想在其他页面使用应该怎么办呢？来看看第三种样式吧！！！
3、外部样式
除了以上两种方式，还可以将我们的CSS写到外面去。可以在文件夹中新建一个css文件，将我们之前内部样式表style中的内容放进去。然后我们只需要将style.css文件进入到我们的页面中。
那怎么引入呢？通过link标签！！！
<html>
<head>
<meta charset="UTF-8">
<title>CSStitle>
<link rel="stylesheet" type="text/css" href="style.css">
head>
<body>
<p>锄禾日当午，汗滴禾下土。p>
<p>谁知盘中餐，粒粒皆辛苦。p>
<p>锄禾日当午，汗滴禾下土。p>
<p>谁知盘中餐，粒粒皆辛苦。p>
body>
html>
link标签中的rel、type都是固定的照抄就完事，href写一个相对路径就可以了。这样就能将我们上面的style.css文件引入到我们的网页了。让我们来看一下效果。
没问题！！！将我们的css统一编写到外部样式表中，完全将我们的结构和表现分离。分离方式更彻底，可以是我们的样式表在不同页面中使用，最大限制的使我们的样式可以复用。而且不仅仅这样，将样式写在外部样式表中，通过link引入，可以利用浏览器的缓存，加快访问速度提高用户体验！！！
解释一下，为什么可以达到这样的效果。假设我们目前有三个网站 A B C 这三个网站都引入了同一个css文件，那么第一次访问A网站的时候可能会慢一点，但我们打开B网站的时候，它的css文件已经在我们访问A文件的时候缓存好了，所以我们打开B网站、C网站的速度都会有所提高。就是这样提高了我们的用户体验！！！
所以，在开发中，我们最推荐使用的就是外部样式表！！！
CSS语法
<html>
<head>
<meta charset="UTF-8">
<title>CSStitle>
<style type="text/css">
/*
css的注释，作用和我们的html注释类似，只不过必须编写在style标签中，或者css文件中。
选择器：通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。
声明块：声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。
例如:"color:red;"一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使 用;来隔开,声明的样式名和样式值之间使用:来连接。
*/
p{
color: red;
font-size: 40px;
}
style>
head>
<body>
<p>今天天气真不错，PM2.5也就500！p>
body>
html>
首先我们发现，style标签中要使用我们css的语法。比如上面的注释/* … */已经和html的不一样了。
而我们css语法主要就是选择器和声明块。
选择器
通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。
<html>
<head>
<meta charset="utf-8">
<title>常用选择器title>
head>
<style type="text/css">
p{
color: red;
}
h1{
color: blue;
}
#p1{
font-size: 40px;
}
.p2{
color: purple;
}
.hello{
font-size: 50px;
}
style>
<body>
<h1>悯农h1>
<p id="p1">锄禾日当午p>
<p class="p2 hello">锄禾日当午p>
<p class="p2">锄禾日当午p>
<p>锄禾日当午p>
body>
html>
常用的选择器
-
元素选择器
- 作用：通过元素选择器，可以选择页面中所有指定元素。
- 语法：标签名{} 。
-
id选择器
- 使用方法：通过元素的id属性值选中唯一的一个元素。
- 语法：#id属性值{}。
-
类选择器
- 先介绍一个属性class。我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素。相对与id，class的功能更强一些。可以同时为一个元素设置多个class属性，多个值之间使用空格隔开。
- 作用：通过元素的class 属性值选中一组元素
- 语法：.class属性值{}。
-
选择器分组（并集选择器）
假设还是上面那段代码，现在我们要为id为p1的元素，class为p2的元素，还有h1，同时设置背景颜色为黄色。我们要怎么做呢？？？
#p1{
background-color: yellow;
}
.p2{
background-color: yellow;
}
h1{
background-color: yellow;
}
这样么？？？确实能达到效果，但不得不说有点缺心眼Σ(oﾟдﾟoﾉ)…
那就需要我们的选择器分组。
- 作用：通过选择器分组可以同时选中多个选择器对应的元素。
- 语法：选择器1,选择器2,选择器3。
#p1,.p2,h1{
}
这样就能简介的完成我们的代码了。
-
通配选择器
- 作用:他可以选中页面中所有的元素。
- 语法：*{}。
-
复合选择器（交集选择器）
- 作用:可以选中同时满足多个选择器中的元素(同时满足所有选择器)。
- 语法：选择器1选择器2选择器3{}。
p#p1{
background-color: red;
}
注意上面小框中的代码，尽量不要这么使用。
对于id选择器来说，不建议使用复合选择器。一般是类选择器才用。
-
后代元素选择器
有后代就有祖先，有儿子就有父亲。
那么我们先来看一下这些元素之间的关系。
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div span{
color: greenyellow;
}
style>
head>
<body>
<div id="">
<span>我是div标签中的spanspan>
<p><span>我是p标签中的spanspan>p>
div>
<span>我是body中的span元素span>
body>
html>
- 元素之间的关系
- 父元素:直接包含子元素的元素
- 子元素:直接被父元素包含的元素
- 祖先元素:直接或间接包含后代元素的元素（父元素也是祖先元素）
- 后代元素:直接或间接被祖先元素包含的元素（子元素也是后代元素）
- 兄弟元素:有相同父元素的元素。
- 再说我们的后代选择器，当我们需要为div中的span（祖先与后代关系）设置颜色为绿色时，我们应该使用后代选择器。
- 作用:选中指定元素的指定后代元素。
- 语法：祖先元素 后代元素{}。
-
子元素选择器
- 作用:选中指定父元素的指定子元素。
- 语法：父元素>子元素{}。
注意我们的子元素选择器不兼容IE6.
另外一些：
:first-child:可以选中第一个子元素。
:last-child:可以选中最后一个子元素。
:nth-child（x）:可以选中第x（任意）个子元素。该选择器后面可以指定一个参数，指定选中第几个元素。even表示偶数位置的子元素，odd表示奇数位置的子元素。
:first-of-type、:last-of-type、:nth-of-type:与上面的非常类似，前面三种是在所有子元素中排列，而后面三种是在当前类型的子元素中排列。（child是大排行、type是小排行）
-
伪类选择器
给链接定义样式:
有4个伪类可以让你根据访问者与该链接的交互方式，将连接设置成4中不同的状态。
1、正常链接: a:link 。
2、 访问过的链接：*a:vidited(只能定义字体颜色)。（浏览器是通过历史记录来判断是否访问过！！！由于涉及了用户隐私问题，visited只能设置字体颜色）
3、鼠标划过的链接：a:hover。
4、 正在点击的连接：a:active。
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
/*为没访问过的连接设置为黄绿色。*/
a:link{
color: yellowgreen;
}
style>
head>
<body>
<a href="http://www.baidu.com">访问过的链接a>
<br />
<a chref="http://www.baidu123456.com">未访问过的链接a>
body>
html>
- 作用:伪类专门用来表示元素的一种特殊的状态。比如访问过的超链接、比如普通的超链接、比如获取焦点的文本框。当我们需要为特殊状态元素设置样式时，就可以使用伪类。
- 语法：a:link{}、a:vidited{}、a:hover{}、a:active{}…
- 需要注意的是：我们的hover、active不仅可以在a标签中使用,也可以为其他元素设置（IE6中不支持对超链接以外的设置hover、active）。
...
p:hover{
background-color: yellow;
}
...
<p>我是一个p标签p>
...
- 其他：
- 获取焦点：-:focus。
- 指定元素前：-:before。
- 指定元素后：-:after。
- 选中的元素：-::selection。(这个伪类在火狐中需要采用另一种方式编写-::moz-selection)
-
伪元素选择器
- 作用:使用伪元素来表示元素中的一些特殊的位置。
- 语法：-:first-letter、-:first-line、-:before、-:after。
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/* 为p中的第一个字符设置特殊的样式 */
p:first-letter {
color: red;
font-size: 20px;
}
/*为p中的第一行设置背景颜色为黄色*/
p:first-line {
background-color: yellow;
}
/*
* before表示元素最前面的部分
* 一般before都需要结合一个属性content一起使用。
* 通过content可以向before或after添加一些内容。
*/
p:before{
color: blue;
content: "我会在最前面";
}
p:after{
color: orange;
content: "我会在最后面";
}
style>
head>
<body>
<p>
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
p>
body>
html>
-
属性选择器：
说属性选择器前我们先说一个title属性。
<html>
<head>
<meta charset="utf-8">
<title>属性选择器title>
head>
<body>
<p title="我是title中的文字">我是一个段落p>
body>
html>
当我们把鼠标移至文字上的时候会出现title标签中的属性值就会显示（作为提示文字）。
- 属性选择器：
- 作用：可以根据元素中的属性或属性值来选取指定元素。
- 语法：
- 选取含有指定属性的元素:[属性名]{}。
- 选取含有特殊指定属性及属性值的元素：[属性名=“属性值”]{}。
- 选取属性值以指定内容开头的元素：[属性名^=“属性开头值”]。
- 选取属性值以指定内容结尾的元素:[属性名$=“属性结尾值”]。
- 选取属性值包含指定内容的元素：[属性名*=“包含属性值”]。
<html>
<head>
<meta charset="utf-8">
<title>属性选择器title>
<style type="text/css">
[title="hello"]{
background-color: yellow;
}
style>
head>
<body>
<p title="我是title中的文字">我是一个段落p>
<p>我是一个段落p>
<p>我是一个段落p>
<p title="hello">我是一个段落p>
body>
html>
-
兄弟元素选择器
...
<span>我是一个spanspan>
<p>我是一个pp>
...
当我们想要为span后的一个p元素设置一个背景颜色为黄色时要怎么写呢？？？span是p他哥，他俩就是兄弟，要用兄弟元素选择器。
span+p{
background-color: yellow;
}
- 选中后一个兄弟元素：
- 作用:可以选择一个元素后紧挨着的指定的兄弟。
- 语法：前一个+后一个{}。
- 选中后面所有元素：
- 作用：选中后面的所有指定兄弟。
- 语法：前面一个~后面所有{}。
-
否定伪类选择器
...
<p>我是一个p标签p>
<p>我是一个p标签p>
<p class="hello">我是一个p标签p>
<p>我是一个p标签p>
<p>我是一个p标签p>
...
当我们需要将所有p元素设置黄色背景，除了class为hello的时，需要使用否定伪类。
p:not(.hello){
background-color: yellow;
}
- 否定伪类：
- 作用:可以从已选中的元素中剔除某些元素。
- 语法：:not(选择器)。
声明块
-
声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。
-
例如:“color:red”
-
一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使用;来隔开,声明的样式名和样式值之间使用:来连接。样式名1:样式值1; 样式名2:样式值2; …
块和内联元素(html)
<html>
<head>
<meta charset="utf-8">
<title>块元素和内联元素title>
head>
<body>
<div style="background-color: red; width:200px;">
我是一个div
div>
<div style="background-color: yellow; width:200px">
我是一个div
div>
<hr />
<span id="">
我是一个span
span>
<span id="">
我是一个span
span>
body>
html>
说一下我们的块元素和内联元素。
- 首先说一下块元素。
- 所谓块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一行
- p,h1,h2,h3…等等都是块元素。div也是一个块元素。div标签没有任何语义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式。
- div元素主要用来对页面进行布局。
- 块元素相当霸道，所谓卧榻之侧其容他人酣睡！！！
- 作用：主要用来做页面中的布局。
- 再来说一下内联元素。
- 所谓内联元素，指的是只占自身大小的元素，不会占一行。
- 常见的内联元素：a、img、iframe、span。
- span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式。
- 作用：内联元素主要用来选中文本设置样式。
需要注意的是：
- 一般来说，只会使用块元素去包含一个内联元素，而不会使用一个内联元素去包含一个块元素
<div>
<span>块中包含内联span>
div>
<span>
<div>内联中包含块div>
span>
- a元素可以包含任意元素。但是除了它本身。
- p元素不可以包含任何其他的块元素。
其实严格来说h5已经解除了块元素和内联元素，它用了一个复杂的内容模型来解析，但目前我们没有必要去记忆啦。。。
之前的笔记
好了就说这次就说这么多，之前的HTML的笔记也在这里了：
HTML（一）
HTML（二）