CSS概念及语法_选择器

CSS概念及语法_选择器_02

CSS概念及语法_css_03

CSS概念及语法_html_04

CSS概念及语法_选择器_05

实例：

<!DOCTYPE HTML>
<html>
  <head>
    <title>html选择器</title>
    <style type="text/css">
      p{color:red;font-weight:bold}
    </style>
  </head>
  <body>
    <p >这是一个段落.</p>
    
  </body>
</html>


<!DOCTYPE HTML>
<html>
  <head>
    <title>id选择器</title>
    <style type="text/css">
      #test{color:red;font-weight:bold}
    </style>
  </head>
  <body>
    <p id="test">这是一个段落.</p>
    
  </body>
</html>


<!DOCTYPE HTML>
<html>
  <head>
    <title>类选择器</title>
    <style type="text/css">
      .test{color:red;font-weight:bold}
    </style>
  </head>
  <body>
    <p class="test">这是一个段落.</p>
    
  </body>
</html>


<!DOCTYPE HTML>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
      [align="center"]{color:blue}
      [name~="t1"]{color:red}
      [name|="t"]{color:green}
    </style>
  </head>
  <body>
    <p align="center" >这是一个段落.</p>
    <p align="center" name="t t1">这是一个段落.</p>
    <p align="center" name="t-t1">这是一个段落.</p>
  </body>
</html>


效果可以自行测试获得。