zoukankan      html  css  js  c++  java
  • css的选择器

           优先级等级

    行内样式 > ID选择器 > 类选择器 > 标签选择器

       标签选择器         优先级为1

          类选择器           优先级为10

          ID选择器           优先级为100

          行内样式            优先级为1000

    基本选择器包含:

    1.标签选择器
    标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*属性选择器必须放在style内*/
            p{
                /*对下面body中的所有的p标签的属性进行操作*/
                font-size: 170px;
                color: aqua;
            }
        </style>
    </head>
    <body>
    <p> 这是一个段落</p>
    </body>

    ID选择器:

    #选中ID

    同一页面中的ID不能重复

    任何标签都可设置id

     ID选择器

    语法格式:

         CSS , #id名称 { 属性名N:属性值; }

    HTML, <标签名 id=”id名称”>内容</标签名>

    描   述: 选择含有指定ID名称标签,添加属性

    注   意:

    1、 属性值id名称首字母不能是数字(注:可以为中文,但是强烈不推荐,区分大小写)

    2、 ID名称在一页页面中,只能出现一次

    id命名规范,要以字母 可以又数字 下划线 大小写样额区分,aa和AA是两个不一样的属性值

       <style>
            #in{
                /*对你下面的id对应的值来进行设置*/
                color: aqua;
                font-size: 55px;
            }
            #ino{
                /*对ino对应的id进行设置*/
                color: red;
                font-size: 33px;
            }
            #info{
                /*对info对应的id进行设置*/
                color: yellow;
                font-size: 99px;
            }
        </style>
    </head>
    <body>
    <p id="in"> 这是一个段落</p>
    <u id="ino">说的是什么</u><br/>
    <i id="info">我可以设置的</i>
    </body>

    id的设置也是必须在head中的style标签中的内容 ,也是必须要用#来进行开头设置的

    id选择器是有一些不足的 你可以id都一样你想要好几个设置一样的  就不能很多的一起进行设置 因为id的值不能一样的

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style rel="stylesheet" type="text/css">
            #p{
                color: blue;
            }
            #b{
                size: A5;
            }
    
            #u,#i{  /* 多个id的设置可以放在一起用逗号隔开*/
                color: aqua;
                font-size: 300px;
            }
        </style>
    </head>
    <body>
    
    
    <p id="p">This is a 段落</p>
    <b id="b">这是一个加粗标签</b>
    <u id="u"> 这是一个u</u>
    <i id="i">这是一个斜体</i>
    
    
    
    </body>

    类选择器:

    所谓的类就是class ,class 与id非常的相识的 任何的属性都可以加类 但是类是可以重复的  属于归类的概念

    同一个标签中可以携带多个类  用空格隔开

    类的使用,能够决定前端工程师CSS的水平

    一定要有公共类的概念

    Class/类选择器

    语法格式:

         CSS , .class名称 { 属性名N:属性值; }

    HTML, <标签名 class=”class名称”>内容</标签名>

    描   述: 选择含有指定class名称标签,添加属性

    注   意:

    1、 属性值class名称首字母不能是数字(注:可以为中文,但是强烈不推荐,区分大小写)

    2、 Class在页面可以出现多次,并且class名称可以写多个(注:多个名称之间用空格隔开)

    可以设置一样的一起改变:

    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .American{
                font-size: 66px;
            }
        </style>
    </head>
    <body>
    <p class="American">特朗普</p><br/>
    <u class=" American">奥巴马</u><br/>
    <i class="American">小布什</i><br/>
    
    </body>

    也可以根据不同的class对应的名字来设置不同的操作,也可以根据class的值的进行的不同的设置

    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .American{
                font-size: 66px;
            }
            .merchant{
                color: yellow;
            }
            .politician{
                color: aqua;
            }
            .executioner{
                color: bisque;
            }
            .man{
                font-family: 宋体;
            }
            .woman{
                font-family: 楷体;
            }
        </style>
    </head>
    <body>
    <p class="American  merchant man">特朗普</p><br/>
    <u class=" American politician man">奥巴马</u><br/>
    <i class="American executioner  woman">小布什</i><br/>
    
    </body>
    相同的class的设置

    通配选择器选择器

    语法格式: * { 属性名N:属性值; }

    描    述: 选择页面所有标签添加属性

    可以对你页面的所有的选择器都进行设置 把body中内容进行设置 可以把页面的所有的内容都进行修改

    <head>
        <meta charset="UTF-8">
        <title>通配选择器</title>
        <style>
            *{
                /*运用统配选择器把所有的都进行换颜色操作*/
                color: red;
            }
        </style>
    </head>
    <body>
    <p class="American">特朗普</p>
    <del class="American">老布什</del>
    <i class="American">爸爸我</i>
    <u id="rr">还是我</u>
    <pre>
        呃呃呃
    </pre>
    
    </body>

    Summary

    • 不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式

    • 每个类要尽可能的小,有公共的概念,能够让更多的标签使用

    到底使用id还是用class?

    答案:尽可能的用class。除非一些特殊情况可以用id
    
    原因:id一般是用在js的。也就是说 js是通过id来获取到标签
  • 相关阅读:
    pig中将两列合并为一列:concat
    最小二乘法拟合二元多次曲线
    动态重新加载Class机制之代码测试
    從 Windows Form ComboBox、ListBox 或 CheckedListBox 控制項加入或移除項目
    C#控件一览表
    C#中combobox 和TreeView控件属性、事件、方法收集
    PHP 分页类 潇湘博客
    一个房屋中介业务建模的实例分析
    使用Limit参数优化MySQL查询 潇湘博客
    word中的字号与实际的字体大小一一对应的关系
  • 原文地址:https://www.cnblogs.com/zhaoyunlong/p/9074283.html
Copyright © 2011-2022 走看看