前端css选择器

从零开始的前端生活--css基础

选择器

选择器是用来选择对应的html元素。

• 类选择器 以" . "为开头的选择器，很多元素可以共用同一个类选择器

• ID选择器 以" # "为开头的选择器。一般指向唯一元素

• 属性选择器 含有[] 的选择器

  <span class="item one">1</span>
  <span class="item">2</span>
  <span class="item three">3</span>
  <span class="item">4</span>
  <span class="item">5</span>
  span[class="item"] { // 属性选择器，选择类名为item,当然不仅仅是class，只要是属性都可以，例如input的type
       color: red;    //当class的值等于item时，字体设置为红色
  }

   

  [ attr ] 选中包含某个属性的元素

  [ attr = value ] 选中属性值等于某个值的元素

  [ attr ~= value ] 选中某些元素的属性值attr 含有value 这词汇

  [ attr ^= value ] 选中属性值以 value 开头的元素

  [ attr $= value ] 选中属性值以value结尾的元素

  [ attr *= vlalue ] 选中属性值包含value的元素

  [ attr |= value] 选中以指定值开头的元素，该值为完整的单词

• 伪类选择器

  一般是前有：的选择器

  :active	选中被激活的元素
  :focus	选中聚焦的元素
  :hover	选中鼠标悬浮在上面的元素
  :link	向未被访问的连接添加样式
  :visited	向已被访问的连接添加样式
  :first-child	向元素的第一个子元素添加样式
  :lang	向带有lang属性的元素添加样式
  :empty	选中里面无内容的元素

  
  <input type="text">
  <input type="text">
  input:focus { // 选择 聚焦的 表单
     color: red;
  }

  注：empty是选中无内容的元素，如<div></div>这种，不会被他的伪元素内容所左右。

  

• 伪元素选择器

:: first-line	向文本的首行添加样式
:: first-letter	向文本的第一个字母添加样式
:: before	在元素的前面添加内容
:: after	在元素后面添加内容

 .after::after {
        content: "";// after 和 before 要有content
        width: 10px;
        height: 10px;
       background-color: red;
       display: block;
  }

 

 

关系选择器

- 后代选择器              空格连接 比如：div  p   就是选择div里面的p标签
- 相邻后代选择器（子类选择器） 仅仅选择合乎规则的儿子元素，孙子和重孙就没有选择了（与后代选择器区别)> 连接      
- 兄弟选择器              选择当前元素==后面==的所有的合乎规则的兄弟元素 ~ 连接
- 相邻兄弟选择器       选择当前元素相邻的那个合乎规则的兄弟元素  用 + 连接