css选择器 - 掘金

css选择器

2021-11-06 305 阅读1分钟

属性选择器

匹配拥有type和name属性的input标签

css：
 input[type][name]{
              background-color: blue;
            }
            
html:         
  <input type="text" name="" id="">

~选择器

匹配h1同级元素后边的所有p标签

css：
 h1~p {
     background-color:Red; 
  }
  
 html：  
    <h1>11111111111111</h1>
    <p>22222222222222</p>
    <p>33333333333333</p>
    <div>
      <p>44444444444</p>
    </div>
    <p>555</p>

.交集选择器

标签上必须同时同时拥有这两个类才会选中
css：
 .one.two{
      color: blue;
    }

 html：
  <div class="one two">嗷嗷</div>

+相邻选择器

选择后边紧挨着的同级的p元素
css：
  h1+p {
          background-color:Red; 
   }
   
html：   
<div>
  <p>3333</p>
  <h1>11111111111111</h1>
  <p>22222222222222</p>
  <p>33333333333333</p>
  <div>
    <p>44444444444</p>
  </div>
</div>

根据属性值选择

1. p[lang="en"]{color: red;}  只能选择lang属性值为en
   <p lang="en">Hello!</p>
   <p lang="en-us">Greetings!</p>

2. p[lang|="en"]{color: red;}  选择有属性lang且lang的属性值是以en或者en-开头的元素
   <p lang="en-au">G'day!</p>

3. p[lang~=en]{color: red;} 选择lang属性值为en，而且lang属性值也可以其他值
    <p lang="en">Hello!</p>
    <p lang="en us">Greetings!</p>