CSS选择器

CSS基本语法

  • 选择器 + 声明块

    • 选择器 - 通过CSS选择器选中页面中的指定元素,下面会重点写。
    • 声明块 - 选择器后面跟着的是声明块,使用{}括起来,由一个个声明组成,声明由名值对组成,每一个声明使用;结尾。

      常用选择器

1.元素选择器

语法:标签名{}
eg:p{} //为所有的p元素设置样式。

2.ID选择器

语法:#id{} //id值唯一,不能重复
ed: #box{} //为id为box的元素设置样式。

3.类选择器

语法:.class{}
eg: .box{} //为所有的class值为box的元素设置样式。

4.分组选择器(也叫并集选择器)

语法:选择器1,选择器2,选择器N{}
eg: #box1,.box2,p{} //为为id为box1,class为box2和p的元素共同设置样式。

5.交集选择器

语法:选择器1选择器2选择器3{}
eg:p.box1{} //为class值为box1的p元素设置样式,注意id为唯一值,一般id选择器不会存在于交集选择器中(没必要)。

6.后代选择器

语法:选择器1 选择器2{}
eg:p .box{} //选中指定祖先元素p的指定后代.box。

7.子元素选择器

语法:父元素>子元素{}
eg:p>.box{} //选中制定父元素p的制定子元素。box。注意与后代元素选择器的区别

8.伪类选择器

  • 伪类可以用来表示一些特殊的状态:
    :link - 未访问过的超链接。
    :visited - 已访问过的超链接。
    :hover - 鼠标移入的元素。
    :active - 正在点击的元素。
    由于选择器优先级的问题,给超链接a设置伪类时,需要注意他们的顺序,一般的顺序是:
    love hate 记作(爱与恨),方便记忆
    :link>:visited>:hover>:active

选择器的优先级

为同一个元素设置多个样式时,此时哪个样式生效由选择器的优先级确定:

  • 选择器的优先级(权重):
· 内联样式 id选择器 类和伪类选择器 元素选择器 统配选择器 继承的样式
优先级 1000 100 10 1 0
  • 当一个选择器中含有多个选择器时,需要将所有的选择器的优先级进行相加,然后再进行比较,优先级高的优先显示,选择器的计算不会超过其最大的数量级(10个id选择器的优先级不能达到1000)
    分组选择器(并集选择器)的优先级单独计算,不会相加。
  • 样式后面加!important,该样式获取最高优先级,内联样式不能加!important属性。
  • 样式相同的谁在下面执行谁(样式的覆盖)。

CSS选择器,选择器的优先级的更多相关文章

  1. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  2. CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

    选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...

  3. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  4. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

  5. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  6. CSS 从入门到放弃系列:CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  7. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  8. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  9. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  10. 【CSS】选择器优先级

    CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...

随机推荐

  1. 开启mac上印象笔记的代码块

    Mac 印象笔记左上角菜单栏:偏好设置-->软件更新-->开启代码块 (Preferences -> Software Update -> Enable code block) ...

  2. [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [五] 如何做全站采集?

    [DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 五.如何做全站采集 如何做全站采集? 很多同学加群都在问, 如何使用Dotne ...

  3. C# 8中的Async Streams

    关键要点 异步编程技术提供了一种提高程序响应能力的方法. Async/Await模式在C# 5中首次亮相,但只能返回单个标量值. C# 8添加了异步流(Async Streams),允许异步方法返回多 ...

  4. dpkg:错误:正在解析文件 '/var/lib/dpkg/updates/0014' 第 0 行附近:在字段名 #padding 中有换行符问题的解决方法

    解决方案如下: sudo rm /var/lib/dpkg/updates/* sudo apt-get update python@ubuntu:~/Desktop/_Welcome_.jpg.ex ...

  5. kvm虚拟化管理平台WebVirtMgr部署-完整记录(1)

    公司机房有一台2U的服务器(64G内存,32核),由于近期新增业务比较多,测试机也要新增,服务器资源十分有限.所以打算在这台2U服务器上部署kvm虚拟化,虚出多台VM出来,以应对新的测试需求.当KVM ...

  6. 访谈:BugPhobia’s Brief Communication

    0x01 :采访的学长简介 If you weeped for the missing sunset, you would miss all the shining stars 梁野,北京航空航天大学 ...

  7. 软件工程项目之摄影App

    摄影app 开发人员:Ives & Dyh 开发功能: 摄影师注册与认证,为年轻摄影师提供成长的空间,发挥一技之长的平台. 用户注册与验证,为有摄影需求的人提供选择摄影师进行个性化拍摄的平台. ...

  8. 『编程题全队』Scrum 冲刺博客

    1.介绍小组新加入的成员,Ta担任的角色 Answer: 我们小组的倪兢飞同学决定跳槽到团队あ,我们小组开了一个简短而又严肃的会议,满足倪兢飞同学的意愿,并感谢他为团队做出的巨大贡献.虽然我们遗失了一 ...

  9. MyBatis 集合操作语法范例:配合SQL的in关键字

    Java语法: private String[] tagIds; MyBatis语法 <delete id="deleteByIds" parameterType=" ...

  10. Java的JDK下StringBuffer与StringBuilder的区别

    下载JDK的源码,咱自己分析下: 用Beyond Compare打开看一下吧 1.他俩的历史问题: StringBuffer:* Copyright (c) 2003, 2008, Oracle an ...