CSS 选择符的用法和实例

2020-05-11 18:24:31易采站长站整理

  实例:
  .test{color:#F00;}
  .test2{font-size:14px;}
  <div id="test">这里是测试内容</div>
  <div id="test test2">这里是测试内容</div>

分组选择符(Grouping Selectors)

  语法:E1,E2,E3

  说明:将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符,属于CSS1选择符。

  实例:
  .test,p{color:#F00;}
  <div id="test">这里是测试内容</div>
  <p>这里是测试内容</p>

通配选择符(Universal Selectors)

  语法:*

  说明:选定DOM中的所有对象。目前所有主流浏览器均支持该选择符,属于CSS2选择符。

  实例:
  *{color:#F00;}
  <div>这里是测试内容</div>
  <p>这里是测试内容</p>

子选择符(Child Selectors)

  语法:E1 > E2

  说明:选择所有作为E1子对象的E2,不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。

  实例:
  .test > strong{color:#F00;}
  <div class="test">
   <strong>测试的内容</strong>
   <p>这是<strong>测试的内容</strong>哦!</p>
   <strong>测试的内容</strong>
  </div>

相邻选择符(Adjacent Selectors)

  语法:E1 + E2

  说明:选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。

  实例:
  p + p{color:#F00;}
  <p>测试的内容1</p>
  <p>测试的内容2</p>
  <div>测试的内容3</div>
  <p>测试的内容4</p>
  <p>测试的内容5</p>
  <div><p>测试的内容6</p></div>

属性选择符(Attribute Selectors)

  语法:(属性选择符具体再分为4种不同的表现方式)
  1.E1[attr]  2.E1[attr=value]  3.E1[attr~=value]  4.E1[attr|=value]

  说明:
  1. 选择具有attr属性的E1
  2. 选择具有attr属性且属性值等于value的E1
  3. 选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。
  4. 选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1
  非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。