文章目录
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
选择器的权重值
| 选择器 | 权重 |
|---|---|
| !important | 最高优先级（慎用） |
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类（class）和伪类选择器、属性选择器 | 10 |
| 元素（又叫标记、标签）选择器、伪元素选择器 | 1 |
| 通配选择器、子代选择器 | 0 |
| 继承的样式 | 没有优先级（最低） |
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行。
CSS 选择器的优先级顺序：
内联样式 > ID选择器 > 类选择器 > 标签选择器
优先级的计算：
优先级是由 A、B、C、D 四个值来决定的，具体计算规则如下
- A={如果存在内联样式则为1，否则为0}
- B={ID选择器出现的次数}
- C={类选择器、属性选择器、伪类选择器出现的总次数}
- D={标签选择器、伪元素选择器出现的总次数}
计算示例：
/*
A=0 不存在内联样式
B=0 不存在ID选择器
C=1 有⼀个类选择器
D=3 有三个标签选择器
最终计算结果：{0,0,1,3}
*/
div ul li .red { ... }
计算完成后，我们通过从A到D的顺序进⾏值的⼤⼩⽐较，权重由A到D从⾼到低，只要⽐较出最⼤值即可。例如上⾯的两个样式：
样式⼀的A=0，样式⼆的A=0 【相等，继续往下⽐较】
样式⼀的B=0 < 样式⼆的B=1 【样式⼆的⼤，不继续往下⽐了，即认为样式⼆的优先级更⾼】
元素选择器
以文档语言对象类型作为选择器，即使用结构中元素名称作为选择器。例如body、div、p,img,em,strong,span…等。
所有的页面元素都可以作为选择器。
语法：元素名称{属性：属性值；}
/* 例如 */
div{
width: 200px;
height: 200px;
}
用法：
-
如果想改变某个元素得默认样式时，可以使用元素选择器；
如：改变一个div、p、h1样式
-
当统一文档某个元素的显示效果时，可以使用元素选择器。
如：改变文档所有p段落样式
id 选择器
语法：#id名{属性: 属性值;}
/* 例如 */
#box{
width:300px;
height:300px;
}
说明：
-
当我们使用id选择器时，应该为每个元素定义一个id属性
<!-- 例如 --> <div id="box"></div> -
id选择器的语法格式是
“#”加上自定义的id名/* 例如 */ #box{ width:300px; height:300px; } -
起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
-
一个id名称只能对应文档中一个具体的元素对象。(唯一性)
群组选择器
语法：选择符1,选择符2,选择符3......{属性: 属性值;}
/* 例如 */
#top1,#nav1,h1{
width:960px;
}
说明：当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
class/类 选择器
语法：.class名{属性: 属性值;}
/* 例如 */
.top{
width: 200px;
height: 200px;
}
说明：
-
当我们使用class选择符时，应先为每个元素定义一个class名称
<!-- 例如 --> <div class="top"></div> -
class选择器的语法格式
/* 例如 */ .top{ width:200px; height:100px; background:green; }
用法：class选择器更适合定义一类样式；
class名字的规则：
- 可以英文、连字符(-)、下划线(_)、英文字母开头
- 不可以数字开头
- 一般不可以出现中文 特殊符号
- 避免出现关键词
- 严格区分大小写
- 尽量见名知意
- 多个单词连接用
_ 驼峰 (userName)
*通配符选择器
语法：*{属性: 属性值；}
/* 例如 */
*{
padding: 0;
margin: 0;
}
说明：通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值；
后代（或包含）选择器
语法：选择符1 选择符2 {属性：属性值;}
/* 例如 */
div p{
width:200px;
height:100px;
background:green;
}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
<style>
.list li{
background:red;
}
</style>
<!-- 分割线 -->
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>
注意：
- 后面的选择器必须是前面的选择器的后代
- 最终作用会作用到最后一个选择器的身上
层级选择器
E>F （子代选择器） 选择匹配的F元素，且匹配的F元素所匹配是E元素的子元素**（CSS2）**
E+F （相邻兄弟选择器） 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面**（CSS2）**
E~F （通用兄弟选择器） 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素（同一层级） （CSS3）
后代选择器和子代选择器的区别：
简单的说就是：
后代选择器是提到的后代（包括子代、孙子…），而子代选择器提到的子代只是包含它的下一代。
实例：
<style>
/* 使用子代选择器 */
.box>p{
background-color: red;
}
</style>
<!-- 分割线 -->
<body>
<div class="box">
<p>p1</p>
<p>p2</p>
<div>
<p>p3</p>
</div>
</div>
</body>
<style>
/* 使用后代选择器 */
.box p{
background-color: red;
}
</style>
<!-- 分割线 -->
<body>
<div class="box">
<p>p1</p>
<p>p2</p>
<div>
<p>p3</p>
</div>
</div>
</body>
效果图：
CSS 伪元素选择器
伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。
常见的伪元素
| 伪元素 | 描述 |
|---|---|
| ::before | 在元素的最前面添加内容 |
| ::after | 在元素的最后面添加内容 |
| ::first-letter | 第一个字符的样式 |
| ::first-line | 第一行的样式 |
| ::selection | 用户选中的内容的样式（css3） |
注：伪元素的css属性中content属性必须写
content属性作用：伪元素要添加的内容（添加了内容之后默认为行内元素）
注意：::before、::after、::first-letter、::first-line、::selection这四个的双冒号可以改为单冒号（例：:before）
::selection只能使用双冒号，并且只能改变文本颜色和背景颜色
属性选择器
css2
| 属性选择器 | 描述 |
|---|---|
E[attr] | 选择具有attr属性的元素E |
E[attr="value"] | 选择具有attr属性,并且属性值是value的元素E |
css3
| 属性选择器 | 描述 |
|---|---|
E[attr$="value"] | 选择具有attr属性,并且属性值是value结尾的元素E |
E[attr^="value"] | 选择具有attr属性,并且属性值是value开头的元素E |
E[attr*="value"] | 选择具有attr属性,并且属性值中有value的元素E |
伪类选择器（CSS3）
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
结构伪类选择器
nthchild选择器
| nthchild选择器 | 描述 |
|---|---|
| E:nth-child(n) | 同级中第n个元素,并且这个元素是E |
| E:nth-last-child(n) | 同级中倒数第n个元素,并且元素是E |
| E:first-child | 同级中第1个元素,并且这个元素是E |
| E:last-child | 同级中最后1个元素,并且这个元素是E |
<style>
li:nth-child(3){
background-color: red;
}
li:nth-last-child(2){
background-color: blue;
}
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: green;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
效果图:
nthtype选择器
| nthtype选择器 | 描述 |
|---|---|
| E: nth-of-type(n) | 同级中同类型的第n个元素，并且这个元素是E |
| E: nth-last-of-type(n) | 同级中同类型的倒数第n个元素，并且这个元素是E |
| E: frist-of-type | 同级中同类型的第1个元素，并且这个元素是E |
| E:last-of-type | 同级中同类型的最后个元素，并且这个元素是E |
| E:only-of-type | 同级中同类型的唯一一个元素，并且这个元素是E |
<style>
p:nth-of-type(3) {
background-color: red;
}
p:nth-last-of-type(1) {
background-color: pink;
}
a:first-of-type {
background-color: green;
}
a:last-of-type {
background-color: yellow;
}
b:only-of-type {
background-color: cyan;
}
</style>
<body>
<div>
<p>p1</p>
<p>p2</p>
<a href="">去百度1</a>
<a href="">去百度2</a>
<span>span1</span>
<span>span2</span>
<p>p3</p>
<p>p4</p>
<a href="">去百度3</a>
<a href="">去百度4</a>
<span>span3</span>
<span>span4</span>
<b>b</b>
</div>
</body>
效果图：
E:nth-child(n)和E:nth-of-type(n)区别：
- E:nth-child(n)：是同级中第n个元素,并且这个元素是E
- E:nth-of-type(n)：是这个元素是E，并且是同级中同类型的第n个元素
其他结构伪类选择器
| 结构伪类选择器 | 描述 |
|---|---|
| :root | 选择根元素 html |
| :empty | 选择空元素 |
| E:only-child | 同级中唯一一个元素，并且这个元素是E |
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:empty {
border: 5px solid #000;
}
div:only-child {
border: 5px solid red;
}
</style>
<body>
<div></div><br>
<div>
<div>div1</div>
</div><br>
<div>
<div>div2</div>
<div>div3</div>
</div>
</body>
效果图：
交集结构伪类选择器
E:nth-child(n)
n可以为数字、表达式 (2n 2n+1 3n 3n+1…)、关键词：odd 奇数、even 偶数
<style>
.box {
width: 500px;
}
.box div {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: green;
float: left;
text-align: center;
line-height: 80px;
color: #fff;
margin-right: 20px;
margin-bottom: 20px;
}
/* 核心代码 */
.box div:nth-child(2n) {
background-color: #000;
}
</style>
<body>
<!-- div.box>div*10{$} -->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
效果图：
目标伪类选择器
E:target 选择锚点元素，锚点必须处于激活状态，元素是E
<style>
div {
width: 200px;
height: 200px;
border: 3px solid #000;
float: left;
font-size: 28px;
text-align: center;
line-height: 200px;
}
/* div这个锚点处于激活状态的时候 */
div:target {
background-color: pink;
}
</style>
<body>
<a href="#box1">box1</a>
<a href="#box2">box2</a>
<a href="#box3">box3</a>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
效果图：
UI状态伪类选择器
- E:enabled 元素处于可用状态 — 表单控件可以用
- E:disabled 元素处于禁用状态 — 表单控件可以用，元素要设置disabled属性
- E:checked 元素处于选中状态 — 单选框、多选框
<style>
input[type="text"]:enabled {
background-color: pink;
}
input[type="password"]:disabled {
background-color: yellow;
}
input[type="checkbox"]:checked {
width: 20px;
height: 20px;
}
</style>
<body>
<p>
<input type="text">
<input type="password" disabled>
</p>
<p>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">羽毛球
</p>
</body>
效果图：
否定伪类选择器
E:not(val) 选中不是val选择器的元素E
<style>
li {
width: 400px;
height: 40px;
line-height: 40px;
}
li:not(:last-of-type) {
border-bottom: 1px solid #000;
}
</style>
<!-- 分隔符 -->
<body>
<ul>
<li>文本文本文本</li>
<li>文本文本文本</li>
<li>文本文本文本</li>
<li>文本文本文本</li>
<li>文本文本文本</li>
</ul>
</body>
效果图：
a标签的伪类选择器(CSS2)
通过观察发现a标签存在一定的状态。
- 默认状态，从未被访问过；
- 被访问过的状态；
- 鼠标长按的状态；
- 鼠标悬停在a标签上的状态。
1.什么是a标签的伪类选择器？
作用：专门用来修改a标签不同状态的样式的。
2.格式
:link 修改从未被访问过的状态下的样式；(默认)
:visited 修改被访问过状态下的样式；
:active 修改鼠标长按的状态下的样式；
:hover 修改鼠标悬停在a标签上的状态下的样式。
这个伪类选择器除了可以用在a标签上，还可以用在其它的任何标签上
3.注意点
-
a标签的伪类选择器可以单独出现也可以一起出现；
-
a标签的伪类选择器如果一起出现，那么有严格的顺序要求。（编写的顺序必须遵守爱恨原则love hate l、v、h、a）lvha；
-
如果默认状态的样式和被访问过状态的样式一样，可以缩写：
a{ color: skyblue; }
4222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
