CSS的常用选择器

一.css基本语法

1.1 css基本组成

1.css由选择器和声明块组成

<style>
    p{
       color:red;
        font-size:30px;
    }        
</style>

上面的样式中p就是一个选择器,大括号中的一条或多条声明就组成了声明块.

1.2 css选择器

1.2.1 简单选择器:

• 元素选择器:用于选取页面中需要设置某些通用样式的某个元素

  标签名{
      
  }

• id选择器:用于选取页面中单独的,特殊的某个元素

  #id属性的值{
      
  }

• 类选择器:用于选取页面中拥有统一特征,需要同时设置一些样式的一些元素

  .class属性的值{
      
  }
  ​

  注:一个元素中可以有多个类,一个类也可以被多个元素所拥有

• 通配选择器(*):选取页面中的所有元素

  *{
      
  }

  注意:

  id属性值与class属性值的命名:

  ​ 1>.一般多用英文小写字母,下划线,连接符,数字

  ​ 2>.不能以数字开头,不能有特殊字符,汉字

1.2.2 组合选择器

​ 元素之间的关系:

​ 父元素：直接包含子元素的元素 子元素：直接被父元素包含的元素 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 兄弟元素：拥有相同父元素的元素叫做兄弟元素

• 后代选择器:用于选取后代,不管是子元素还是后代元素只要满足条件都会被选中

  祖先元素 后代元素{
      
  }
  ​

• 子代元素选择器:用于选取子代,只能选取儿子,不会选取之后的后代元素

  父代元素 > 子代元素{
      
  }
  ​

• 相邻兄弟选择器:用于选取相邻后一个兄弟元素

  前一个 + 后一个{
      
  }
  div + p{
      
  }
  选中的是div元素后一个相邻的为p的元素,如果不是p元素,则不会选中

  注意:中间如果被其他元素隔开,则不会起作用.

• 通用兄弟选择器:用于选取相邻后一堆兄弟元素

  前一个 ~ 后一堆{
  ​
  }
  douiv ~ p{
      
  }
  选中的是div后面的所有p元素,不管中间是否插入其他的不是p的元素.

  注意:不管中间有没有被其他元素隔开,只要是其后的兄弟元素,都会被选中

1.2.3 交集并集选择器

• 交集选择器:选取同时满足条件的元素

  选择器1选择器2选择器n{
      
  }
  div.p1{
      
  }
  选取既是div元素class值又为p1的元素

  注意:一般是用于元素和id,元素和类,id和类,id和属性

  ​ 最常用的是元素和类,元素和属性

• 并集选择器:用于选取一些不相关的元素需要设置相同样式

  选择器1,选择器2,选择器n{
      
  }
  div,p,h1{
      
  }
  选取div,p,h1元素

  注意:选择器写的越短越好

1.2.4 属性选择器

1.[a]{} 选中有a属性的元素 [id]{} -- 选中4 5 6行2.[a="b"]{} 选中有a属性,并且a属性的值为b的元素 [id="abc"]{} --43.[a^="b"]{} 选中有a属性,并且a属性的值以子字符串b开头的元素 [class^="box"]{} --1 2 34.[a$="b"]{} 选中有a属性,并且a属性的值以子字符串b结尾的元素 [id$="d"]{} --5 65.[a~="b"]{} 选中有a属性,并且a属性的值中包含单词b(单词的含义是每个单词之间用空格隔开) [id~="c"]{} --66.[a*="b"]{} 选中有a属性,并且a属性的值中包含子字符串b [id*="c"]{} --4 5 67.[a|="b"]{} 选中有a属性,并且a属性的值中以b为前缀 相当于以b-开头 [id|="a"]{} -- 4

<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
<p id="a-bc">我是段落标签1</p>
<p id="ab cd">我是段落标签2</p>
<p id="a b c d">我是段落标签3</p>

1.2.5 状态伪类选择器

1. :link{}:表示从未访问过的链接,用于超链接a

2. :visited{}:表示已经访问过的链接,用于超链接a

1.2.6 动作伪类选择器

1. :focus{}:获取焦点,目前用于input

2. :hover{}:鼠标悬浮在元素中就会触发这个伪类,针对任意元素

3. :active{}鼠标点击某个元素就会触发这个伪类,针对任意元素

input:focus{
    color:blue;
    background-color: pink;
        }
p:hover{
    color:red;
        }
div:active{
    background-color: pink;
}       

1.2.7 伪类选择器的结合性

a:link:hover{
    color:red;
        }
a:visited:hover{
    color:yellow;
}

注意:当:link :visited :hover :active同时使用时,要注意他们的顺序为LVHA

a:link{
    }
a:visited{
    
}
a:hover{
    
}
a:active{
    
}

1.2.8 结构伪类

1. first-child{}:选取第一个子元素

2. last-child{}:选取最后一个子元素

3. nth-child(){}:选取任意位置的子元素,从前往后数

4. :nth-last-child(){}: 选中任意位置的子元素,从后往前数

        
/*选取第3个子元素*/
/*必须为第3个子元素,且这个子元素必须是li 如果第3个是p元素则不会选中*/
    li:nth-child(3){
        font-size: 30px;
    }
    
    /*选取偶数位置  利用2n (n从0开始) 或者even*/
    li:nth-child(even){
        background-color: pink;
    }
    
    /*选取奇数位置  利用2n+1   或者odd*/
    li:nth-child(odd){
        background-color: #bfa;
    }
        
    /*选取前三个子元素*/
    li:nth-child(-n+3){
        background-color: pink;
    }
        
    /*选取从第三个开始的子元素*/
    li:nth-child(n+3){
        background-color: pink;
    }
        
    /*选取从第3个开始的所有偶数元素*/
    li:nth-child(2n+3){
        background-color: pink;
    }
        
    /*选取最后三个元素*/
    li:nth-last-child(-n+3){
        background-color: pink;
    }

body中的内容
<ul>
        <li>1 item</li>
        <li>2 item</li>
        <li>3 item</li>
        <li>4 item</li>
        <li>5 item</li>
        <li>6 item</li>
        <li>7 item</li>
        <li>8 item</li>
        <li>9 item</li>
        <li>10 item</li>
    </ul>
    <ul>
        <li>1 item</li>
        <li>2 item</li>
        <li>3 item</li>
        <li>4 item</li>
        <li>5 item</li>
        <li>6 item</li>
    </ul>