5. CSS 选择器

官方选择器类型
- http://www.w3school.com.cn/cssref/css_selectors.asp

1、元素选择器

又称为类型选择器（type selector）
文档的元素就是最基本的选择器。
设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

<style>
        html {color:black;}
        h1 {color:blue;}
        h2 {color:silver;}
    </style>

2、ID选择器

允许以一种独立于文档元素的方式来指定样式。
前面有一个 # 号 -，也称为棋盘号或井号。

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #identity1{
            font-size: 100px;
            color: red;
        }
        #identity2{
            font-weight: bold;
            color: green;
        }
    </style>
</head>
<body>
    <p1 id="identity1">哈哈哈哈哈哈</p1>
    <p2 id="identity2">呵呵呵呵呵呵</p2>
</body>

每个元素都可以设置id属性
同一个界面id的名称不能重复
编写元素属性时候id前面必须加上要加#
id的名称只能由字母/数据、下划线组成
id名称不能以数字开头
id不能是html的标签名称：a h1 img input
id前段开发一般都是留给js使用，不用于设置样式

3、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
根据类名称找到对应的标签，设置属性指定样式。

<head>
    <meta charset="UTF-8">
    <title>类选择器-例1</title>
    <style>
        .pp{
            font-family: italic;
            color: darkmagenta;
        }
    </style>
</head>
<body>
    <p3 class="pp">嘿嘿呵呵呵呵</p3>
</body>

class名称可以重复
编写时要加上.
命名规范跟id选择器一样
专门给标签设置，这个跟ID选择器不一样
可以同时绑定多个标签
多类选择器
- 例如：给一个特定的元素同时标记为重（important）和警告（warning）

<head>
    <meta charset="UTF-8">
    <title>类选择器-例1</title>
    <style>
        .important{
            color: darkmagenta;
        }
        .warning{
            color: green;
        }
        .important.warning{
            color: beige;
        }
    </style>
</head>
<body>
    <p class="important warning">嘿嘿呵呵呵呵</p>
    <p class="warning">哈哈哈哈哈哈哈</p>
    <p class="important">哈哈哈哈哈哈哈</p>

class=“类名1”“类名3”“类名3”... 可以放n个类名
important warning两个词的顺序无关紧要，写成 warning important 也可以。

<head>
    <meta charset="UTF-8">
    <title>两个类选择器</title>
    <style>
        .colorR{
            color: red;
        }
        .size30{
            font-size: 30px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="colorR size30">第一个</p>
    <p class="size30 line">第二个</p>
    <p class="colorR line">第三个</p>
</body>

4、后代选择器

后代选择器（descendant selector）又称为包含选择器。

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
  <style>
      div p1 em{
          color: yellow;
      }
  </style>
</head>
<body>
    <div>
        <P1>赤橙<em>黄</em>绿青蓝紫-黄出来</P1>
        <p2></em>赤</em>橙黄绿青蓝紫-赤出来</p2>
    </div>
</body>

去div找到p1再找到em
两个元素之间的层次间隔可以是无限的

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

5、子元素选择器

子元素选择器（Child selector），只选择某个元素的子元素，而不是选择任意的后代元素，只要子一代的子元素。

<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        p1 >redR{
            color: red;
        }
    </style>
</head>
<body>
    <p1><redR>子辈红一代</redR>---孙辈红二代----曾孙辈红三代</p1>
    <p1><em>子辈红一代---</redR>孙辈红二代</redR></em>----曾孙辈红三代</p1>
</body>

子选择器使用了大于号（子结合符，两边可以有空白符，这是可选的。因此，以下写法都没有问题：

p1 > redR
p1> redR
p1 >redR
p1>redR

从右向左读，选择器 p1 > redR 可以解释为“选择作为 p1 元素子元素的所有 redR 元素”。
结合后代选择器和子选择器

table1.company1 tdh > pp

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 tdh 元素本身从 table1 元素继承，该 table1 元素有一个包含company1的 class 属性。如下：

<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        table1.company1 tdh > pp{
            color: red;
        }
    </style>
</head>
<body>
    <table1 class="company1">黄色<tdh>黑色<pp>红红红红</pp>白色</tdh>紫色</table1>
    <table1>黄色<tdh1>黑色<pp>红红红红</pp>白色</tdh1>紫色</table1>
    <table1 class="company1"><pp>黄色<tdh>黑色红红红红白色</tdh></pp>紫色</table1>
</body>

6、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
与子结合符一样，相邻兄弟结合符旁边可以有空白符。

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”，增加紧接在 h1 元素后出现的段落的上边距。

    <style>
        h1+p{
            color: red;
        }

    <h1>呵呵呵呵</h1>
    <p>嘿嘿嘿嘿嘿嘿</p>
    <p>嘿嘿嘿嘿嘿嘿</p>

    <h1>哈哈哈哈哈哈</h1>
    <p>嘿嘿嘿嘿嘿嘿2</p>
    <p>嘿嘿嘿嘿嘿嘿2</p>

紧跟<h1>后面的第一个<p>的都是红色，此处改成把第二个<h1>改成<h2>则不行

h3~p{
            color: blueviolet;
        }

    <h3>哼哼哼哼3</h3>
    <a href="#">我是超链接</a>
    <p>嘿嘿嘿嘿嘿嘿3</p>
    <p>嘿嘿嘿嘿嘿嘿3</p>

    <h4>哼哼哼哼4</h4>
    <p>嘿嘿嘿嘿嘿嘿4</p>
    <p>嘿嘿嘿嘿嘿嘿4</p>

此处只要是<h3>后面只要是<p>都会被选择

7、序选择器

<head>
    <meta charset="UTF-8">
    <title>序选择器</title>
    <style>
        p:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <p>哈哈哈哈哈1</p><!--第一级别-->
    <p>哈哈哈哈哈2</p>
    <div>
        <p>哈哈哈哈哈3</p><!--div的第一级别-->
        <p>哈哈哈哈哈4</p>
        <p>哈哈哈哈哈5</p>
    </div>

p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。

6、伪元素选择器

给指定标签内容前面添加一个子元素

标签名称::before{
属性名称:值;
}

给指定标签内容后面添加一个子元素
标签名称::after{
属性名称:值;
}
visibility:hidden隐藏添加的子元素
display:block指定添加的子元素显示模式

0241D7FF-2FA2-49EF-AD55-7B9807B6F55A.png

5. CSS 选择器

推荐阅读更多精彩内容