css选择器分类及优先级判断

这篇具有很好参考价值的文章主要介绍了css选择器分类及优先级判断。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

选择器分类

全局选择器

元素选择器

类选择器

ID选择器

合并选择器

内联选择器 

选择器的优先级


css语法规则由两个主要部分构成:选择器,以及一条或多条样式声明。

选择器分类

全局选择器:*

元素选择器:标签名称

类选择器:class属性名(.)

ID选择器:id属性名(#)

内联选择器:style

全局选择器

全局选择器可以与任何元素匹配,优先级最低,一般做样式初始化。

全局选择器应用通配符*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
   <p>Hello World</p>
</body>
</html>

元素选择器

HTML文档中的元素,如p,div,img,body等。

标签选择器,选择的是页面上所有这种类型的标签,经常描述共性,无法描述某一个元素的个性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p{
       color:green;
    }
    </style>
</head>
<body>
   <p>Hello</p>
   <p>World</p>
   <h3>Hello World</h3>
</body>
</html>

css选择器分类及优先级判断

 如果想要一句话中出现多种样式的字体情况,可用<span>标签将特定字段标注,然后给<span>标签添加一个标签选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p{
       color:green;
    }
    span{
        color:aqua;
    }
    </style>
</head>
<body>
   <p>Hello <span>World</span> 123</p> 
</body>
</html>

css选择器分类及优先级判断

注意: 

 所有的标签都可以是选择器,如ul,li,dt,dl,div等。

元素标签选择器选择的是所有而不是一个。

类选择器

类选择器用.来定义,针对想要的所有标签使用,类选择器使用率较高,应用灵活。

类选择器名称一般由字母数字和-组成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p{
       color:green;
    }
    .class-one{
       color:lightpink
    }
    .class-two{
        color: yellow;
    }
    </style>
</head>
<body>
   <p>苹果</p>
   <p class="class-one">草莓</p>
   <p class="class-two">香蕉</p>
</body>
</html>

css选择器分类及优先级判断

class属性的特点:

类选择器可以被多种标签使用。

类名不能以数字开头。

同一个标签可以使用多个类选择器,用空格隔开。

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p{
       color:green;
    }
    .class-one{
       color:lightpink
    }
    .class-two{
        color: yellow;
    }
    .size-one{
        font-size: 30px;
    }
    </style>
</head>
<body>
   <p>苹果</p>
   <p class="class-one size-one">草莓</p>
   <h3 class="class-two">香蕉</h3>
</body>
</html>

正确格式 

<p class="class-one size-one">草莓</p>

错误格式

<p class="class-one" class="size-one">草莓</p>

 css选择器分类及优先级判断

ID选择器

ID选择器针对某一个特定的标签来使用,只能使用一次,以#来定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #text1{
        color: red;
     }

    #text2{
        color: blue;
     }

    .class1{
        color: green;
        font-size: 30px;
    }
    </style>
</head>
<body>
    <p id="text1">Hello World1</p>
    <p id="text2">Hello World2</p>

    <p class="class1">123</p>
    <p class="class1">456</p>
</body>
</html>

注意:

ID是唯一的。

ID不能以数字开头。

合并选择器

合并选择器用来提取共同样式,减少重复代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p,h3{
        color: aqua;
        font-size:medium;
    }
    </style>
</head>
<body>
    <p>123</p>
    <h3>456</h3>
</body>
</html>

css选择器分类及优先级判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .title,.content{
        color:aquamarine;
        font-size:medium;
    }
    </style>
</head>
<body>
    <h3 class="title">标题</h3>
    <p class="content">正文</p>
</body>
</html>

 css选择器分类及优先级判断

内联选择器 

内联样式也称行内样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <p style="font-size: 36px;color: red;">Hello World</p>
</body>
</html>

选择器的优先级

在css中,权重用数字来衡量。

元素选择器的权重为1。

类选择器的权重为10。

ID选择器的权重为100。

内联选择器的权重为1000。

