1.新增选择器

1.1.css3选择器大纲

1.2.选择器示例

1.2.1.通用兄弟选择器 ~

选择后面满足条件的兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1~div{
            color: red;
        }
    </style>
</head>
<body>
    <div>hello, div</div>
    <p class="p1">hello, p</p>
    <div>hello, div</div>
    <h1>hello, p</h1>
    <div>hello, div</div>
</body>
</html>

1.2.2.伪类选择器

1.动态伪类选择器 :focus

<style>
    input:focus{
        border: blue;
        color: red;
    }
</style>
<input type="text" value="请输入用户名">

2.目标伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #btn1:target{
           background-color: blue;
       }

       #btn2:target {
           background-color: red;
       }

    </style>
</head>
<body>
<a href="#btn1">button1</a>
<a href="#btn2">button2</a>

<div id="btn1">
    这里是内容1
</div>
<div id="btn2">
    这里是内容2
</div>

</body>
</html>

tab 切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #btn1:target {
            z-index: 1;
            background-color: blue;
        }

        #btn2:target {
            z-index: 1;
            background-color: red;
        }
        .tab-content{
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            background-color: #cccccc;
        }

    </style>
</head>
<body>
<a href="#btn1">button1</a>
<a href="#btn2">button2</a>

<div id="btn1" class="tab-content">
    这里是内容1
</div>
<div id="btn2" class="tab-content">
    这里是内容2
</div>
</body>
</html>

3.UI元素状态伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:disabled{
            border: 1px solid red;
        }
        input:checked{
           width: 100px;
            height: 100px;
        }
        input:enabled{
            border: 1px solid blue;
        }

    </style>
</head>
<body>
<input type="text" disabled>
<input type="checkbox" checked>
<input type="text">
</body>
</html>

4.结构伪类

E:nth-child和E:nth-of-type的区别

E:nth-child(n)有两个条件:1 是父元素的第n个子元素 2 这个子元素是E,举例说明:

