前端css规范之选择器_前端att怎么用-优快云博客

本文链接：https://blog.youkuaiyun.com/ro_mashi/article/details/124905349

1.后代选择器(中间用空格隔开)

<style>
#wrap .content p{
  width:200px;
  height:200px;
  background-color:yellow;
  color:red;
}
</style>

<div id='wrap'>
<div class='content'>
 <p>我是最小的那一个</p>
</div>
</div>

2.子代选择器 >

定义:该元素的子级元素(只能选到儿子)

    <style>
        #wrap>div{
            width:200px;
            height:200px;
            background-color: bisque;
            border:1px solid #ccc;
        }
        
    </style>

3.相邻选择器 +

定义:紧挨着的后一个元素(如果紧挨着的后一个元素不是相邻选择器后面的元素,就不会选中)


    <style>
        #wrap {
            width: 500px;
            height: 500px;
            padding: 10px;
            background-color: pink;
        }

        #wrap p+p {
            /*#wrap元素的后代p元素的相邻元素p*/
            color: blue;
        }
    </style>


<body>

    <div id="wrap">
           <p>hello</p>
           <span>商鞅变法</span>
           <p><span>张仪</span></p>
           <p>60115-昙花一现的执着：<span>朝歌</span></p>
          </div>
</body>

4.兄弟元素选择器 ~

定义:该元素的后面同级元素(如果同级元素不是兄弟选择器后面的元素,就不会选中)


      <style>
        #wrap {
            width: 500px;
            height: 500px;
            padding: 10px;
            background-color: pink;
        }

        #wrap p~p {
            /**#wrap元素的后代p元素的兄弟元素p**/
            color: red;
        }
    </style>

 

<body>
      <div id="wrap">
           <p>hello</p>
           <span>商鞅变法</span>
           <p><span>张仪</span></p>
           <p>60115-昙花一现的执着：<span>朝歌</span></p>
          </div>
     </body>

5.群组选择器

定义:每一个选择器之间用逗号隔开,是互不相关的

.wrap2,.wrap3{
display:inline-block;
width:100px;
height:100px;
background-color:blue;
}

6.属性选择器

[att] 匹配所有具有att属性的元素
[att=val] 匹配所有att属性等于“val”的元素
[att~=val] 匹配所有att属性包含“val”或者等于“val”的元素
(val必须是一个完整词)
[att|=val] 匹配所有att属性以val-' 开头的(可以有多个值)（比如说zh-cn）
[att1][att2=val] 匹配所有拥有att1属性同时具有att2等于'val'的元素

<style>
/* 选择页面src属性并且值以images开头的元素*/
[src^='i']{
width: 200px;
height: 200px;
border:3px solid red;
}
  /* 选择页面src属性并且值以ng结尾的元素*/
[src$='ng']{
border:5px solid blue;
}
/* 选择页面src属性并且值包含xx的元素*/
[src*='es']{
border:10px solid #000;
}
</style>
<body>
  <img src="images/1.png" alt="">
<img src="img/2.png" alt="">
<img src="images/3.png" alt="">
</body>