css3属性选择器,css中“~”(波浪号)、“,”(逗号)、“+”(加号)和(大于号)详解

css中“>”是:

  css3特有的选择器,A .B 表示选择A元素的所有子B元素。

  与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。

.a,.b{逗号指相同的css样式};.a .b{空格指后代元素};.a>.b{大于号指子代元素}

css中“+”是:

A+B{}这个+是选择相邻兄弟,称作“相邻兄弟选择器”

A+B表示HTML中紧随A的B元素(必须紧跟A后面,A前面无效):用一个结合符只能选择两个相邻兄弟中的第二个元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

 

 .plus {
    font-size: 20px;

    + div {
      background-color: red;
    }
  }

 

  

   <div className='indexContainer'>
        <div>
          9
        </div>
        <div className='plus'>
          1234567
        </div>
        <div>
          1
        </div>
        <div>
          2
        </div>
        <div id='23'>
          3
        </div>
      </div>

 

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”

 

 

css中“~”是:

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:

.indexContainer {
  div[id="23"] {
    background: gray !important;
  }
  .plus {
    font-size: 20px;

    ~ div {
      background-color: red;
    }
  }
}
   <div className='indexContainer'>
        <div>
          9
        </div>
        <div className='plus'>
          1234567
        </div>
        <div>
          1
        </div>
        <div>
          2
        </div>
        <div id='23'>
          3
        </div>
      </div>

 

 

 

定义和用法

  p~ul选择器 p之后出现的所有ul。

  两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。

 

另外 我们附上属性选择器的作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css属性选择器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
p{
height: 30px;
border: 1px solid #000;
}
p[miao|=e]{background: pink};
/*自定义属性 <p miao="bbb xc">b</p> 、input[type=submit]*/
/* E[attr]只使用属性名,但没有任何属性值(自定义属性)
p[miao]{background: red};
E[attr="value"]指定属性名,并指定了该属性的属性值
p[miao=bbb]{background: red};推荐
E[attr~="value"]指定属性名,E和attr相同(标签和属性一样的元素、无论包含与否上下级关系)、
并且元素属性值包含value的,~一定要加 例:input:checked ~.content 下面的div class="content"里的所有内容
p[miao~=old]{background: red}; 推荐
E[attr^="value"]指定了属性名,并且有属性值,属性值以value开头的(第一个开头字母)
p[miao^=a]{background: pink};
E[attr$="value"]指定属性名,并且有属性值,以value结束的(值的最后一个字母)
p[miao$=h]{background: pink};
E[attr*="value"]指定属性名,并且有属性值,而且属性值包含了value
p[miao*=c]{background: pink};下面值中只要包含了c字母的都是粉色 推荐
E[attr|="value"]指定了属性名,并且属性值是value或者以"value-"开头的值
p[miao|=e]{background: pink};指定的是值为 e带-的所有
input:checked+span {/*等于checked~span E~F表示E毗邻下、
后面的所有F元素 加号表示input下面一个兄弟节点
background: red;}
*/

</style>
</head>
<body>
<p miao="aaa old">a</p>
<p miao="bbbc">b</p>
<p miao="ccc">c</p>
<p miao="d-ddh">d</p>
<p miao="e-xm">e</p>
<label>
<input type="radio" name="tab"/>
<span></span>
</label>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「心动止于人海。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a772116804/article/details/79914755

posted on 2022-08-12 11:48  漫思  阅读(2398)  评论(0编辑  收藏  举报

导航