CSS选择器总结

1、元素选择器(不区分大小写)

<p>Hello World!</p>

/*All p elements are red*/
p{
    color:red;
}

2、类选择器

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

3、ID选择器（ID在页面上应该唯一）

<p id="world"> — "Hello World!"</p>
<p id="mybf"> — "Hello My Boyfriend~"</p>

#world {
  font-family: cursive;
}

#mybf {
  font-family: monospace;
  text-transform: uppercase;
}

4、通用选择器

/* Work on all elements*/
* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

5、属性选择器

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
• [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（-用来处理语言编码）。
• [attr^=val] : 选择attr属性的值以val开头（包括 val）的元素。
• [attr$=val] : 选择attr属性的值以val结尾（包括 val）的元素。
• [attr*=val] : 选择attr属性的值中包含字符串 val 的元素。

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* 
    具有"data-vegetable"属性的所有元素,
    将被给予绿色的文本颜色
*/
[data-vegetable] {
  color: green
}

/* 
    具有"data-vegetable"属性且属性值刚好是"liquid"的所有元素，
    将被给予金色背景颜色 
*/
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 
    具有"data-vegetable"属性且属性值包含"spicy"的所有元素，
    即使某元素的该属性还包含其他属性值，
    都会被给予红色的文本颜色 
*/
[data-vegetable~="spicy"] {
  color: red;
}

/* 语言选择的经典用法 */
[lang|="fr"] {
  font-weight: bold;
}

/* 
    具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/* 
   具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/* 
   具有属性"data-quantity"其值以"optional"开头的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

6、伪类

• 以：作为前缀的关键字

<a href="https://my.csdn.net/jane_96">我的博客</a>

/* 这些样式将在任何情况下应用于我们的链接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问的链接看起来一样 */

a:visited {
  color: blue;
}

/* 当光标悬停于链接，键盘激活或锁定链接时，我们让链接呈现高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

7、伪元素

• 以::作为前缀的关键字

::after
::before
::first-letter
::first-line
::selection
::backdrop

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

/* 所有含有"href"属性并且值以"http"开始的元素，将会在其内容后增加一个箭头（去表明它是外部链接）
*/

[href^=http]::after {
  content: '⤴';
}

8、组合器和选择器组

组合器	选择元素
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

ps：CSS的导入方式以及优先级关系