本文详细介绍了CSS选择器的使用，包括行内样式、内部样式和外部样式，以及它们的优先级。重点讨论了基础选择器（标签、类、ID）、层次结构选择器和属性选择器的用法，帮助读者掌握如何精准地匹配和设置HTML元素的样式。同时，还涉及了CSS3的伪元素，增强了对网页样式的控制能力。
CSS选择器
目录
在学习了HTML基本的标签之后，大多数的标签都具有自己默认的样式。
HTML标签主要分为两类，一类是块元素，一类是内联元素。
块元素的特点：独占一行显示。能够设置其宽度和高度。
内联元素的特点：横向排列，宽度和高度默认为auto * auto。宽度和高度由内容决定。
浏览器在运行HTML页面时，会根据HTML标签的特性按照从上到下，从左往右的顺序依次渲染。
通过css（级联样式表）能够改变html标签的样式，最终实现对页面的布局等效果。
就好比一套清水房，仅有结构而已，通过装修之后，这个房间看起来就比较美观，适合居住，价格直线上升。
仅有HTML标签的网页就像是清水房，装修的过程称为CSS。
CSS是一种表现层的语言，能够对网页中的标签进行，字体、颜色、背景、边距、动画、宽高、定位等进行设置的能力。
1. 使用CSS
在网页中使用css的方式有多种。
- 行内样式，在标签中通过
style属性设置。 - 内部样式，在head标签之内编写
<style>标签，在<style>标签之内编写css代码 - 外部样式，将css编写css文件中。网页代码与css代码分离，对于后期的维护或扩展更容易。常用的做法。
2. 行内样式
<div style="属性1:值;属性2:值;"></div>
3. 内部样式和外部样式
一个完整的html页面，往往由很多个标签组成。因此在为这些标签设置样式时，如果使用行内样式的方式，效率是非常低下，并且对于后期的维护和扩展是一个非常大的考验。
使用内部样式及外部样式都需要通过css的选择器来为页面中的标签进行样式的设置。
<body>
<header>
<h1>友情链接</h1>
<ul>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
</ul>
</header>
<section></section>
<footer></footer>
</body>
观察如上代码片段，我们可以把一个html文档想象成为一个颗倒过来的树。css选择器会在这种树形结构的html文档中，为符合选择器规则的标签设置样式。
规则比如：为header中的所有a标签设置颜色。
为页面中所有的li标签设置颜色。
为header中所有的h1设置颜色。
选择器{
属性1:值;
属性2:值;
属性3:值;
}
不同的选择器具有不同的规则。今天学习的内容就是css选择器的规则。
内部样式和外部样式都是通过选择器的方式为页面中符合规则的标签去设置样式。
在使用外部样式时，需要在<head>标签中通过<link>标签导入外部的css文件。使用外部样式的好处：使html代码和css样式分离。
<link rel="stylesheet" href="外部css文件的路径" />
行内样式、内部样式、外部样式的优先级
当一个页面中，同一个标签之上的样式来自于行内样式，内部样式，外部样式，按照就近原则，浏览器会优先使用行内样式其次为内部样式，最后才是外部样式。
行内样式 > 内部样式 > 外部样式
因此在编写css代码时，统一使用外部样式的方式就能够解决这个问题。
4. 基础选择器
css中基础选择器分为三类。
- 标签选择器
- 类选择器
- ID选择器
css中，不同的选择器具有匹配页面中不同标签的规则。
标签选择器
选择器的名称已html规范中存在标签名称作为选择器的名称，其含义为：为页面中所有的改标签设置样式。
div{ /*页面中存在div标签，标签选择器*/} /*为页面中所有的div标签设置样式*/
a{} /*为页面中所有的a标签设置样式*/
p{} /*为页面中所有的段落标签设置样式*/
h1{}
span{}
因为标签选择器所匹配的标签的范围特别的大，因此标签通常用来定义页面的通用样式部分。
类选择器
在编写页面的过程中，同样的代码在不同的逻辑区域中具有不同的语义。
为相同的标签设置不同的分类，称为类选择器。
.类名{
/*css代码*/
}
.header{ /*创建了一个叫做header的类*/
color:red;
}
.wrap{ /*创建了一个wrap的类*/
}
.footer{ /*创建了一个footer类*/
}
.hot{
color:green
}
使用css类的样式:
<div class="header hot">header</div>
<div class="wrap"></div>
<div class="footer"></div>
ID选择器
具体的为某个一个标签设置样式。在学习表单元素的时候提到过id属性。id意为唯一，比如身份证号码。在页面中所有的标签都可以具有id属性。不同标签的id属性值
是不同的。
#id{ /*#代表着id属性，#后面的值为id属性的值*/
}
#wrap{ /*为页面中id为wrap的标签设置样式*/
}
<!--为div设置了一个id，其值为wrap-->
<div id="wrap"></div>
三种基本选择器的优先级
在编写css时，经常发生一个标签同时被多种选择器设置了相同的样式。此时优先级高的选择器中设置的样式才会生效。
ID选择器 > 类选择器 > 标签选择器
如果多个同类型的选择器对一个标签的一个样式(color)受影响时，浏览器按照从上到下，从左往右的顺序进行加载并渲染。
5. 层次结构选择器
利用HTML文档的树形结构，css选择器具有更多更灵活的匹配规则。
学习后代选择器，必须理解什么是后代元素以及子元素。
| 选择器 | 类型 | 描述 |
|---|---|---|
| E F | 后代选择器 | 匹配E中所有的后代F |
| E>F | 子选择器 | 匹配E中的子级F元素 |
| E+F | 相邻兄弟选择器 | 匹配和E同级别的下一个兄弟F |
| E~F | 通用兄弟选择器 | 匹配和E同级别的之后的所有F |
后代选择器
E和F都是选择器的代词。代表的就是选择器。（三种基本选择器）
E F的含义：匹配E选择器对应的标签中的所有后代F选择器匹配的标签。
/*后代选择器的各种组合*/
body .wrap{}
.wrap p{}
.header .box{}
#main div{}
div #main{
}
body p{
}
子选择器
E>F，子选择器。匹配E选择器中F选择器的子元素。
/*子选择器的各种组合*/
body>.wrap{}
.wrap>p{}
.header>.box{}
#main>div{}
div>#main{
}
相邻兄弟选择器
E+F{ /*匹配和E同级别的下一个兄弟F节点*/
}
通用兄弟选择器
E~F{ /*匹配和E同级别的，之后的所有的F*/
}
6. 结构伪类选择器
通过层次选择器能够匹配到多个标签元素。但是这些层次结构选择器不能够实现精确的匹配。
结构伪类选择器搭配基本选择器或者层次结构选择器能够实现对标签的具体匹配。
结构伪类选择器提供了查找父级标签中的第一个子元素，最后一个子元素，第N个子元素，偶数个子元素，奇数个子元素。
因此利用结构伪类选择器实现表格的隔行变色类似的效果会非常的容易。
结构伪类选择器有两种写法：
- 从父级元素中按照子元素的编写顺序进行匹配。
- 从父级元素中按照子元素的类型进行匹配。
| 选择器 | 描述 |
|---|---|
| E:first-child | 匹配E的父级中第一个子元素E（E的父级中第一个子元素必须是E） |
| E:last-child | 匹配E的父级中最后一个子元素E（E的父级中最后一个子元素必须是E） |
| E:nth-child(integer,even,odd) | 匹配E的父级中第integer个或者even偶数个或者odd奇数个E |
| E:first-of-type | 匹配E的父级中，第一个类型为E的标签，E不需要一定是第一个子元素 |
| E:last-of-type | 匹配E的父级中，最后一个类型为E的标签，E不需要一定是最后一个子元素 |
| E:nth-of-type(integer,even,odd) | 匹配E的父级中第integer个或者even偶数个或者odd奇数个E |
7. 页面的标准文档流
浏览器在渲染页面效果时，按照从上到下，从左往右的方式对页面中的标签及css代码进行解析。
块元素独占一行显示，宽度默认为父级元素宽度的100%
只有块元素或者内联元素才能够设置其宽度（width）和高度（height）
内联元素默认从左往右依次排列，宽度和高度为auto*auto，自动的。由内容决定元素在网页中占用的大小。
内联元素以及块元素通过css属性，display进行控制
块元素display的默认值为：block
内联元素display的默认值为：inline
因此通过display属性可以时块元素称为内联元素，或者使内联元素称为块元素。
display:inline-block;
当display:inline-block时，该元素称为内联块元素。使元素同时具备内联元素和块元素的特点。
元素能够设置宽度和高度，并且不会独占一行显示。
在css3中，新增了min-width，max-width。设置元素的最小宽度和最大宽度.
min-height，max-height。设置元素的最小高度和最大高度。
在对页面布局时，为了使盒子不应内容的宽度和高度破坏其他元素的布局时，min,max的宽度和高度使用频繁。
8. 属性选择器
<img src="图片的路径" />
<video controls autoplay loop muted></video>
<a href="超链接路径" title="标题" target="打开方式"></a>
凡是在开始标签中与标签名已空格分隔，属性="值"这种写法的称为属性。
属性选择器就是根据属性来匹配页面标签从而设置样式。
属性选择器通常搭配表单元素使用居多。
因为表单元素中，<input />是使用得最多的。
<input />标签根据type属性可以定义出不同的行为，文本框，密码框，单选，复选，按钮，提交按钮等等 。
| 选择器 | 描述 |
|---|---|
| E[attr] | 匹配所有E具有attr属性的标签 |
| E[attr=“value”] | 匹配所有的attr属性值为value的E标签 |
| E[attr^=“value”] | 匹配attr属性值已value开头的E标签 |
| E[attr$=“value”] | 匹配attr属性值已value结尾的E标签 |
| E[attr*=“value”] | 匹配attr属性值包含value的E标签 |
E[attr]
input[name]: 匹配所有具有name属性的input标签
input[value]:匹配所有具有value属性的input标签
E[attr=‘value’]
input[type="text"]:匹配所有的文本框
input[type="password"]:匹配所有的密码框
input[type="text"],input[type="password"]{ /*E,F{}*/
/*所有的文本框以及密码框公用的样式*/
}
div,span,a,p,h1,h2,.wrap,.container{ /*这些标签选择器以及类选择器同用的样式*/
color:red;
}
E[attr^="value]
input[value^="abc"]: 匹配input标签的value值已abc开头，因此如果一个文本框的value值为abcdefg就能够匹配到
E[attr$=“value”]
input[value$="efg"]: 匹配input标签的value值已efg结尾， 如果值为abcdefg则能够匹配到
E[attr*=“value”]
input[value="123"]: value值为abc123abc就能够被匹配到。
9. CSS3伪元素
在CSS3中，每个标签都可以通过::before和::after添加伪元素。
伪元素相当于是依附于具体某个标签存在于css中的标签。
span.book::before{ /*为class为book的span标签设置before伪元素*/
content:"《"; /*为伪元素设置文本，没有文本则给空 ""*/
}
span::after{
content:"》"
}
伪元素生成的标签默认是inline内联元素。
在伪元素的选择器以内直接设置css样式从而对伪元素进行样式的调整。
扫一扫
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