<style>
    P:nth-child(2){
        color: red;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
</div>

上面代码中 p:nth-child(2) 表示选中父元素的第二个子元素,并且还是p元素,因此,在上面代码中第一个p元素的字体会变红, 如果改成这样 p:nth-child(1) 根据规则,父元素的第一个元素是span,不满足条件,所以这样写是不会有任何效果的

再来看看E:nth-of-type(n),它表示选中父元素下E类型的元素中的第n个

<style>
    p:nth-of-type(2){
        color: red;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
</div>

在上面代码中,p:nth-of-type(2) 表示选中父元素(.box)下面所有的p标签中的第二个,这样就不管其他的元素了,只需要找到类型为p的元素,然后再找到第二个p就行了

注意:不管是nth-child(n)还是nth-of-type(n),它们中的n都是从1开始的,并不是从0开始,并且n可以是公式,例如:2n+1, 2n,也可以是关键字even(偶数),odd(奇数)

如果上面的代码搞明白了,那么接下来这些就很容易学习了

:first-child/:last-child 和 :first-of-type/:last-of-type

 <style>
        p:first-child {
            color: red;
        }
        p:last-child{
            color: blue;
        }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
</div>

p:first-child 和 p:nth-child(1) 效果是一样的,必须满足两个条件 1 选中的这个元素是p 2 选中的这个元素是父元素的第一个元素 同理,:last-child就表示选择最后一个元素并且这个元素还是p元素,因此,这个案例中 span的字体并没有变红,而最后一个p元素变成蓝色

下面我们来看看,:first-of-type 和 :last-of-type

<style>
    /*p:first-child {*/
        /*color: red;*/
    /*}*/
    /*p:last-child{*/
        /*color: blue;*/
    /*}*/
    p:first-of-type{
        color: red;
    }
    p:last-of-type{
        color: blue;
        font-weight: bold;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
</div>

上面代码中第一个p元素字体变红 最后一个p元素颜色变蓝,字体加粗,规律就是,first-of-type 和 nth-of-type(1)类似,需要满足两个条件 1 是父类下面某种类型 2 是这个类型中的第几个元素 满足这两个条件的元素就会被选中, p:first-of-type表示 选中父元素下所有的p元素这种类型,并且从这种类型中选中第一个

上面的这几种选择器都是以从上到下的顺序选的,那如果想从下往上选择怎么办呢?需要使用 :nth-last-child和:nth-last-of-type

<style>
    p:nth-last-child(1) {
        color: red;
    }

    p:nth-last-of-type(2) {
        color: blue;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
</div>

运行测试看看效果

结构性伪类选择器中还有:root和:empty需要搞定

 <style>
    :root{
        background-color: green;
    }
    p:empty{
        height: 300px;
        background-color: red;
        margin-top: 100px;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p></p>
</div>

:root 选中根元素,在html文档中选中的就是 根节点html, :empty 选中的是为空的元素,上面代码中 最后一个p为空,因此会被选中

5.否定伪类选择器 :not

这个选择器非常有用,可以进行过滤操作,例如,上面代码中,如果元素为空执行设置一种样式,如果元素不为空设置另一种样式

<style>
    p:empty{
        /* 为空 */
        height: 300px;
        background-color: red;
        margin-top: 100px;
    }
    p:not(:empty){
        /* 不为空 */
        background-color: blue;
    }
</style>
<div class="box">
    <span>xxx</span>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p>hello nodeing!!!</p>
    <p></p>
</div>

1.2.3.伪元素选择器

首先来看伪类和伪元素的区别,伪类通常表示一种特殊状态,伪元素表示DOM外部的某种文档结构,大概意思和伪军差不多,日本收编的皇协军俗称伪军,这里的伪元素表示一种文档结构,一种元素,但又不是真正意义上的元素

:before 和 ::before这两种写法有什么区别?对于单冒号和双冒号都是被浏览器所支持的,在css3中使用了单冒号和双冒号来区分伪类和伪元素,单冒号表示伪类,双冒号表示伪元素

1.::first-letter

这个伪元素用来选择文本块的第一个字母,通常用来做一些首字母相关的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p::first-letter{
            font-weight: bold;
            font-size: 40px;
            float: left;
            padding: 4px 6px 0 4px;
        }
        p{
            width: 500px;
            border: 1px solid;
        }
    </style>
</head>
<body>

<div class="box">
    <p>As an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications. In the following "hello world" example, many connections can be handled concurrently. Upon each connection the callback is fired, but if there is no work to be done, Node will sleep.</p>
</div>

</body>
</html>

2.::first-line

这个伪元素用来匹配文本的第一行

在上面案例代码中加入下面这块代码试试

p::first-line{
    color: red;
}

3.::selection

默认情况下,当我们选中一行文字的时候,浏览器有默认的背景颜色,如果想修改这个背景颜色,就可以使用这个委员说

p::selection{
    background-color: red;
}

1.2.4.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name]{
            /*只要设置了name属性就能匹配上*/
            border: 1px solid red;
        }
        input[type=password]{
            /*设置了type属性并且属性值需要等于password*/
            border: 1px solid blue;
        }
        input[value|=user]{
            /*value属性值以user或者user-开头都能被匹配上*/
            background-color: orangered;
        }
        input[value~=user]{
            /*value属性值如果用空格隔开,其中有一个值等于user就可以被匹配上*/
            color: white;
        }
        input[value*=name]{
            /*value属性值包含name就行*/
            font-weight: bold;
        }
        input[value^=user]{
            /*value属性值以user开头能匹配上*/
            border: 5px solid black;
        }
        input[value$=name]{
            /*value属性值以name结束的能被匹配上*/
            background-color: green;
        }

    </style>
</head>
<body>

<input type="text"  value="user">
<input type="text"  value="user-name">
<input type="text" value="email">
<input type="text" value="username user">
<input type="password" >
<input type="text" name="age">
<input type="text" value="nickname">
</body>
</html>