• 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.关联选择器(只控制标签中的一部分)

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

  • 相关阅读:
    nodejs中exports与module.exports的区别
    Webpack--自学笔记
    cookie、sessionStorage、localStorage 详解
    JavaScript中URL的解码和编码
    javascript中怎么判断对象{}为空
    关于获取、设置css样式封装的函数入门版
    多行文本溢出显示省略号(…)
    前端优化的问题
    volatile
    MySQL(六) decimal数据默认处理
  • 原文地址:https://www.cnblogs.com/zhangqianxi/p/13940860.html
Copyright © 2020-2023  润新知