CSS入门——选择器

什么是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 
      <li>Twitter: <a 
    </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表示标签选择器和伪元素选择器的数量。