Css3 选择器

一、选择器

  

  选择器是CSS3中一个重要的部分通过使用CSS的选择器,可以提高开发人员的开发效率。

1、属性选择器

  在CSS3中,可以使用HTML元素的属性名称选择性的定义CSS样式。其主要目的是为带有指定属性的HTML元素设置CSS样式。例如通过指定div的id属性,设定相关属性。

  在CSS3中属性选择器一共分为以下4中匹配模式选择器:

  1. 完全匹配属性选择器
  2. 包含匹配选择器
  3. 首字符匹配选择器
  4. 尾字符匹配选择器

1.1.1、完全匹配属性选择器

  其含义就是完全匹配字符串。当div 元素的id 属性值为wpf_css3时,利用完全匹配选择器选择任何id 值为wpf_css3 的元素都使用该样式。如下代码通过指定id 值将属性设定为红色字体:
  
  <style type="text/css">
  [id=wpf_css3]{
  color:red;
  }
  </style>

<div id="wpf_css3">完全匹配属性选择器</div>

1.1.2、包含匹配选择器

  包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串,元素就使用该样式。其语法是:[attribute*=value]。其中attribute 指的是属性名,value 指的是属性值,包含匹配采用“*=”符号。

  例如以下三个div元素都符合匹配选择器的选择。

  <div id="wpf_css1">完全匹配属性选择器,id是wpf_css1</div>
  <div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
  <div id="wpf">完全匹配属性选择器,id是wpf</div>
  <style type="text/css">
  [id*=wpf]{
  color:red;
  }
  </style>

这三个div中的id属性中只要有字符串wpf则就满足匹配选择器。完了之后执行代码,你会发现三个div中字符显示的都是红色。

1.1.3、首字符匹配选择器和尾字符匹配选择器

  首字符匹配就是匹配属性值开头字符,只要开头字符符合匹配,则元素使用该样式。而尾字符匹配选择器只要结尾字符串符合匹配,则元素使用该样式。

     首字符匹配选择器语法:[attribute^=value]。其中attribute 指的是属性名,value 指的是属性值,首字符匹配使用“^=”符号。

  尾字符匹配选择器语法:[attribute$=value]。其中attribute 指的是属性名,value 指的是属性值,尾字符匹配使用“$=”符号。

    例子:

  (1)、首字符匹配选择器

     <div id="wpf_css">完全匹配属性选择器,id是wpf_css</div>
  <div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
  <div id="wpf">完全匹配属性选择器,id是wpf</div>
  <style type="text/css">
  [id^=wpf]{
  color:red;
  }
  </style>

  执行代码你会发现只有id为wpf_css和id为wpf的div元素中的内容显示为红色。

  (2)、尾字符匹配选择器

  <div id="wpf_css">完全匹配属性选择器,id是wpf_css1</div>
  <div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
  <div id="wpf">完全匹配属性选择器,id是wpf</div>
  <style type="text/css">
  [id$=css]{
  color:red;
  }
  </style>

执行代码你会发现,只有id以css结尾的div元素的内容才被显示为红色。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。