zoukankan      html  css  js  c++  java
  • css四种基本选择器

    css选择器是什么?

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

    HTML页面中的元素就是通过CSS选择器进行控制的。

    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。

    CSS的选择器分为两大类:基本选择题和扩展选择器。

    基本选择器:
    1.标签选择器:针对一类标签
    2.ID选择器:针对某一个特定的标签使用
    3.类选择器:针对你想要的所有标签使用
    4.通用选择器(通配符):针对所有的标签都适用(不建议使用)

    1.标签选择器:一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)

    如下所示:

    style type="text/css">
    p{
    font-size:40px;
    }</style>
    <body>
    <p>标签选择器</p>
    </body>

    2.id选择器:根据元素ID来选择元素,具有唯一性。前面以”#”号来标志。

    <head>
    <title>Document</title>
    <style type="text/css">
    #good
    {
    border:3px dashed green;
    }
    </style>
    </head>
    <body>
    <h2 id="good">id选择器</h2>
    </body>

    3.类别选择器:类选择器根据类名来选择。和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次。

    如下所示:

    <style type="text/css">
    .xl{
    color: green;
    }
    .xd{
    font-size: 40px;
    }
    </style>


    <p class="xl xd">段落</p>
    <p class="xl">段落</p>
    <p class="xd">段落</p>

    4.通配符*:匹配所有标签不建议使用。

    <style type="text/css">
    /*定义通用选择器*,希望所有标签的颜色是绿色字符大小40磅*/{
    color: green;
    font-size: 40px;
    }
    </style>

  • 相关阅读:
    EC600S连接阿里云
    纪念首次使用vscode+platformio完成点灯全过程
    使用EC600S-CN实现短信收发功能
    基于stm32,通过更换数据存储扇区提升w25q128flash芯片使用寿命
    0.96寸OLED模块-简述如何修改OLED_ShowChar()函数达到修改显示字体大小的目的
    stm32定时器初始化后自动进入一次中断问题
    个人PSP升级作业
    第一个微信小项目
    自己设计大学排名-数据库实践
    自己的第一个网页
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11300451.html
Copyright © 2011-2022 走看看