第二篇 css - 选择器 - 【 基础选择器 + 组合选择器 + 伪类选择器 + 伪元素选择器 】

css 选择器分类

一、基础选择器
 
   1、ID 选择器
   
   2、类选择器
   
   3、通配符选择器
   
   4、标签选择器
   
   5、属性选择器
   
二、组合选择器
 
   1、后代选择器
   
   2、元素选择器
   
   3、相邻兄弟选择器
   
   4、通用兄弟选择器
   
   5、交集选择器
   
   6、并集选择器
   
三、伪类选择器   
 
   1、标记状态的伪类
   
   2、筛选功能的伪类
   
四、伪元素选择器

部分选择器详解

通配符选择器 【 基础选择器 】

通配符选择器使用 * 来选择页面里面的所有元素
 
*{
    margin:0;
    padding:0;
}
 
由于通配符选择器要把样式覆盖到所有的元素上,因此它的效率不会高

属性选择器 【 基础选择器 】

属性选择器通过 DOM 的属性来选择 DOM 节点，属性选择器用括号 "[]" 包裹
 
a[href]{
    color:red;
}
 
属性选择器有如下几种形式
 
  1、[attr] 用来选择带有 attr 属性的元素
 
  2、[attr = xxx] 用来选择 attr 属性等于 xxx 的元素,如选择文本输入框
 
     1、这个选择器要注意,xxx 和 HTML 中的属性值必须完全相等才会生效
     
     <input class="input text" type="text" value="xuanze"/>>
 
     //css
     input[class="input text"]{
         color:red;
     }
     
     2、[attr ~= xxx] 这个选择器中间用了 ~=, 选择属性值包含 xx
     
     <input class="input text" type="text" value="xuanze"/>>
 
     //css
     input[class~=input]{
        color:red;
     }
     
     3、[attr|xxx] 这个选择器是用来选择为 xxx 或者 xxx- 开头的元素
     
        <div class="article">1</div>
        <div class="article-tile">2</div>
        <div class="article-content">3</div>
        <div class="article_footer">4</div>  => 不生效
 
        div[class |= article]{
          color:red
        }
        
        上面会有 article 开头的生效，但对第四条不会生效
        
      4、[attr ^= xxx]，这个选择器会匹配 xxx 开头,实际就是用正则去匹配属性值,只要是 xxx 开头就行  
      
      5、[attr $= xxx] 这个选择器用正则匹配属性以 XXX 结尾的元素
      
      6、[attr *= xxx] 这个选择器用正则匹配的方法来选择属性值中包含 XXX 字符的所有元素

子元素选择器 【 组合选择器 】

子元素选择器和后代选择器类似
 
不过子元素只找子元素,不会把所有的后代都找一遍
 
.page >p{
    color:red
}

相邻兄弟选择器 【 组合选择器 】

相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素,它的语法是"选择器A + 选择器B"
 
h1+p{
    margin-top:20px;
    color:black;
}

通用兄弟选择器 【 组合选择器 】

通用兄弟选择器和相邻兄弟选择器很相似,它的语法是 "选择器A ~ 选择器B "，会匹配选择器 A 后面所有符合选择器 B 的元素
 
H1~P{
    color:red
}

交集选择器 【 组合选择器 】

交集选择器 是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,法语"选择器A选择器B"
 
.list-item.active{
    color:red;
    font-size:20px
}

并集选择器 【 组合选择器 】

并集选择器是为了合并类型的样式,可以是选择器不用单样式相同的CSS语法块合并。并集选择器就是用多个逗号分隔多个选择器,如"选择器A,选择器B"
 
H1,H2,P{
    margin:0;
    padding:0;
}

伪类选择器

标记状态的伪类 【 伪类选择器 】

1、:link 选取未访问过的超链接
 
2、:visited 选取访问过的连接
 
3、:hover 选取鼠标悬浮的元素
 
4、:active 选取点中的元素
 
5、:focus 选取获取焦点的元素

筛选功能的伪类 【 伪类选择器 】

1、:empty
 
选取没有子元素的元素
 
2、:checked
 
选取勾选状态下的 input 元素  只对 radio 和checkbox 有效
 
3、:disabled
 
选取禁用的表单元素
 
4、:first-child
 
选取当前选择器下的第一个元素
 
5、:last-child
 
选取当前选择器下的最后一个元素
 
6、:nth-child(an+b)
 
选取指定位置的元素,参数支持 an+b 的形势.比如 li:nth(2n+1),就可以选取 li 元素序号是 2 的整数倍 +1 的所有元素,也就是 1,3,5,7,9 序号的 li 元素
 
7、:nth-last-child(an+b)
 
和上面类似,不过从后面选取.
 
8、:only-child
 
选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效,如果还有其他的兄弟元素,则不生效
 
10、:only-of-type
 
选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效。

伪元素选择器

伪元素 选择器是用来向元素设置某种特殊效果；伪元素选择器并不是真实的 DOM 元素,所以称之伪元素；伪元素 大致 有以下 5 种
 
1、::first-line
 
为元素的第一行使用样式
 
2、::first-letter
 
为某个元素的首字母或第一个文字使用样式
 
3、::before
 
在某个元素之前插入内容
 
4、::after
 
在某个元素之后插入内容
 
5、::selection
 
对光标选中的元素添加样式

伪元素使用说明
 
1、伪元素构造的元素是虚拟的,所以不能使用 js 去操作
 
2、first-line 和 first-letter 不使用于内联样式,在内联样式中都会失效
 
3、如果同时使用了 befor 和 first-letter. 第一个内容要从 before 中算起,如果 before 中第一个为非文本内容,那 first-letter 也会作用到这个非文本内容上,但不会生效。
 
4、在 CSS3 中规定, 伪类用一个冒号 (:) 表示, 伪元素用两个冒号 (::)来表示

伪元素 和 伪类 区分
 
1、伪类表示被选择元素的某种状态，例如:hover
 
2、伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是 "假元素"，只存在于 css 中，所以叫 "伪" 的元素，例如 :before 和 :after
 
3、在 CSS3 中规定, 伪类用一个冒号 (:) 表示, 伪元素用两个冒号 (::)来表示