什么是CSS，有什么作用？
CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。网页的内容是由HTML组成，它是基本的结构，为了呈现更好视觉效果，需要添加样式对其进行美化，这就需要用到CSS。
想要通过CSS为网页添加样式，首先需要对HTML中的元素进行选择，这就需要用到CSS选择器，然后进行布局和样式设置，从而实现网页设计稿的效果。
[图片上传失败...(image-7a623a-1547645794345)]
CSS选择器常见的有几种？
答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器
- 通用选择器
通过*号，可以选择页面所有的元素。
* {
box-sizing: border-box;
}
- 元素选择器
通过元素名，如div,p,ul等，进行选择页面中相应的元素。
html {
color:black;
}
- 类选择器
通过类名选择相应的元素。
<div class="box1">盒子1</div>
.box1 {
font-weight: bold;
}
- ID 选择器
<h1 id="notification">通知</h1>
#notification {
font-size: 24px;
}
- 属性选择器
01 [attr]
[attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。
[disabled] {
cursor: not-allowed;
}
02 [attr=val]
[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。
[data-color="gray"] {
color: #ccc;
}
03 [attr~=val]
[attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
04 [attr*=val]
[attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。
[title*="fuck"] {
display: none;
}
05 [attr^=val]
[attr^=val] 选择 attr 属性的值以 val 开头（包括val）的元素。
[href^="http://"] {
background-color: #f0ad4e;
}
06 [attr$=val]
[attr$=val] 选择 attr 属性的值以 val 结尾（包括val）的元素。
[src$="gif"]{
border: 1px solid #ccc;
}
07 [attr|=val]
[attr|=val] 选择 attr 属性的值以 val（包括val）或 val-开头的元素（-用来处理语言编码）。
[lang|="zh"] {
font-family: '微软雅黑';
}
- 伪类
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }
- 伪元素
01 ::after
.clearfix::after {
content: '';
clear: both;
display: block;
}
02 ::before
.happy::before {
content: '😁';
}
03 ::selection
应用于文档中被用户高亮的部分（比如鼠标选中的部分）
p::selection {
color: white;
background: blue;
}
- 组合选择器
01 A, B
选中匹配 A 或/和 B 的元素
.author, .famous {
font-weight: bold;
}
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>
02 A B
A B 选中匹配 B 且为匹配 A 的元素的后代元素。
.article a {
color: #384ebf;
}
03 A > B
选中匹配 B 且为匹配 A 的元素的直接子元素。
.warriors > li {
background-image: url(../images/warrior.svg);
}
<ul class="warriors">
<li><!-- ✅ -->
斯蒂芬·库里
<ul>
<li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
<li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
</ul>
</li>
<li>凯文·杜兰特</li><!-- ✅ -->
<li>克莱·汤普森</li><!-- ✅ -->
<li>德雷蒙德·格林</li><!-- ✅ -->
</ul>
04 A + B
选中匹配 B 且为匹配 A 的元素的下一相邻元素。
.cavs .lbj + li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li><!-- ✅ -->
<li>凯文·乐福</li>
</ul>
05 A ~ B
选中匹配 B 且为匹配 A 的元素的下 N个相邻元素。
.cavs .lbj ~ li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li><!-- ✅ -->
<li>凯文·乐福</li><!-- ✅ -->
</ul>
伪类选择器有哪些？伪元素有哪些？
（1）伪类选择器：
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下，还没被释放的E元素
E:hover 匹配鼠标悬停器上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E:selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于html文档，实际上就是html元素
E:nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与：nth-child（）作用类似，但仅匹配使用同种标签的元素
（2）伪元素：
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
CSS 加载方式有几种？
有4种方式：
1.内部样式表，在html文档中在<style>标签里面写的css样式
<style>
p {
color:red;
}
</style>
2.外部引用，用<link>标签引用外部的css文件，将样式引用到html文档来或者通过@import导入。(推荐)
<link rel="stylesheet" href="style.css">
<style>
@import url('地址');
@import url(地址);
@import "地址";
</style>
3.内联样式，在标签中使用，使用style属性将当前的标签样式改变。（不推荐）
<div style="color:red;"></div>
@charset有什么作用？
<charset>：字符编码。如：@charset "utf-8";
在外部样式表文件内使用。指定该样式表使用的字符编码。
该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
在外部css文件中写法如下：
@charset "utf-8";
body { sRules }
div { sRules }
选择器的优先级是如何计算的？
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
其中!important优先级最高。
其余可以按以下计算：
css优先级的计算方式可以用一下公式来解决value=a1000+b100+c*10+d，依据value值得大小来确定css的优先顺序。其中a表示行内样式，b表示ID选择器的数量，c表示类、伪类和属性选择器的数量，d表示标签选择器和伪元素选择器的数量。
网友评论