css3选择器补充

一、关系选择器

1、E+F （E元素下一个满足条件的兄弟元素节点）

 1 <style>
 2      div + p{
 3          background-color:red;// 第一个p元素变色
 4      }
 5 </style>
 6 <body>
 7     <div>div</div>
 8     <p>1</p>
 9     <p>2</p>
10     <p>3</p>
11 </body>

 1 <style>
 2      div + .demo{
 3          background-color:red;// 第一个p元素变色
 4      }
 5 </style>
 6 <body>
 7     <div>div</div>
 8     <p class="demo">1</p>
 9     <p>2</p>
10     <p>3</p>

2、E~F （E下所有满足条件的兄弟元素节点）

二、属性选择器

1、E[att~=“val”]

2、E[att | =“val”] （以val为开头或以val- 为开头的元素）

<style>
     div[class|='a']{
         background-color:red; //1、2变色
     }
</style>
<body>
    <div class="a">1</div>
    <div class="a-test">2</div>
    <div class="b-test">3</div>

3、E[att^=“val”]

4、E[att$=“val”]

5、E[att*=“val”]

三、伪元素选择器

1、E::placeholder （注意兼容性）

<style>
     input{
         border:1px solid black;
     }
     input::placeholder{
         color:orangered; //改变一下“请输入用户名”字体颜色
     }
</style>
<body>
    <input type="text" placeholder="请输入用户名">
</body>

2、E::selection

四、伪类选择器（被选择元素的一种状态）

1、E:not (s) :root （跟标签选择器，包含html） E:target

<style>
     div:not(.test){
         background-color:red;
     }
</style>
<body>
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="test">3</div>
</body>

     //或写成
     div:not([class="demo"]){
         background-color:red;
     }

not应用实例：

<style>
     *{
         margin:0;
         padding:0;
     }
     ul{
         width:300px;
         border:1px solid #999;
     }                                                        
     li{
         height:50px;
         margin:0 5px;
     }
     li:not(:last-of-type){
         border-bottom:1px solid black;
     }
</style>
<body>
    <ul>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </ul>
</body>  
//效果如下

<style>
     div:target{
        border:1px solid black;
     }
     /* location.hash = xxx   （被标记成锚点之后） */
</style>
<body>
    <a href="#box1">div1</a>
    <a href="#box2">div2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>

小练习：

2、E:first-child E:last-child E:only-child E:nth-child (n) E:nth-last-child (n) （这些元素都考虑其他子元素的影响）

<style>
     P:first-child{
         background-color:red;
     }
</style>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>

<style>
     P:first-child{
         background-color:red;//第一个p元素不会变红，因为第一个子元素是span
     }
</style>
<body>
    <div>
        <span>5</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

<style>
    p:nth-child(2n+1){
        background-color:red;//1、3、5变色 （css从1开始查）
    }
</style>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>

3、E:first-of-type E:last-of-type E:only-of-type

4、E:nth-of-type(n) E:nth-of-last-type(n)

5、E:empty E:checked E:enabled E:disabled

6、E:read-only E:read-write

猜你喜欢