选择器分类总结

一、基本选择器

 

 1：通配符选择器

   书写格式：*  {声明块}；

   功能：所有标签都应用其样式；

    适用场景：统一样式；

   *{
       color:red;
    }

 

 2：元素选择器

   书写格式：标记名{声明块}

 

 3：类选择器

    书写格式：.类名{声明块}

    类选择器的规范：

     a：点号开始

     b：包含字母，数字，下划线，连字符（减号）

     c：点后面必须是字母

     d:大小写敏感（区分大小写）

 

4:ID选择器（最好预留给JS用）

   书写格式：#ID名{声明块}

   特点：名字唯一（即身份证号）

 

5:组合选择器、并集选择器

   书写格式：元素名，ID名，类名{声明块}

   没有顺序要求

 

 

二、层次选择器

 

1：子级选择器

   书写格式：父元素A>子元素B{声明块}

article>section{
    color:gray;
}

 

2: 后代选择器

   书写格式：祖先元素A+"空格"+后代元素B+ {声明块}

article p{
    color:slateblue;
}

 

3:兄弟选择器

书写格式：兄弟元素A+"+"+兄弟元素B{声明块}

注：AB之间不能有1其他的元素

h1+p{
    color:blue;
}

 

 4:通用选择器

书写格式：兄弟元素A+"~"+兄弟元素B{声明块}

选中的是A元素后面的所有兄弟元素

h1~p{
    color:yellowgreen;
}

 

 

三、结构伪类选择器

 

1：选中某些（0到多个）元素

书写格式：元素A:nth-child(n)

header>nav:nth-child(5){
    color:hotpink;
}

 

2:选中第一个元素

书写格式：元素A:first-child{}

header>nav:first-child{
    color:goldenrod;
}

 

3:选中最后一个元素

书写格式：元素A:last-child{}

nav:last-child{
    color:goldenrod;
}

 

4：选中奇数项元素

书写格式：元素A:nth-child(odd)

 header>nav:nth-child(odd){
    color:darkolivegreen;
}

header>nav:nth-child(2n+1){
    color:chocolate;
}
 

5：选中偶数项元素

书写格式：元素A:nth-child(even)

header>nav:nth-child(even){
    color:darkolivegreen;
}

header>nav:nth-child(2n){
    color:red;
}

 

6.选中指定标签的第n个元素

书写格式：元素A:nth-of-type(n){声明块}

nav:nth-of-type
type类型
step1：先把nav获取到
step2:在选取第n个

 header>nav:nth-of-type(5){
    color:hotpink;
} 

 

7.否定伪类选择器

书写格式：元素A:not(:nth-child(n))

目的：除了第三个元素以外，进行样式的添加

 header>nav:not(:nth-child(3)){
    color:rgb(233, 218, 14);
}

目的：除3和7元素外，其他为红色

header>nav :not(:nth-child(3)):not(:nth-child(7)){
    color:rgb(233, 14, 25);
}

 

8:动态伪类选择器

有一个书写顺序要求:

A方案:
link.visited.hover.active

B方案:
visited.link.hover.active

注：link/visited  静态伪类（仅限于超链接   即a标签）

 a:link{
    color: gold;
}
a:visited{
    color: lightsalmon;
}

a:hover{
    color: green;
}

a:active{
    color: indigo;
}

nav:hover{
    color: rgb(226, 40, 164);
    text-shadow:10px 10px 10px red;
}

 

扩展：动态伪类选择器

:focus

a：适用场景：使用键盘进行页面的操作

b：输入框

a:focus{
    color: mediumpurple;
}

input:focus{
    border:red;
}

C方案：
visited.link.focus.hover.active

D方案：
link.visited.focus.hover.active

 

a:跳转
当a被点击后，会跳转到href属性值的页面
step1:a标签             未访问
step2:鼠标放到a标签上   悬停（移入）
step3：鼠标点击a标签    点击的时候
step4：a标签已经被点击过  已访问
a：link  未访问
a：visited  已访问

a：hover   悬停
a：active  点击
由于用户体验，操作记录是会被保留的
为了重置未访问，需要进行浏览器的历史记录

 

9.选中最后一个指定类型的标签

书写格式：元素A：  last-of-type{声明块}

footer>p:last-of-type{
    color:hotpink;
}

 

10:选中第一个指定类型的标签

书写格式：元素A:first-of-type{声明块}

 footer>p:last-of-type{
    color:rgb(71, 130, 224);
}

 

11:选中无兄弟元素的标签

书写格式：  元素A: only-child{声明块}

p{
    width: 100px;
    height: 100px;
    background-color: indigo;
}

p:only-child{
    background-color: lawngreen;
}

 

12:选中没有元素内容的标签

书写格式：元素A: empty{声明块}

p{
    width: 150px;
    height: 100px;
    background-color: rgb(202, 23, 128);
}

p:empty{
    background-color: lightsalmon;
} 

 

13.选中目标元素

元素A:target{声明块}

锚点：
a.不同锚点的信息，在同一个区域显示
   注：只选中被选中的元素信息
       其他信息进行隐藏
    p{
    display:none;
}

b.被选中的元素，进行高亮显示
    .container{
    width:600px;
    border:1px solid orangered;
}
     #box1:target{
   display:block;
   color:red;
   background-color: palegreen;
}
    #box2:target{
    display:block;
    color:red;
    background-color: palegreen;
}
 

 

四、伪元素选择器

适用场景：
当需要多个元素前面或后面添加内容时
    icon图片，公司logo.公司的名称

    1.在元素之前添加内容
        书写格式：元素A::before{声明块}
         div::before{
    content:"Love"
}

    2.在元素之后添加内容
        书写格式：元素A::after{声明块}
        div::after{
    content:"一组"
}

    3.选中元素的第一行
        书写格式：元素A::first-line{声明块}
        p::first-line{
    color: palevioletred;
}

    4.选中元素的首字母/汉字
        书写格式：元素A::first-letter{声明块}
         p::first-letter{
    color: rgb(74, 49, 185);
    font-size:30px;
}

    5.选中元素的元素内容
        书写格式：元素A::selection{声明块}
        适用场景：设置鼠标选中内容的文本色和背景色

        注：
1.只能设置背景色和文本颜色
2.text-shadow
3.text-decoration
4:cursor
5:outline

 p::selection{
  color: palevioletred;
   background-color: rebeccapurple;

}