css：css3新特性（属性选择器、结构伪类选择器）

1、属性选择器

（1）属性选择器可以不借助于类或者ID进行选择

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            input[value]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text"/>
            <input type="text" value="请输入密码" />
        </form>
    </body>
</html>

效果：

（2）选择属性=值的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            input[type=text]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text" value="请输入用户名"/><br>
            <input type="password" value="请输入密码" />
        </form>
    </body>
</html>

效果：

css：css3新特性（属性选择器、结构伪类选择器）

（3）选择属性值开头/结尾的某些元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div[class^=ima]{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="imags1">1</div>
        <div class="imags2">2</div>
        <div class="tupian1">3</div>
        <div class="tupian2">4</div>
    </body>
</html>

css：css3新特性（属性选择器、结构伪类选择器）

以。。。。结尾：

    <style>
            div[class$=pian2]{
                color: red;
            }
        </style>

2、结构伪类选择器

主要根据文档的结构来选择元素，常用于根据父级选择里面的子元素

（1）选择第一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            ul :first-child{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </body>
</html>

css：css3新特性（属性选择器、结构伪类选择器）

注意选择器的元素（ul）后面要添加空格

（2）选择第n个

  <style>
            ul :nth-child(3){
                color: red;
            }
        </style>

css：css3新特性（属性选择器、结构伪类选择器）

（3）偶数孩子

    <style>
            ul :nth-child(even){
                color: red;
            }
        </style>

<style>
            ul :nth-child(2n){
                color: red;
            }
        </style>

css：css3新特性（属性选择器、结构伪类选择器）

（4）奇数孩子

     <style>
            ul :nth-child(odd){
                color: red;
            }
        </style>

     <style>
            ul :nth-child(2n+1){
                color: red;
            }
        </style>

css：css3新特性（属性选择器、结构伪类选择器）

（5）从第三个孩子元素开始：

   <style>
            ul :nth-child(n+3){
                color: red;
            }
        </style>

css：css3新特性（属性选择器、结构伪类选择器）

（6）前三个孩子元素：

      <style>
            ul :nth-child(-n+3){
                color: red;
            }
        </style>

css：css3新特性（属性选择器、结构伪类选择器）

3、nth-child与nth-of-type

（1）nth-child

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            section div:nth-child(1) {
                color: red;
            }
        </style>
    </head>
    <body>
        <section>
            <p>1</p>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </section>
    </body>
</html>

css：css3新特性（属性选择器、结构伪类选择器）

（2）nth-of-type

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            section div:nth-of-type(1) {
                color: red;
            }
        </style>
    </head>
    <body>
        <section>
            <p>1</p>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </section>
    </body>
</html>

css：css3新特性（属性选择器、结构伪类选择器）

nth-child：先对元素进行排列，选出第一个，但是元素的类型不对
nth-of-type：先找到所有的div，再选出第一个div元素

4、伪元素选择器

可以利用css创建新标签元素，而不需要html标签，从而简化html的结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                 200px;
                height: 300px;
                background-color: yellowgreen;
            }
            div::before{
                content: 'before';
            }
            div::after{
                content: 'after';
            }
        </style>
    </head>
    <body>
        <div>div</div>
    </body>
</html>

css：css3新特性（属性选择器、结构伪类选择器）

before和after属于行内元素
新创建的这个元素在文档树中是找不到的，称为伪元素
before和after必须有content属性
权重为1
应用：可以做字体图标，不用再在父盒子里面嵌套子盒子

css：css3新特性（属性选择器、结构伪类选择器）

相关推荐