CSS复合选择器

（1）交集选择器 ,由多个选择器组合而成，既...又.例如:div#fff  既是div标签而且div标签的id值为fff .多个选择器之间没有任何连接符，一般情况下标签选择器在前.

p.base {
        background-color: blue;
      }
div.base {
        background-color: yellow;
      }

    <p class="base">qwerxxx</p>
    <div class="base">qwerxxxuuu</div>

（2）并集选择器   也称群组选择器     并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器。

      .box1,
      header,
      aside,
      footer,
      .p1 {
        color: blue;
      }

<div class="box1">qwer</div>
    <header>asdf</header>
    <aside>ghjk</aside>
    <footer>zxcv</footer>
    <p class="p1">qwas</p>

（3）兄弟选择器

兄弟选择器是CSS3.0新增的一个选择器，语法格式： A~B 或者 A+B

• ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

• ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

        div + p {
          color: red;
        }

  <div>11111</div>
      <div class="box">11111box</div>
      <div>33333</div>
      <div>44444</div>
      <p>666666</p>
      <p>777777</p>
      <p>999999</p>

  

        div ~ p {
          color: red;
        }

   

  （4）后代选择器

  后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

        div i {
          color: red;
        }

  <div>
        <li>111111111</li>
        <div class="son1">
          <span class="span1">
            <i>zheshi i</i>
          </span>
          <i>aaaaaaa</i>
        </div>
        <p class="qwer">
          <strong>qqq</strong>
        </p>
      </div>
  

  

• （5）子元素选择器

   

• 子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,

      .nav > li>ul>li {
          background-color: red;
        }

   <ul class="nav">
        <li>
          一级菜单
          <ul>
            <li>
              <span>
                222
                <span>111</span>
              </span>
            </li>
            <li>二级菜单</li>
            <li>二级菜单</li>
          </ul>
        </li>
      </ul>

  

   

  （7）属性选择器

  表示选取标签带有某些特殊属性的选择器。

  选择器	含义
  [attr]	存在attr属性即可
  [attr=val]	属性值完全等于val
  [attr*=val]	属性值里包含val字符并且在“任意”位置
  [attr^=val]	属性值里包含val字符并且在“开始”位置
  [attr$=val]	属性值里包含val字符并且在“结束”位置

 body [name="qazx"] {
        background-color: blue;
      }

<input type="text" name="ssss" />
    <br />
    <input type="text" name="asdf" />
    <br />
    <input type="text" name="zxcv" />
    <br />
    <input type="text" name="qazx" />
    <br />
    <input type="text" name="zxcccczx" />
    <br />
    <div name="qazx">div标签</div>

（8）伪元素选择器（CSS3）

1. E::first-letter   块级文本的第一个单词或字
2. E::first-line   文本的第一行
3. E::selection   可改变选中文本的样式

 

p::first-letter {
	color: red;
  	font-size: 50px;
}
p::first-line {
	color: green;
}
p::selection {
	color: blue;
}

<h2>锦上添花</h2>
<p>锦上添花，读音：jǐn shàng tiān huā ，汉语成语。释义：意指在美丽的锦织物上再添加鲜花。比喻略加修饰使美者更美，引申比喻在原有成就的基础上进一步完善。 出处： 宋 黄庭坚 《了了庵颂》：“又要 涪翁 作颂，且图锦上添花。” 此外， 清 李渔 《凰求凤·让封》：“三位夫人恭喜贺喜，又做了状元的夫人，又进了簇新的房子，又释了往常的嫌隙，真个是锦上添花。” 毛泽东 《在延安文艺座谈会上的讲话》二：“对于他们，第一步需要还不是‘锦上添花’，而是‘雪中送炭’。所以在目前条件下，普及工作的任务更为迫切。”
</p>

4、E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

5、-webkit-input-placeholder，输入框默认文本的设置。

注意：before与after表示在盒子内部的前端和后端插入内容。

 

      div::before {
        content: "之前";
      }
      div::after {
        content: "之后";
      }
      ::-webkit-input-placeholder {
        color: red;
      }

    <span>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span>

    <div>这是内容</div>
    <br />
    用户名：<input type="text" placeholder="请输入用户名" />

    <li>1111</li>