Css基础——选择器介绍

Css选择器

• 基础选择器
  1. *选择器
  2. id选择器
  3. 类选择器
  4. 标签选择器
     对应做一个实例，先写一个html的测试代码。

基準選択器紹介-[*]选择器

ID选择器

ID选择器

类选择器

类选择器

image.png

先做一对测试准备！

• 组合选择器

  1. 多元素选择器
     用［,］分隔，同时匹配元素的选择器

     
     
     

     a1.PNG

  2. 后代选择器
     用空格分开，匹配该元素的所有后代元素，不仅仅是子元素。

     ct. 后代元素名。

a2.PNG

3. 子元素选择器
   用［>］分隔，匹配该元的所有子元素

   
   
   

   a3.PNG

4. 直接相邻选择器
   用［+］连接，匹配指定元素相邻的同级元素。

   
   
   

   a4.PNG

5. 普通相邻选择器
   是指第三选择器，匹配该元素之后的同级元素，无论是否相邻。

• 属性选择器

  1. E［attr］
     匹配所有具有属性attr的元素，div［id］就能取到所有有id属性的div
  2. E［attr ＝value］
     匹配属性attr的值为value的元素，div［id＝test］，匹配id＝test的div
  3. E［attr~＝value］
     匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
  4. E［attr^＝value］
     匹配属性attr的值以value开头的元素
  5. E［attr$＝value］
     匹配属性attr的值以value结尾的元素
  6. E［attr*＝value］
     匹配属性attr的值包含value的值

• 伪类选择器
  选择器 含义
  a:link 匹配所有未被点击的链接
  a:visited 匹配所有已被点击的链接
  a:hover 匹配鼠标悬停其上的a元素
  a:active 匹配鼠标已经其上按下、还没有释放的a元素
  a:focous 匹配获得当年焦点的a元素
  a:enable 匹配表单中可使用的元素
  a:disenable 匹配表单中不可使用的元素
  a:checked 匹配表单中被选中的radio或checkbox元素
  li:first-child 匹配父元素的第一个子元素li
  li:last-child 匹配父元素的最后一个子元素li
  li:nth-child(n) 匹配父元素的第n个子元素li（odd奇数，even偶数）

• 伪元素
  选择器 含义
  E::before 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面
  E::after 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面
  E::selection 应用于文档中被用户选中的部分
  E::first-letter 匹配E元素的第一个字母第一行的第一个字母
  E::first-line 匹配E元素的第一行
  该部分参考来源
  作者：晓风残月1994的