CSS基础--选择器定位

学习目标：

学习层叠、优先级，以及在CSS中继承是如何工作的
掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性。
进一步学习 CSS 选择器相关的知识

---

学习内容：

层叠与继承

在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。
这里也有继承的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。

1.层叠

Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
有三个因素需要考虑，根据重要性排序如下，前面的更重要：

• 重要程度
• 优先级
• 资源顺序

资源顺序
我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。
优先级
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

• 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
• 一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。
这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性。
这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
1.千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
2.百位： 选择器中包含ID选择器则该位得一分。
3.十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4.个位：选择器中包含元素、伪元素选择器则该位得一分。
!important
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。

2.继承

继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

1. inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.
2. initial：设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
3. unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
4. revert： 只有很少的浏览器支持。

重设所有属性值
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

选择器的分组与继承

1.选择器的分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
}

2.继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。

伪类和伪元素

1.什么是伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字：

:pseudo-class-name

所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的HTML加入类一样。看下MDN上的另外几个示例：

• :last-child
• :only-child
• :invalid

用户行为伪类
一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

• :hover——只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
• :focus——只会在用户使用键盘控制，选定元素的时候激活。

2.什么是伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

例如，如果你想选中一段的第一行，你可以把它用一个元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变HTML的方式来可预测地这么做是不可能的。
::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.p>
article>

article p::first-line {
    font-size: 120%;
    font-weight: bold;
}   

3.生成带有::before和::after的内容

有一组特别的伪元素，它们和content属性一同使用，使用CSS将内容插入到你的文档中中。
你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变content属性的文本值，看看输出是怎么改变的。你也能改变::before伪元素为::after，看到这段文本插入到了元素的末尾而不是开头。

.box::before {
    content: "This should show before the other content."
}

<p class="box">Content in the box in my HTML page.p>

从CSS插入文本字符串，我们并不会在Web浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。
这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

<p class="box">Content in the box in my HTML page.p>

.box::after {
    content: " ➥"
}

这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。
下个示例，我们已经用 ::before伪元素加入了个空字符串。我们把它设为了display: block，以让它可以用width和height进行样式化。然后我们可以用CSS像任何元素那样样式化。你可以摆弄CSS，改变它的外观和行为。

.box::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    border: 1px solid black;
}  

<p class="box">Content in the box in my HTML page.p>

::before和::after伪元素与content属性的共同使用，在CSS中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。CSS Arrow Please网站就是一个著名的示例，它帮你用CSS生成一个箭头。在你创建你的箭头的时候看下CSS，你将会看到实际使用的::before和::after伪元素。无论什么时候你看到了这些选择器，都要看下content属性，以了解文档中添加了什么。

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

语法
[attr]：表示带有以 attr 命名的属性的元素。

[attr=value]：表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]：表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀。

[attr^=value]：表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]：表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]：表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i]：在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] ：在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

与选择器相关的阅读资料：阮一峰-CSS选择器笔记

---

学习产出：

使用层次选择器给嵌套列表添加如下 CSS 样式

• 选中第一层列表，添加外边框 选中第二层列表，设置背景颜色为#eee 选中第三层列表,添加虚线外边框
• 选中每一个列表的第一个列表项目设置字体为粗体,添加下边框，添加背景颜色为黑色，字体颜色为白色
• 选中第三层列表，给最后一个列表项li，设置字体为斜体，字体为白色，添加背景颜色为黑色。

    <div class="first">
        <ul>
            <li>第一层列表第一项
                <ol>
                    <li>第二层列表第一项li>
                    <li>第二层列表第二项li>
                    <li>第二层列表第三项
                        <ol>
                            <li>第三层列表第一项li>
                            <li>第三层列表第二项li>
                            <li>第三层列表第三项li>
                        ol>
                    li>
                    <li>第三层列表第四项li>
                ol>
            li>
            <li>第一层列表第二项li>
            <li>第一层列表第三项li>
        ul>
    div>

ul{
    border: 1px solid lime;
}
ul li ol{
    background-color: #eee;
}
ul li ol li ol{
    border: 1px dashed darkblue;
}
ul li:first-child , ol li:first-child{
    font-weight: bold;
    border-bottom: 1px solid blue;
    background-color: black;
    color: white;
}
ul li ol li ol li:last-child{
    font-style: italic;
    color: white;
    background-color: black;
}

应用属性选择器给如下表格添加如下 CSS 样式

• 使用伪元素选择器，给表格设置单行背景色为#eee，双号数行为背景色为白色
• 选中所有标题栏，设置背景颜色为黑色，字体为白色
• 应用伪元素选择器，选中第一列单元格，设置背景颜色为黑色，字体为白色，粗体。
• 应用伪元素选择器，选中倍数为3的单元格，设置透明度为0.9

<table>
  <caption>TABLE SAMPLEcaption>
  <thead>
    <tr>
      <th>title oneth>
      <th>title twoth>
      <th>title threeth>
      <th>title fourth>
    tr>
  thead>
  <tbody>
    <tr>
      <th>content1th>
      <td>content2td>
      <td>content3td>
      <td>content4td>
    tr>
    <tr>
      <th>content5th>
      <td>content6td>
      <td>content7td>
      <td>content8td>
    tr>
     <tr>
      <th>content9th>
      <td>content10td>
      <td>content11td>
      <td>content12td>
    tr>
     <tr>
      <th>content13th>
      <td>content14td>
      <td>content15td>
      <td>content16td>
    tr>  
table>

tr:nth-child(odd){
    background-color: #eee;
}
tr:nth-child(even){
    background-color: white;
}

th{
    background-color: black;
    color: white;
    font-weight: normal;
}
td:nth-child(2){
    background-color: black;
    color: white;
    font-weight: bold;
}
td:nth-child(3n){
    opacity: 0.9;
}

应用属性选择器给下列链接列表添加如下 CSS 样式

• 链接文本的样式：使链接为红色，被访问后变为绿色，当被hover时，移除链接文本的下划线。
• 应用属性选择器选中链接 href值中包含 contact 字段的 a 标签,设置下划线为粉红色
• 应用属性选择器选中链接 href值中包含 以http字段开头的 a 标签,设置边框为蓝色

<ul>
    <li><a href="https://example.com">Link 1a>li>
    <li><a href="http://example.com" title="Visit example.com">Link 2a>li>
    <li><a href="/contact">Link 3a>li>
    <li><a href="../contact/index.html">Link 4a>li>
ul>
<input type='text'>

a{
    color: red;
}
a:visited{
    color: green;
}
a:hover{
    text-decoration: none;
}
a[href*="contact"]{
    text-decoration: none;
    border-bottom: 1px solid pink;
}
a[href^="http"]{
    border: 1px solid blue;
}