CSS练习 —— css选择器

CSS选择器就是 通过选择器来 定位 你要控制的样式的部分,分为以下几种

  1.HTML选择符(标签选择器)

    就是把HTML标签作为选择符使用

    如 p {.......} 网页中所有的P标签采用此样式

         h2 {........} 网页中所有h2标签采用此样式

  2.class类选择器 (使用 . 将自定义名{类名} 来定义的选择器 )

    使用语法:  <html 标签 class=“类名”></html标签>

    .类名{

       color=xxx;

                       font-size=xxx;

                       }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器练习</title>
    
    <style type="text/css">

        .name1{
            font-size: 15px;
            color: red;
        }

        .name2{
            font-size: 20px;
            color: blue;

        }
    </style>


</head>
<body>

  <h1>
   这是标题一

  <p class="name1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 class="name2">
      美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
  </h2>

</body>
</html>

  3.ID选择器

    定义: #id 名 { 样式 }

    使用:<html 标签 id="id名" >....</htmL标签>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器练习</title>
    
    <style type="text/css">

        #p1{
            font-size: 40px;
            color: #999;
        }

        #p2{
            font-size: 20px;
            color: blue;

        }
    </style>


</head>
<body>

  <h1>
   这是标题一

  <p id="p1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 id="p2">
      美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
  </h2>

</body>
</html>

特点:ID是唯一的,如果id不唯一的话,也不会报错

   4.通配符选择器

             语法:

    *{ key : value ; key : value }

    功能:对所有HTML标签起作用(一般用于页面的初始化工作,统一字体,边框,内外边距)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器练习</title>
    
    <style type="text/css">

        *{
            color: red;
        }

        #p1{
            font-size: 40px;
        }

        #p2{
            font-size: 20px;
        }


    </style>


</head>
<body>

  <h1>
   这是标题一

  <p id="p1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 id="p2">
      美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻
  </h2>

</body>
</html>

特点:通配符选择器一般写到样式的最前面

5.关联选择器(只控制标签中的一部分)

等等等等,还有很多的标签选择器 ~ ~ ~

原文地址:https://www.cnblogs.com/zhangqianxi/p/13940860.html