css选择器


CSS选择器


1.标签选择器(如:body,div,p,ul,li)
2.类选择器(如:class=“head”,class=“head_logo”)
3.ID选择器(如:id=“name”,id=“name_txt”)
4.全局选择器(如:*号)
5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
6.继承选择器(如:div p,注意两选择器用空格键分开)
7.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
             /* 全局选择器 */
           *{
            margin: 0 auto;
            padding: 0;
           }
           /* 标签选择器 */
          span{
              font-size: 20px;
              color: brown;
          }
          /* 伪类选择器:link、visited、active、hover */
          span:hover{
              color: chocolate;
          }
          .one{ 
              font-size: 30px;
              background-color: rgb(31, 144, 209);
              text-align: center;
          }
          #two{
              font-size: 20px;
              background-color: rgb(98, 39, 133);
              text-align: center;
          }
          #three{
            font-size: 5px;
            color: rgb(82, 184, 51);
          }
    </style>
</head>
<body>
    <!-- 标签选择器 -->
    <span>我爱我的祖国</span>
    <!-- 类选择器 -->
    <p class="one">wsadfsafasf</p>
    <!-- ID选择器 --> -->
    <hr id="three"> 
    <input type="submit" value="提交" id="two" >
</body>
</html>

你可能感兴趣的:(前端)