没心没肺づ惜

V1

2022/08/22阅读:21主题:默认主题

CSS的选择器

CSS的选择器

1.通配符

<head>
  <style>
      * {
            /* 通配符,作用于全部标签 */
        }
  
</style>
</head>
<body>
  <div>被选中<p>被选中<span>被选中</span></p></div>
  <span>被选中</span> 
  <p>被选中<span>被选中</span></p>
</body>

2.标签选择器

<head>
  <style>
      div {
          /* 标签选择器,作用于标签为div的标签 */
      }
  
</style>
</head>
<body>
  <div>被选中</div> 
  <p></p>
</body>

3.id选择器

<head>
  <style>
      #red {
          /* id选择器,作用于id名为red的标签 */
      }
  
</style>
</head>
<body>
  <div id="red">被选中</div>
  <div></div> 
  <p></p>
</body>

4.class选择器

<head>
  <style>
      .red {
          /* class选择器,作用于class名为red的标签 */
      }
  
</style>
</head>
<body>
  <div id="red"></div>
  <div class="red">被选中</div> 
  <div></div> 
  <p></p>
</body>

5.复合选择器

5-1 .div .red复合选择器,作用于div标签下样式名为red的标签

<head>
  <style>
      div .red {
          /* 复合选择器,作用于div标签下样式名为red的标签 */
      }
  
</style>
</head>
<body>
  <div>
      <span class="red">被选中</span>
      <div class="red">被选中</div> 
  </div> 
  <p>
      <span class="red"></span>
      <div class="red"></div> 
  </p>
  <div>
      <p>
          <span class="red">被选中</span>
          <div class="red">被选中</div> 
      </p> 
  </div>
</body>

5-2 div.red复合选择器,作用于div标签并且样式名为red的标签

<head>
  <style>
      div.red {
          /* 复合选择器,作用于div标签下样式名为red的标签 */
      }
  
</style>
</head>
<body>
  <span class="red"></span>
  <div class="red">被选中</div> 
</body>

5-3 div, .red复合选择器,作用于div标签以及样式名为red的标签

<head>
  <style>
      div.red {
          /* 复合选择器,作用于div标签以及样式名为red的标签 */
      }
  
</style>
</head>
<body>
  <div>被选中</div>
  <p></p>
  <div class="red">被选中</div> 
</body>

5-4 div > .red子选择器,作用于div标签下的子元素样式名为red的标签(孙元素样式名为red的标签不会被选中)

<head>
  <style>
      div > .red {
          /* 子选择器,作用于div标签下的子元素样式名为red的标签
(孙元素样式名为red的标签不会被选中) */

      }
  
</style>
</head>
<body>
  <div>
      <div class="red">被选中</div> 
      <p class="red">被选中
          <div class="red"></div> 
          <div class="red"></div> 
      </p> 
  </div>  
</body>

5-5 div + .red相邻兄弟选择器,作用于div标签后的样式名为red的标签(不可间隔)

<head>
  <style>
      div + .red {
          /* 相邻兄弟选择器,作用于div标签后的样式名为red的标签(不可间隔) */
      }
  
</style>
</head>
<body>
  <div></div>
  <div class="red">被选中</div> 
  <p></p>
  <div class="red"></div> 


  <div></div>
  <div class="red">被选中</div> 
  <div class="red">被选中</div> 
</body>

5-5 div ~ .red相邻兄弟选择器,作用于div标签后的样式名为red的所有标签(可间隔)

<head>
  <style>
      div ~ .red {
          /* 相邻兄弟选择器,作用于div标签后的样式名为red的所有标签(可间隔) */
      }
  
</style>
</head>
<body>
  <div></div>
  <div class="red">被选中</div> 
  <p></p> 
  <div class="red">被选中</div>   
</body>

6. 属性选择器

6-1 a[target]选择所有带有target属性的a标签

<head>
  <style>
      a[target] {
          /* 选择所有带有target属性的a标签 */
      }
  
</style>
</head>
<body>
  <a href="#"></a>
  <a href="#" target="_blank">被选中</a>
  <a href="#" target="_top">被选中</a>  
</body>

6-2 a[target=_blank]选择所有使用target="_blank"的a标签

<head>
  <style>
      a[target=_blank] {
          /* 选择所有带有target属性的a标签 */
      }
  
</style>
</head>
<body>
  <a href="#"></a>
  <a href="#" target="_blank">被选中</a>
  <a href="#" target="_top"></a>   
</body>

6-3 img[title~=flower]选择标题属性包含单词"flower"的所有的img标签

<head>
  <style>
      img[title~=flower] {
          /* 选择标题属性包含单词"flower"的所有的img标签 */
      }
  
</style>
</head>
<body>
  <img src="当前图片标签被选中" title="klematis flower" width="150" height="113" />
  <img src="" title="flowers" width="224" height="162" />
  <a href="#" title="flower" width="160" height="120"></a>   
</body>

6-4 [lang|=en]选择 lang 属性等于 en,或者以 en- 为开头的所有的标签

<head>
  <style>
      [lang|=en] {
          /* 选择 lang 属性等于 en,或者以 en- 为开头的所有的标签 */
      }
  
</style>
</head>
<body>
  <p lang="en">被选中</p>
  <p lang="en-us">被选中</p>
  <p lang="en-gb">被选中</p>
  <p lang="us"></p>
  <p lang="no"></p>
</body>

6-5 div[class^="test"]选择每一个class属性的值以"test"开头的div标签

<head>
  <style>
      div[class^="test"] {
          /* 选择每一个class属性的值以"test"开头的div标签 */
      }
  
</style>
</head>
<body>
  <div class="first_test"></div>
  <div class="second"></div>
  <div class="test">被选中</div>
  <p class="test"></p>
</body>

6-6 div[class$="test"]选择每一个class属性的值以"test"结尾的div标签

<head>
  <style>
      div[class$="test"] {
          /* 选择每一个class属性的值以"test"结尾的div标签 */
      }
  
</style>
</head>
<body>
  <div class="first_test">被选中</div>
  <div class="second"></div>
  <div class="test">被选中</div>
  <p class="test"></p>
</body>

6-7 div[class*="test"]选择每一个class属性的值包含子字符串"test"的div标签

<head>
  <style>
      div[class*="test"] {
          /* 选择每一个class属性的值包含子字符串"test"的div标签 */
      }
  
</style>
</head>
<body>
  <div class="first_test">被选中</div>
  <div class="second"></div>
  <div class="test">被选中</div>
  <p class="test"></p>
</body>

分类:

前端

标签:

CSS

作者介绍

没心没肺づ惜
V1