CSS选择器

首先附上一个链接 ：http://www.w3school.com.cn/css/css_selector_class.asp

1、元素选择器

     h1, h2, h3, h4, h5, h6 {

          color:gray;

          background:white;

          padding: 10px;

          border: 1px solid black;

          font-family: Verdana;

     }

 

2、类选择器

     .important {color:red;}

     类选择器能够和元素选择器组合使用：

     p .important {color:red;}

 

3、多类选择器

     在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

     例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning）

   <p class="important warning">
      This paragraph is a very important warning.
   </p>

      假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，

      class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

  .important {font-weight:bold;}
  .warning {font-style:italic;}
  .important.warning {background:silver;}

4、Id选择器

    #intro {font-weight:bold;}

 

5、属性选择器 

     1⃣️  a[href] {color:red;}  //含有href属性的<a>

    2⃣️  a[href][title] {color:red;} //同时含有href和title属性的<a>

    3⃣️  a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} //href="..."的<a>

    4⃣️  a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

    

6、后代选择器

     当两个HTML元素标签一同出现的时候，就变成了后代选择器

     1⃣️  h1 em {color:red;} //为<h1>中的所有<em>应用样式

      <h1>This is a <em>important</em> heading</h1>

     注意样式应用在了em上，而不是h1中

 

7、子元素选择器

     如果希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

     h1 > strong {color:red;}

     这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

8、相邻兄弟选择器

     如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

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

         

如果有任何的疑问，或者有关于CSS伪类和伪元素的任何内容都可以查询最上面的链接