CSS入门之选择器

CSS入门——选择器

什么是CSS，有什么作用，？

CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。网页的内容是由HTML组成，它是基本的结构，为了呈现更好视觉效果，需要添加样式对其进行美化，这就需要用到CSS。

想要通过CSS为网页添加样式，首先需要对HTML中的元素进行选择，这就需要用到CSS选择器，然后进行布局和样式设置，从而实现网页设计稿的效果。

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;
}

登鹳雀楼

王之涣

百日依山尽，黄河入海流。

欲穷千里目，更上一层楼。

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文档中在