属性选择器 结构伪类选择器 伪元素选择器
# css选择器的补充 ## 属性选择器 1. 选择特定属性的标签
input[value] {}

如上选择了有value的input

  1. 选择特定属性的特定值的标签

    intput[type=text] {}
    

    选择出来的type的值是text的input

  2. 选择特定属性的值有规律的:开头的一样的某些元素

    div[class^=icon] {
    }
    
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
    

    如上就选出来了 icon1到icon4 标签

  3. 选择特定属性的值有规律的:结尾一样的某些元素

    section[class$=data] {}
        <section class="icon1-data"></section>
        <section class="icon2-data"></section>
        <section class="icon3-ico"></section>
    

    如上选择出来的icon1-data和 icon2-data标签

  4. 选择特定属性的值有规律的:含有的一样的元素

    div[class*=data]{}
        <section class="icon-data1"></section>
        <section class="icon-data2"></section>
    

    这样就选出来,icon-data1,icon-data1标签。

补充

属性选择器的权重和类选择器的权重一致!。

结构伪类选择器

image-20210105164334398

?-child

first-child

        ul :first-child {
            color: aqua;
        }
    <ul>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
    </ul>

这样就选择出来的第一个<li>

我们在使用中经常会这样写ul li:first-child

这样的目的是选择器会检查我们选择出来的元素第一个是不是<li>

如果不是则不会选择任何标签,如下代码:

        ul li:first-child {
            color: aqua;
        }
    <ul>
        <p>越行勤</p>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
    </ul>

image-20210105164146940

如果要选最后一个那么就为 last-child

如果想选任意次序的子元素就为用nth-child(x)来选择第x个元素。

nth-child(x)的妙用

x可以是数字,关键字还可以是公式。

  • 数字那么就选择第x行元素

  • 关键字:even选择偶数, odd选择奇数

  • 公式 n 的含义就是选择出来 1,2,3,4,5...n,如果是 2n 呢? 那么选择出 2 ,4,6,8

    2n-1那么就是奇数的元素 ;5n就选择出第5,10,15个元素;5-n就是选择出来的前五个元素

    emmm以此类推吧。

    注意这里只能用n 字母

image-20210105161744340

实现这个效果就十分简单了,

    <style>
        li {
            list-style: none;
        }

        ul li:nth-child(even) {
            background-color: #959995;
        }
    </style>
<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>
        <li>我是第9个子元素</li>
    </ul>
</body>

?-of-type

ta和child并没有啥大的区别,主要体现在这个方面

ul li:nth-of-type(3){}

这个选择器是先找出ul里的所有li ,然后在在里面找第3个

     `ul li:nth-of-type(3) {
         color: aqua;
     }
 <ul>
     <p>越行勤</p>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
 </ul>

image-20210105164807159

总结一下:

child是先找第几个标签,后看是否标签匹配

type是先找匹配的标签,后看选择出标签

child可能会选择不出来标签。

css伪元素选择器

这里简单介绍一下::before和 ::after

伪类选择器实例含义
::beforep::before在每个

元素之前插入内容(在p的内部)

::afterp::after在每个

元素之后插入内容(在p的内部)

我们伪类选择器可以帮我不用改变html文档来创建新元素

  • 创建的元素是行内元素
  • 创建的元素html里找不到,成为伪元素
  • 必须要有content属性(加入内容)
  • 权重和标签选择器一样
  • before和after是在父盒子里面的

例如:

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        div::before {
            content: "越";
        }
    </style>
<body>
    <div>行勤</div>
</body>

image-20210105171121209

清除浮动的妙用

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
 
        .clearfix:after {
            clear: both;
        }
 
        .clearfix {
            *zoom: 1;
        }

结语

假期的第11天
wx

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/05/css高级的选择器
最后更新于:  121  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