css3选择器

css3选择器

一、属性选择器

1.E[att^=vale]属性选择器：

p[id^='title']{ 
  color: pink;
  font-size:30px;
  }

对应的HTML代码，只要id属性是以title开头的都会被选中。

<div>
  <p id="title">选中的文字</p>
  <p id='title1'>这部分文字也会被选中</p>
  <p id='menu'>没被选中的文字</p>
  </div>

2.E[att$=vale]属性选择器：

 p[id$='title']{
  color: pink;
  font-size:30px;
  }

对应的HTML代码，只要id属性是以title结尾的都会被选中

<div>
  <p id="one">没被选中的文字</p>
   <p id='two'>没被选中的文字</p>
   <p id="one_title">选中的文字</p>
   <p id='two_title'>这部分文字也会被选中</p>
  </div>

3.E[att*=vale]属性选择器：

p[id*='title']{ 
  color: pink;
  font-size:30px;
  }

对应的HTML代码，只要id属性有title的都会被选中

<div>
   <p id="title">选中的文字</p>
   <p id="title_one">这部分文字也会被选中</p>
   <p id='title_two'>这部分文字也会被选中</p>
   <p id="one_title">这部分文字也会被选中</p>
   <p id='two_title'>这部分文字也会被选中</p>
   <p id='one'>没被选中的文字</p>
   <p id='two'>没被选中的文字</p>
  </div>