优先级从高到低:内联样式1000>ID选择器100>类选择器10>元素选择器1

优先级相同的选择器,样式由执行顺序来决定,后面代码样式会将前面代码样式覆盖,一般最终样式显示则为后面代码的样式。文章来源地址https://www.toymoban.com/news/detail-405932.html

到了这里,关于css选择器分类及优先级判断的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css中选择器的优先级

    CSS 的优先级是由选择器的 特指度(Specificity) 和 重要性(Importance) 决定的,以下是优先级规则: 特指度 : ID 选择器 (#id) : 每个ID选择器计为100。 类选择器 (.class)、属性选择器 ([attr]) 和伪类选择器 (:hover, :focus 等) : 每个此类选择器计为10。 元素选择器 (p, div, span 等)  和伪

    2024年02月22日
    浏览(49)
  • CSS选择器和优先级权重

    标签选择器、伪元素选择器:1 类选择器、属性选择器、伪类选择器:10 id 选择器:100 内联样式:1000 选择器 格式 优先级权重 id选择器 #id 100 类选择器 .class 10 属性选择器 a[ref=“eee”] 10 伪类选择器 div:last-child 10 标签选择器 div 1 伪元素选择器 div:after 1 相邻兄弟选择器 h1+p

    2024年02月10日
    浏览(72)
  • CSS快速入门-选择器和优先级

    CSS是一种用于样式化网页的语言,全称为“层叠样式表”(Cascading Style Sheets)。 它可以控制网页中元素的外观和布局,例如颜色、字体、大小、边距、对齐等,让网页变得更加美观和易于阅读。 使用CSS可以将样式与网页内容分离开来,从而使网页结构更加清晰,减少HTML代码

    2023年04月22日
    浏览(52)
  • CSS三种样式表、样式表优先级、CSS选择器

    CSS,全称是:Cascading Style Sheets,层叠样式表,用于修饰HTML页面的。 CSS编写规则如下所示: CSS编写的规则分为两部分,分别是:选择器、声明块。 声明块,需要使用【{}】大括号包裹,括号里面使用【key: value;】的格式定义属性。 选择器,表示需要对哪个HTML标签添加CSS样式

    2024年02月09日
    浏览(42)
  • 前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

    内核 描述 Trident(IE内核) 主要用在window系统中的IE浏览器中,由微软研发并投入使用 Gecko(Firefox内核) 主要用于Firefox浏览器中,特点是代码完全公开,开发程度高 Webkit(Safari内核) 苹果产品中的safari浏览器使用的就是webkit内核,其特点是不受ie,firefox等内核的约束,比较安全。

    2024年01月25日
    浏览(67)
  • CSS 样式优先级

    CSS 样式优先级决定了最终呈现在浏览器中的样式是哪一组样式,在多组样式中有冲突时,最终呈现在浏览器中的样式是具有最高优先级的样式。 CSS 样式优先级顺序如下: 内联样式 内部样式 外部样式 !important 内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择

    2024年02月07日
    浏览(37)
  • CSS_三大特性下_优先级

    CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) 1特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式 2优先级公式: 继承通配符选择器标签选择器类选择器id选择器行内样式!important 3注意点:

    2024年02月08日
    浏览(56)
  • CSS 的 折叠性、继承性、优先级

    折叠性是指当多个CSS属性应用到同一个元素上时,它们如何相互作用以确定最终的样式。当不同的规则决定同一个属性的值时,折叠性规定了哪个规则的值会被应用。 折叠性的规则如下: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 样式不冲突,

    2024年02月15日
    浏览(62)
  • CSS 中的优先级规则是怎样的?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(33)
  • CSS3-三大特性-继承性、层叠性、优先级

        CSS三大特性         1 继承性         2 层叠性         3 优先级         1 继承性             特性:子元素有默认继承父元素样式的特点(子承父业)             可以继承的常见属性:                 1 color                 2 font-style、font-weight、font-size、fo

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包