zoukankan      html  css  js  c++  java
  • CSS中的选择器之类选择器和id选择器

    1.css中的选择器:

    1.类选择器,又叫class选择器
    2.id选择器
    3.html元素选择器(又叫标签选择器)
    4.通配符选择器
    5.伪类选择器
    6.组合选择器(多元素选择器,子元素选择器,后代选择器)
    简单来说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用
    选择器的名称命名规范:
    一般使用中划线形式:xxx-yyy,一般是小写字母

    2.类选择器

    基本语法:

    .类选择器名称{
    CSS属性:属性值;
    CSS属性:属性值;
    }
    

    一般来说,类选择器是提供给多个html元素来使用的.

    实例代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span-news{
                font-weight:bold;
                background-color:pink;
                color:black;
            }
        </style>
    </head>
    <body>
    <span class="span-news">新闻一</span>
    <span class="span-news">新闻二</span>
    <span class="span-news">新闻三</span>
    <span class="span-news">新闻四</span>
    <span class="span-news">新闻五</span>
    </body>
    </html>
    

    刷新浏览器后显示效果如下:

    3.id选择器

    基本语法:

    #id选择器名称{
    CSS属性:属性值;
    CSS属性:属性值;
    }
    

    在类选择器代码的基础上增加一行字体,并设置其自己的样式.
    实例代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .span-news{
                font-weight:bold;
                background-color:pink;
                color:black;
            }
            #span-news-tb{
                font-weight:bold;
                font-size:25px;
                background-color:silver;
            }
        </style>
    </head>
    <body>
    <span class="span-news">新闻一</span>
    <span class="span-news">新闻二</span>
    <span class="span-news">新闻三</span>
    <span class="span-news">新闻四</span>
    <span class="span-news">新闻五</span>
    <hr>
    <span id="span-news-tb">这是一个比较重要的新闻</span>
    </body>
    </html>
    

    刷新浏览器后显示的效果:

    关于id选择器的一些说明 :
    1.一般来说,id选择器是提供给某一个html元素来使用
    2.当不确定时,有多个html元素来使用该样式时,请使用类选择器.

  • 相关阅读:
    转载一篇文章 python程序员经常犯的10个错误
    外部表与partition
    grpc 入门(二)-- 服务接口类型
    用例图简介(转)
    UML类图(Class Diagram)中类与类之间的关系及表示方式(转)
    快速搭建fabric-v1.1.0的chaincode开发环境
    ubuntu networking 与 network-manager
    [转]bashrc与profile区别
    超矩链--基于矩阵的分布式账本
    adb 在windows7中的使用
  • 原文地址:https://www.cnblogs.com/renpingsheng/p/7277523.html
Copyright © 2011-2022 走看看