初识CSS

选择器

选择器：可以帮我们精准的选中想要的元素

选择器有很多种方式，根据页面需求，选择使用合适的选择器 developer.mozilla.org/zh-CN/docs/…

• 1，id选择器：#idName 唯一标示 一个元素只能有一个id值 id在一个页面中的唯一性导致了如果以id为选择器来写CSS，样式就无法重用

   <div id="only">我是id选择器</div>
  

   #only{
     font-size:20px;
   }
  

• 2，class选择器：.calssName 一个元素可以有多个类名 ，一个class可以对应多个class

   <div class="dome1 dome2 dome3">我是类选择器</div>
   <p class="dome1 dome2">我也可以使用相同的class样式</p>
  

  .dome1{
     font-size:20px;
   }
  .dome2{
     backgroud:red;
  }
  .dome3{
     text-align:conter;
  }
  

• 3，元素（标签）选择器
  选中所有的相同元素,不管嵌套多少层，都可以选择上

    div{
       font-size:20px;
     }
    p{
       backgroud:red;
    }
  

• 4，通配符选择器： * 表示所有元素 包括html，body等所有的元素都会被选中

   *{
       margin:0;
       padding:0;
       backgroud:red;
   }
  

• 5，属性选择器：根据属性名和属性值选中元素

    /*表示：所有带有href属性的元素被选中*/
    [href]{
            color:red;
    }
    /*表示：当href属性值是 http://baidu.com 的元素才能被选中 */
    [href="http://baidu.com"]{
            color:red;
    }
    /*表示: 当type属性值是text的属性 被选中*/
    [type="text"]{
            border:1px solid red;
    }
    [id="dome"]{
         color:green;
    }
  

• 6，伪类选择器：用于向某些选择器添加特殊的效果

  a标签独有的伪类： :link 超链接未访问过的样式，只有a标签有作用 :visited 超链接访问过后的样式，只有a标签有作用 其他标签都可以使用的伪类： :hover 当鼠标悬停到元素上的样式 :action 当鼠标按下(激活)的时候的样式,鼠标抬起样式就消失

备注：a如果使用:link、:visited、:hover、:active四个伪类， 顺序必须是:link、:visited、:hover、:active 原因：同一条css规则，后出现会覆盖前面的同样规则,后出现的伪类会覆盖先出现的伪类 把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类， hover在后面覆盖了active的颜色，所以始终无法看到active的颜色 hover在active前面，先触发hover，这个时候还没有触发激活active，hover的样式就能生效 等触发激活active的时候，看到active的颜色，再抬起鼠标就又触发hover，颜色又是hover的颜色 但是如果是只是用到 link visited 这两个伪类，并不需要顺序关系

:focus可以用在标签上 向拥有键盘输入焦点的元素添加样式 :first-child 所有相邻元素中的第一个 :last-child 所有相邻元素中的最后一个 :nth-child(3) 具体选择第几个元素 2n+1 / odd 所有相邻元素中的基数个数 2n/ 2n+2 / even 所有相邻元素中的偶数个数

• 7，伪元素选择器 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中 伪元素只能用于块级元素

  • 伪元素选择器写法：

  伪元素选择器使用 “:” || “::”都可以，使用两个冒号::是为了区别伪类和伪元素 CSS2中伪元素可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号:: IE8及以下的一些浏览器不兼容双冒号（::）表示得方法，所以除了少部分伪元素，其余伪元素既可以使用单冒号(:)，也可以使用双冒号(::)

  ::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。 ::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。 常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素

   a::after {
    content: "→";
   }
  

  ::selection 文档中被选择的那部分 使用鼠标或其他选择设备选中的部分

   p::selection{
        background: green;
   }
  

  伪元素可以与 CSS 类配合使用： p.article::before { color: #FF0000; }

选择器的组合

1，后代元素 (派生选择器)：父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开

  ```css
  .father .child{
     color:#0000CC;
  }
  div p span{}
  #box p span em.num{}
  ul.box li span{}
  ```

2 ，直接子元素 父 > 子 只是一级子元素

```css
div > span{
  color:red;
}
```

3,相邻兄弟 + ：拥有同一个父元素的相邻元素 h1 + p :代表 h1后面的第一个p元素的样式

 h1 + p{
   color:red;
 }

4，所有兄弟元素~ ：同一个父元素中，某元素后面的所有兄弟元素 h1 ~ p:代表 h1后面的所有p元素的样式

   h1 ~ p{
       color:red;
      }

选择器的并列

/*类名为dome的div*/
 div.dome{ 

}
/* dome类和dome2类都生效*/
.dome,.dome2{

}
 /* 所有的div,em,span都生效*/
div,em,span{

}