高级选择器

一、placeholder

用于文本输入框提示输入

<input type="text" placeholder="请输入账号">

input::placeholder{
     color: red;
}

注意：双冒号

二、反向选择器

not()：除了括号里面的，其他都生效

<div class="box">
    <p>111</p>
    <p class="wrap">222</p>
    <p>333</p>
    <p>444</p>
</div>

.box p:not(.wrap){
      color: red;
}

三、a标签的选择器

 没有设置的时候默认没有点击过的时候，为蓝色，点击的时候为红色，点击过后的颜色为紫色；

/*没有点击的时候*/
a:link{
    color:yellow;
}
/*点击的时候，其他元素也可以使用*/
a:active{
    color:royalblue;
}
/*点击之后*/
a:visited{
    color:pink;
}

四、结构性伪类选择器

1、e:nth-child(n)         e=元素         n=第几个

选中e元素父级的所有子级中的第n个元素，如果有设定特定的元素类型（如：p），则第n个元素是该类型，样式才会生效

<div class="box">
    <div>77777</div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
        width: 100px;
        height: 100px;
        background-color: red;
}
.box p:nth-child(2){
        background-color: green;
}

 

 

2、e:nth-of-type(n)        e=元素         n=第几个

选中e元素父级的所有子级中的第n个元素，无视其他类型的元素

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:nth-of-type(2){
       background-color: green;
}

 

3、e:first-child         e=元素

选中e元素父级的所有子级中的第1个元素，元素规则与e:nth-child(n)相似，会受到其他元素影响

<div class="box">
    <div>77777</div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:first-child{
       background-color: green;
}

 

去掉第一个位置的div

<div class="box">
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:first-child{
       background-color: green;
}

 

4、e:last-child         e=元素

选中e元素父级的所有子级中的最后1个元素，元素规则与e:nth-child(n)相似，会受到其他元素影响

<div class="box">
    <div>77777</div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:last-child{
       background-color: green;
}

 

5、e:nth-child(add/even)  奇、偶数

选中e元素父级的所有子级中的奇、偶数元素，元素规则与e:nth-child(n)相似，会受到其他元素影响

奇数，添加了div

<div class="box">
    <div>77777</div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:nth-child(odd){
       background-color: green;
}

 

偶数，去掉div

<div class="box">
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
</div>

p{
       width: 100px;
       height: 100px;
       background-color: red;
}
.box p:nth-child(even){
       background-color: green;
}

 

五、属性选择器

通过选择元素的属性以及属性值，修改元素的样式

<div class="box1" id="bo1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

.box1,.box2,.box3{
       width: 100px;
       height: 100px;
       background-color: red;
}
div[class="box1"]{
       font-size: 30px;
       background-color: green;
}

 div中的class="box1"也可换成id="bo1",效果相同

 

^：前缀选择，选中以所给定的前缀开头的所有属性值；

*：包含选择，选中包含所给定的内容的所有属性值；

$：后缀选择，选中以所给定的后缀结束的所有属性值；

.box1,.box2,.box3{
       width: 100px;
       height: 100px;
       background-color: red;
}
div[class^="bo"]{
       font-size: 30px;
       background-color: green;
}

 

.box1,.box2,.box3{
       width: 100px;
       height: 100px;
       background-color: red;
}
div[class*="ox"]{
       font-size: 30px;
       background-color: green;
}

.box1,.box2,.box3{
       width: 100px;
       height: 100px;
       background-color: red;
}
div[class$="ox1"]{
       font-size: 30px;
       background-color: green;
}

六、伪元素

注意：伪元素属于行内元素，需要使用content属性激活，单标签没有伪元素（img、input等）

::before：插入内容在正文之前；

::after：插入内容在正文之后；

<ul class="wrap">
     <li class="wrap1">111111</li>
     <li>2222222</li>
     <li>33333333</li>
     <li>4444444444</li>
     <li>55555</li>
     <li>6666666</li>
</ul>

*{margin: 0;list-style: none;padding: 0;}
.wrap{
     height: 400px;
     width: 1000px;
     background-color: red;
     margin: 100px auto;
     position: relative;
}
.wrap::before{
     content: " ";
     background-color: pink;
     display: block;
     width: 100px;
     height: 100px;
}
.wrap::after{
     content: " ";
     background-color: green;
     display: block;
     width: 100px;
     height: 100px;
}

伪元素存在的意义：

1、对页面进行修饰；

2、给文本添加内容；

3、能够解决高度塌陷；