css笔记完整版（二）之定义样式表（css选择器）（共四部，加起来就是css完整笔记）

最新推荐文章于 2022-05-01 02:09:29 发布

原创最新推荐文章于 2022-05-01 02:09:29 发布 · 783 阅读

13 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

5 篇文章

订阅专栏

零、码仙励志

不要杞人忧天，烦恼并不会减少明天的负担，却会失去今天的快乐

一、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>

本篇博客来自于麦子学院视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901