css笔记(二)之定义样式表(css选择器)

目录

一、HTML标记定义

二、class定义

三、id定义

四、优先级问题

五、组合选择器(同时控制多个元素)

六、伪元素选择器


一、HTML标记定义

<head>
  <meta charset="utf-8">
  <style type="text/css">
  p{
    color:red;
    font-size:30px;
    }
  </style>
</head>

<body>
  <p>HTML标记定义</p>
</body>

二、class定义

<head>
  <meta charset="utf-8">
  <style type="text/css">
  .pp{
    color:red;
    font-size:30px;
    }
  </style>
</head>

<body>
  <p class="pp">class定义</p>
</body>

三、id定义

<head>
  <meta charset="utf-8">
  <style type="text/css">
  #pp{
    color:red;
    font-size:30px;
    }
  </style>
</head>

<body>
  <p id="pp">id定义</p>
</body>

四、优先级问题

<head>
  <meta charset="utf-8">
  <style type="text/css">
  #pp{
    color:red;
    }
  #pp{
    color:green;
    }
  </style>
</head>

<body>
  <p id="pp">优先级问题</p>
</body>

五、组合选择器(同时控制多个元素)

<head>
  <meta charset="utf-8">
  <style type="text/css">
  h1,h2,p{
    color:red;
    }
  </style>
</head>

<body>
  <h1>组合选择器</h1>
  <h2>组合选择器</h2>
  <p>组合选择器</p>
</body>

六、伪元素选择器

<head>
  <meta charset="utf-8">
  <style type="text/css">
    a:link{ color:red; }
    a:hover{ color:blue; }
    a:active{ color:yellow; }
    a:visited{ color:green; }
  </style>
</head>

<body>
  <a href="http://www.baidu.com">百度</a>
</body>

猜你喜欢

转载自blog.csdn.net/tswc_byy/article/details/81590690
今日推荐