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元素来使用该样式时,请使用类选择器.

  • 相关阅读:
    https协议介绍
    最详尽的fidder抓取https请求
    最详尽的datagrip使用
    datagrip安装与破解
    二叉树
    使用nexus搭建maven私库
    markdown利器-小书匠
    java开发-flyway
    .NetCore 入门
    .Net Core 实体生成器
  • 原文地址:https://www.cnblogs.com/renpingsheng/p/7277523.html
Copyright © 2011-2022 走看看