简单选择器,上下文选择器 结构伪类选择器 :target, :not, :before, :after, :focus

1.简单选择器

1.类选择器:对应html标签中的class属性

<a class="item">点击</a>

.item{
    border: 1px solid #000;
}

2.多个类复合应用

<div class="item">1</div>
<div class="center">222</div>

.item.center{
    background-color:lightgreen;
}

3.id选择器

<div id="first">测试</div>

#first{
    background-color:lightpink;
}

层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式

#first{
    background-color:red;
}
/* 后面再次添加css样式会覆盖前面的 */
#first{
    background-color:yellow;
}

属性元素级别

元素 < class < id

id选择器使用越来越少了,目前应用在两个场景:1.表单元素 2.锚点

1.上下文选择器

1.后代选择器: 空格

<div class="container"> 
    <div>
        111122
        <div>
            44444    
        </div>    
    </div>
<div>
<div>
    33333    
</div>

.container div{
    /* 给container下面所有div标签 添加了样式*/
    border: 1px solid #000;
}

2.父子选择器: >

<div class="container"> 
    <div>
        111122
        <div>
            44444    
        </div>    
    </div>
<div>
<div>
    33333    
</div>

.container > div{
    /* 只给container下面子div标签 添加了样式 44444不会添加样式*/
    border: 1px solid #000;
}

3.同级相邻选择器

<div class="container"> 
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
<div>

/* 给6添加样式  */
.item.center + .item{
    background-color:red;
}

4.同级所有选择器

<div class="container"> 
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
<div>

/* 选择 5 以后标签 */
.item.center ~ .item{
    background-color:lightsalmon;
}

3.结构伪类选择器

1. 匹配第一个子元素

<div class="container"> 
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
<div>

/* 选择 1 标签 */
.container > :first-child{
    background-color:lightsalmon;
}

2.最后一个子元素

<div class="container"> 
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
<div>

/* 选择 最后一个 标签 */
.container > :last-child{
    background-color:lightsalmon;
}

3.选择第几个元素:注意索引是从1开始

/* 选择 选择第3个 标签 */
.container > :nth-child(3){
    background-color:lightsalmon;
}

4.只选择偶数单元格 : even

.container > :nth-child(even){
    background-color:lightsalmon;
}

5.只选择奇数单元格: odd

.container > :nth-child(odd){
    background-color:lightsalmon;
}

6.从某一标签开始后剩下所有标签

/* 从4开始以后标签 */
.container > :nth-child(n + 4){
    background-color:lightsalmon;
}

7. 只取前三个

.container > :nth-child(-n + 3){
    background-color:lightsalmon;
}
/* -0 + 3 = 3
      -1 + 3 = 2
      -2 + 3 = 1 */

8.只取最后三个

.container > :nth-last-child(-n + 3){
    background-color:lightsalmon;
}

取倒数使用案例

/*  获取倒数第二个   */
.container > :nth-last-child(2){
    background-color:lightsalmon;
}

9.分组结构伪类

选择步骤:1.元素按类型进行分组 2.在分组中根据索引进行选择

/*  获取同类div标签中最后一个   */
.container > div:last-of-type{
    background-color:lightsalmon;
}
/*  在分组中匹配任何一个   */
.container div:nth-of-type(2){
     background-color:lightsalmon;
}
/*  前三个   */
.container div:nth-of-type(-n + 3){
     background-color:lightsalmon;
}
/*  最后2个   */
.container div:nth-last-of-type(-n + 2){
     background-color:lightsalmon;
}

10. :target :focus ::selection :not() ::before ::after

<button onclick="location='#login-form'">点击登录</button>
    <form action="" method="post" id="login-form">
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" />
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" />
      <button>登录</button>
    </form>

#login-form{
    display:none;
}
/* :target: 与id一起使用,实现锚点操作 */
/* 当前#login-form的表单元素被button的锚点激活的时候执行 */
#login-form:target{
    display:block;
}
/* :focus: 获取焦点时候修改样式 */
input:focus{
    background-color:yellow;
}
/* ::selection: 设置选中文本的前景色与背景色 */
input::selection{
    color:white;
    background-color:red;
}

 <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>

/* :not(): 排除某些元素后标签 */
.list > :not(:nth-of-type(3)){
    color:red;
}
/* ::before  在某个标签之前添加元素*/
.list::before{
    content:"购物车";
    color:blue;
    font-size:1.5rem;
    border-bottom:1px solid #000;
}
/* ::after  在某个标签之后添加元素*/
.list:after{
    content:"结算中...";
    color:red;
    font-size:1.1rem;
}