1 选择器介绍

1.1 #id

id选择器可以为标有特定id的HTML元素指定特定的样式
CSS中id选择器以"#"来定义
id属性尽量不要以数字开头

实例： 匹配id="case"的元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #case {
            color: red;
        }
    </style>
</head>

<body>
    <p id="case">该段落为红色</p>
    <p>该段落不受影响</p>
</body>

</html>

1.2 class

class选择器用于描述一组元素的样式
CSS中类选择器以一个点"."号显示
class和id的区别：class可以在多个元素中使用

实例： 匹配class="case"的元素为红色

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">
    <style>
        .case {
            color: red;
        }
    </style>
</head>

<body>
    <p class="case">该段落为红色</p>
    <h3 class="case">该标题为红色</h3>
    <p>该段落不受影响</p>
</body>

</html>

1.3 element

以html的标签作为CSS修饰所用的选择器

实例： 匹配<h1>标签元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>该标题为红色</h1>
    <h2>该标题不受影响</h2>
    <h3>该标题不受影响</h3>
    <h4>该标题不受影响</h4>
</body>

</html>

1.4 *

匹配html中的所有元素标签

实例： 匹配所有标签的元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <h1>该标题为红色</h1>
    <p>该段落为红色</p>
</body>

</html>

1.5 element.class

匹配使用class的element元素标签

实例： 匹配class="case"的<h1>标签元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1.case {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="case">该标题为红色</h1>
    <h2 class="case">该标题不受影响</h2>
    <h3 class="case">该标题不受影响</h3>
    <h4 class="case">该标题不受影响</h4>
</body>

</html>

1.6 element1 element2

指定目标选择器必须处在某个选择器对应的元素内部
该选择器会作用于element1后续所有的子元素element2，不管中间隔了多少元素

实例： 匹配<div>元素内部的每个<p>标签为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>该段为红色</p>
        <b><p>该段也是红色</p></b>
        <b><i><p>该段还是红色</p></i></b>
    </div>
    <p>该段不受影响</p>
</body>

</html>

1.7 element1>element2

强制指定目标选择器作为包含选择器对应的标签内部的标签
该选择器仅会作用于element1后续的第一代子元素element2，不会影响后续元素

实例： 匹配父级元素是<div>的<p>子标签为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div>p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>该段为红色</p>
        <b><p>该段不受影响</p></b>
        <b><i><p>该段不受影响</p></i></b>
    </div>
    <p>该段不受影响</p>
</body>

</html>

1.8 element1~element2

该选择器仅会作用于element1元素出现后的所有相邻的element2元素

实例： 匹配<h1>标签后相邻的每个<p>标签的样式为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1~p {
            color: red;
        }
    </style>
</head>

<body>
    <p>该段不受影响</p>
    <h1>标题</h1>
    <p>该段为红色</p>
    <p>该段为红色</p>
</body>

</html>

1.9 element+element

该选择器仅会作用于element1元素出现后的第一个挨着的element2元素

实例： 匹配<h1>标签后相邻的第一个<p>标签的样式为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1+p {
            color: red;
        }
    </style>
</head>

<body>
    <p>该段不受影响</p>
    <h1>标题</h1>
    <p>该段为红色</p>
    <p>该段不受影响</p>
</body>

</html>

1.10 attribute

该选择器会匹配带有attribute属性的标签

实例： 匹配带有target属性的<a>元素为红色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        a[target] {
            color: red;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com/" target="_blank">百度搜索（红色）</a><br />
    <a href="https://cn.bing.com/" target="_top">必应搜索（红色）</a><br />
    <a href="www.google.com">谷歌搜索（不受影响）</a>
</body>

</html>