精华内容
下载资源
问答
  • 选择器优先级&伪选择器&文本标签及样式&有序列表无序列表 (背景、边框、定位)相关的样式不会被继承 选择器优先级 当使用不同的选择器,选中同一个元素时并且设置相同的样式时 这时样式...

    样式继承&选择器的优先级&伪类的选择器&文本标签及样式&有序列表和无序列表

    1. (背景、边框、定位)相关的样式不会被继承

    选择器的优先级

    1. 当使用不同的选择器,选中同一个元素时并且设置相同的样式时

      这时样式之际嗯产生了冲突,最终到底采用哪种选择器由(权重)决定

    2. 优先级的规则

      1. 内联样式,优先级 1000
      2. id选择器,优先级100
      3. 类和伪类,优先级10
      4. 元素选择器,优先级1
      5. 通配*,优先级0
      6. 继承的样式,没有优先级
    3. 注意:

      • 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式
      • 并集选择器的优先级是单独计算的。例如:(div、p、#p1、.hello{})
      • 可以在样式的最后,添加一个 !important ,此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用。

    伪类的选择器

    1. :link(正常)
    2. :visited (未读)
    3. : hover(鼠标移入)
    4. : active(正在点击)
    5. 注意:这四个选择器的优先级是一样的,一般书写顺序按照:link > visited 〉hover > actice

    文本标签及样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 
            em和strong
            这两个标签都表示一个强调的内容
            em主要表示语气上的强调,em在浏览器中默认使用斜体显示
            strong表示内容的强调,比em更强烈,默认使用粗体显示
        -->
        <p>
            今天天气<em>真不错</em></p>
        <p>
            <strong>
                注意:敌军还有5秒到达战场!
            </strong>
        </p>
        <!--  
            i 标签,表示单纯的斜体
            b 标签,表示单纯的加粗
        -->
        <p>
            <i>我是i标签,以斜体显示</i>
            <b>我是b标签,以加粗显示</b>
        </p>
        <!-- 
            small:标签中的内容会比他的父元素中的文字要小一些
            
        -->
        <p>
            我是p标签中的<small>我是small标签</small>
        </p>
        <!-- 
            cite标签:一般用来加书名号
        -->
        <p>
            <cite>《论语》、《孙子》</cite>
        </p>
        <!--  
            q  标签表示一个引号(行内引用)
            blockquote 标签表示一个长引用(块及引用)
        -->
        <p>
            子曰:<q>徐二世袭制</q>
        </p>
        <p>
            子曰:
            <blockquote>
                有朋自远方来!
            </blockquote>
        </p>
        <!-- 
            使用 sup 标签设置一个上标
        -->
        <p>
            神仙姐姐<sup><a href="#">[1]</a></sup>
        </p>
        <!-- 
            使用 sub 标签用来表示一个下标
        -->
        <p>大表哥<sub>2</sub></p>
        <!--  
            使用 del 表示一个删除的内容
            del标签中的内容,会自动添加删除线
        -->
        <p>
            <del>200¥</del><br/>
            20¥<br/>
        </p>
        <!--  
            ins 表示一个插入的内容
            ins中的内容,会自动添加下划线
        -->
        <p>
            神仙姐姐笑起来<ins>真好看</ins></p>
        <!--  
            pre 是一个预格式标签,网页中显示代码并保留格式,不会忽略空格
            code 专门用来表示代码,但是不会保留格式
            一般使用时结合 pre、code 一起使用
        -->
        <pre>
            <code>
                public static void main(String[] args){
                    System.out.println("hello world!");
                }
            </code>
        </pre>
    </body>
    </html>
    

    有序列表和无序列表

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 
            去掉默认的项目符号
            */
            ul{
                list-style:none;
            }
        </style>
    </head>
    <body>
        <!--  
            1.无序列表
            2.有序列表
            3.定义列表
        -->
        <!--  
            无序列表
            使用ul标签来创建无序列表
            使用li在ul中创建一个一个的列表项,
            一个li就是一个列表项
    
            注意:默认的项目符号我们一般不使用!!
                如果需要设置项目符号,则可以采用为li设置背景图片的方式设置
    
            ul 和 li 都是块元素
        -->
        <ul>
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
        </ul>
    
        <!--  
            有序列表和无序列表基本一致,只不过是使用 ol 来代替 ul
            有序列表使用有序的序号作为项目符号
            type属性,可以指定序号的类型
            可选值:1. 默认,使用阿拉伯数字
    
            ol 也是块元素
        -->
        <ol>
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
        </ol>
    
        <!--  
            列表中都是可以相互嵌套的,可以在无序列表中使用有序列表
            有序列表中也可以放一个无序列表
        -->
        <p>菜谱</p>
        <ul>
            <li>
                番茄炒茄子
                <ol>
                    <li>茄子</li>
                    <li>番茄</li>
                </ol>
            </li>
            <li>
                番茄鸡蛋
                <ul>
                    <li>番茄</li>
                    <li>鸡蛋</li>
                </ul>
            </li>
        </ul>
        <!--  
            定义列表 用来对一些词汇或内容进行定义
            使用 dl 来创建一个定义列表
            dl 中有两个子标签
                dt:被定义的内容
                dd:对定义内容的描述
            同样 dl 和 ul 和 ol 之间都可以互相嵌套
        -->
        <dl>
            <dt>神仙姐姐</dt>
            <dd>扮演小龙女,魅力值99分</dd>
            <dd>是杨过的姑姑</dd>
        </dl>
    </body>
    </html>
    
    展开全文
  • CSS选择器优先级 jquery选择器优先级

    千次阅读 2016-09-24 22:00:41
    css选择器主要分为三类:标签名选择器、类选择器、ID选择器。当然后续还扩展了一些后代选择器和群组选择器。  一、 下面对着5中选择器进行举例:  1. 标签名选择器 div { color:Red;} 即页面中的各个标签名的css...
    css选择器主要分为三类:标签名选择器、类选择器、ID选择器。当然后续还扩展了一些后代选择器和群组选择器。
     一、 下面对着5中选择器进行举例:
            1. 标签名选择器     div { color:Red;}         即页面中的各个标签名的css样式
            2.类选择器          .divClass {color:Red;}       即定义的每个标签的class 中的css样式
            3.ID选择器         #myDiv  {color:Red;}        即页面中的标签的id
            4.后代选择器(类选择器的后代选择器)  .divClass  span { color:Red;}   即多个选择器以逗号的格式分隔 命名找到准确的标签
            5.群组选择器   div,span,img {color:Red}    即具有相同样式的标签分组显示
    二、 选择器的优先级
            1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
            2.次优先级是(ID选择器 ,假设级别为100)   #myDiv{color:Red;}
            3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
            4.最后优先级是 (标签选择器,假设级别是 1)  div{color:Red;}
            5.那么后代选择器的优先级就可以计算了啊
            比如 .divClass  span { color:Red;}   优先级别就是:10+1=11
            总结:对于在什么情况下使用什么样的选择器,原则有三点:一选择可以准确的找到要控制的标签;二使用最合理的优先级的选择器;三还要是html和css看起来简洁美观可读性强。
    通常: 1.最常用的选择器是类选择器
           2.li  td dd 等经常大量连续出现并且样式相同或相似的情况下,一般选用类选择器和标签选择器结合的后代选择器 例:.XX li/td/dd {}
             3.极少的情况下会用ID选择器。
    三、 jquery选择器优先级
     jquery 是没有优先级的,jquery是按照你的条件遍历一次DOM tree,所以写条件的时候最好尽量缩小范围和用ID,避免要遍历全部DOM,这样效率是最快的
    比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最后一个效率是最低的,因为jquery会遍历整个TREE。

    展开全文
  • CSS选择器的优先级(从上至下...标签选择器(div,h1,p) 相邻选择器(h1+p) 子选择器(ul>li) 后代选择器(lia) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child) ...

    一、固定的优先级:

    CSS选择器的优先级(从上至下,依次递减,权重值相同另考虑):

    选择器 权重
    !important  Infinity,“无穷大”(无法被超越)
    行内样式(style=“”) 1000
    id选择器(#id) 100
    类选择器(.className) 10
    属性选择器(a[rel="external"]) 10
    伪类选择器(a:hover,li:nth-child) 10
    标签选择器(div,h1,p) 1
    伪元素选择器 1
    子选择器、相邻选择器 0
    通配符选择器(*) 0

    注意:如果选择器的权重相同,优先级以代码出现的先后顺序,后出现的选择器样式为最终样式。通过js控制的样式也是最终样式。

     

    二、变化的优先级:

    相邻选择器(h1+p)
    子选择器(ul>li)
    后代选择器(li a)

    判断优先级,以权重为指标,权重越大优先级越高:

    一般约定 id选择器的权重为100,类选择器权重为10,标签选择器权重为1。

    一个复杂的选择器的权重等于所有选择器的权重之和。

    在后代选择器中其权重值达到了100+1=101超过了id选择器,所以可以排到id选择器之前。

    推荐文章:

    https://www.cnblogs.com/momomiji/p/7522292.html

    展开全文
  • CSS选择器 优先级

    2019-12-18 11:07:30
    一、css选择器和优先级 css选择器可以为拥有指定属性的 HTML 元素设置样式,主要包含标签选择器器、类选择器、id选择器以及群组选择器等等。 1、css选择器的分类 1.1 标签选择器 标签选择器:用标签名称即可 会选择...

    一、css选择器和优先级

    css选择器可以为拥有指定属性的 HTML 元素设置样式,主要包含标签选择器器、类选择器、id选择器以及群组选择器等等。
    1、css选择器的分类
    1.1 标签选择器
    标签选择器:用标签名称即可 会选择上当前文档中所有的当前标签
    P{
    color:red;
    }
    1.2 类选择器

    类选择器:选中的是class属性值的元素 可以多选
    .ground_p{
    color:red;
    }
    1.3 id选择器
    id选择性: 选中的是ID属性值的元素 ID的值在当前文档中只能出现一次
    #only_p{
    color:red;
    }
    群组选择器(逗号)
    群组选择器: 不同的选择器用逗号隔开 当需要将多个元素设置为统一样式的时候可以使用群组选择器
    p,div{
    color:red;
    }

    2、css选择器的优先级

    css选择器的优先级从高到底排列是id选择器>类选择器>标签选择器
    后代选择器 兄弟相邻选择器 ( 加号波浪线) 大于号(子集)
    星号(全部)

    展开全文
  • 选择器优先级

    2019-11-11 22:18:21
    选择器优先级 CSS优先级:是由四个级别各级别的出现次数决定的。 四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。 优先级的算法:  每个规则对应一个初始"四位数":0、0、0、0  若是 行内选择...
  • CSS选择器优先级

    2016-06-25 22:00:52
    CSS样式选择器分为4个等级,a、b、c、d,可以根据这四种等级为依据确定CSS选择器的优先级...5、属性选择器、伪类选择器和Class类选择器优先级一样 6、!important权重最高,比inline style的还要高 举例:
  • CSS选择器和优先级

    2020-04-30 08:49:37
    2、类选择器:通过标签的class属性值选中指定标签,多个标签可以有相同的class值 格式:.d1{ } 3、id选择器:通过id找到标签,一个html文件中id不能重复 格式: #id{} 4、派生选择器(后代选择器):类似于路径,找到...
  • 选择器: 1、标签选择器:每个HTML标签名即为一个选择器 2、类选择器:标签中的class属性指定 ,定义样式要加点。 js引用时用className 3、ID选择器:标签的id属性,尽量...标签选择器<类选择器选择器属性 <meta h
  • ** CSS三大特性—— 继承、 优先级和层叠。 ** 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠...2.类选择器(如:class=“head”,class=“head_logo”) 3....
  • important放在属性值和分好之间,使优先级最大,复合选择器无论有多少个标签选择器权重也不会大于类选择器,复合选择器无论有多少个标签选择器和类选择器权重也不会大于id选择器 1、属性选择器 根据标签
  • CSS三大特性—— 继承、 优先级和层叠。继承:即子类元素继承父类的样式;...标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:...
  • css选择器优先级

    2016-02-22 21:40:28
    在css中的选择器主要分为三种:标签名选择器、类选择器和ID选择器。而从这三种选择器又可以延伸出群组选择器和后代选择器。 1.标签名选择器:如 p { } 其实就直接是html标签。通常我们以优先级1来表示优先级...
  • 3. 标签选择器(div,h1,p) 4. 相邻选择器(h1+p) 5. 子选择器(ul < li) 6. 后代选择器(li a) 7. 通配符选择器(*) 8. 属性选择器(a[rel="external"]) 9. 伪类选择器(a:hover,li:nth-child)上面....
  • 3.标签选择器 4.相邻选择器(h1+p) 5.子元素选择器(h1>p) 6.后代选择器(.class ol li a) 7.通配选择器(*) 8.属性选择器(a[rel = ’external’],例如:为带有title属性的所有元素设置样式) 9.伪类选择器...
  • 如何计算:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则...
  • 今天学习了CSS选择器的优先级和关于ps的一些界面快捷键一些用法,然后通过对100度享乐网的布局使我们对布局的意识更加清晰。 关于CSS选择器的优先级:作用的元素相同,样式相同就会出现优先级问题。...*类选择器
  •  通配符*的权重为0,0,0,0  标签选择器、伪元素选择器的权重为0,0,0,1  类选择器、属性选择器、伪类选择器的权重为0,0,1,0  id选择器的权重为0,1,0,0  行内样式的权重为1,0,0,0  !impo...
  • css选择器优先级详解

    2020-05-15 18:16:31
    css选择器优先级详解 1.简单的记忆来说:css的选择器的优先级为: 内联 > id >...3.C 的值等于 类选择器 属性选择器 伪类 出现的总次数; 4.D 的值等于 标签选择器 伪元素 出现的总次数
  • CSS中选择器优先级

    2016-10-25 23:48:15
    在我的观点里,CSS中选择器可分为三类:标签选择器、类选择器和ID选择器,其他诸如后代选择器、组群选择器、伪类选择器等都是前者的延伸。 其中选择器的优先级大致可分为:!important >> id选择器 >> 伪类选择器 >> ...
  • 【CSS】选择器优先级

    2020-09-16 14:51:07
    1、选择器(优先级) 选择器种类: 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。 而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。...3.标签选择器(div,h1,p

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 623
精华内容 249
关键字:

标签选择器和类选择器优先级