css选择器

最近决定系统的学习css，基础打扎实，学习css权威指南的同时，做一些总结记录

元素选择器、类选择器与id选择器

• 类选择器可以组合(中间无空格)，选择有多个类名的元素

// html
 <div class="container clear">
    <img src="./img//pikaqiu.png" alt="pikaqiu">
    <p class="warning help">这是一个测试</p>
  </div>

// css 
  p.warning.help{
    background-color: red;
  }
// 表明选中p标签并且类名是warning和help的元素

• id选择器只可以使用一次，不可以组合（列如文档中有id值为test的元素应该只有一个）

属性选择器

id与类属选择器其实也只是选择属性值，不是所有标记语言都支持，但是属性选择器可以

1. 简单属性选择
2. 根据具体属性值选择
3. 根据部分属性值选择
4. 特定属性选择

• 简单属性选择
  根据元素属性来选择元素

  <div>
    <div select="sample1">sample1</div>
    <div select="sample2">sample2</div>
    <div select="sample3">sample3</div>
  </div>
  
// css
  div[select] {
    color: blue;
  }
  
// 选中属性值有select的所有元素

• 根据具体属性值选择
  根据属性及其值选择元素

// css
  div[select="sample2"] {
    color: red;
  }

==注意：== 属性值是完全串匹配

 <div select="sample1 sample2">sample1</div>
 
// css 必须写作如下，
div[select="sample1 sample2"] {
   color: red;
}

• 根据部分属性值选择
  • ~ 根据部分属性值选择,通过属性值中出现的空格分隔来实现

  <div>
    <div select="sample1">sample1</div>
    <div select="sample2 sample3">sample2</div>
    <div select="sample3 sample4">sample3</div>
  </div>
  
 // css 选中select属性包含sample3的元素
  div[select~="sample3"] {
    color: yellow;
  }

• • 字符串匹配属性选择器
    • select^="sam" :选择select属性值以sam开头的元素
    • select$="le1" :选择select属性值以le1结尾的元素
    • select*="amp" :选择select属性值包含amp的元素

• 特定属性选择类型

    <div lang="en">hello</div>
    <div lang="en-us">hi</div>
    <div lang="fr">hiiii</div>

// css 
  div[lang|="en"]{
    color: #f5f5f5;
  }
  
匹配lang属性值为"en"或者"en-"的元素

伪类与伪元素

链接伪类（静态伪类）

只应用与链接元素

• :link 未访问的超链接
• :visited 已访问的超链接

动态伪类

可以应用于任何元素

• :focus 拥有输入焦点的元素
• :hover 鼠标悬停的元素
• :active 用户输入激活的元素

:lang伪类

根据语言选择元素

==注意==：伪类之间可以组合

a:link:hover:lang(en) {
  color:red
}

伪元素

• :first-letter 设置首字母样式(中文对应第一个汉字)
• :first-line 设置首行样式
• :before 设置之前元素样式
• :after 设置之后元素样式

==注意==：伪元素必须出现在最后