CSS选择器分类:

  CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器。

用法如下:

选择器   e.g. 说明
id选择器 #id #header 选择id="header"的所有元素
类选择器 .class .message

选择class="message"的所有元素

标签选择器 el div 选择所有的div元素

 

 

其中他们又可以以不同的方式进行组合,如下:

选择器   e.g. 说明
后代选择器 el el div p 选择div元素内部的所有p元素
子代选择器 el>el div>p 选择div元素的第一子代的所有p元素
相邻兄弟选择器 el+el .msg+p 选择与class为"msg"的元素同级且紧跟其后的第一个p元素
通用兄弟选择器 el~el .msg~p 选择class为"msg"的元素后面的所有p元素
群组选择器 el,el p, span, .blue,#box 选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
伪类选择器

:link

:visited

:hover

:active

:focus

a:hover 选择鼠标指针位于a标签之上的链接
伪元素选择器

:before

:after

p:before 在每个p元素内容之前插入内容
属性选择器 [attribute]      [target] 选择带有target属性的所有元素
通用选择器 * * 选择所有的元素

优先级:!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

权   重:   !important:10000

     内联: 1000

     id选择器:100

     类、伪类、属性选择器:10

     标签、伪元素选择器:1

     通用选择器(*)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)权重值为0

CSS选择器有哪些?选择器的优先级如何排序?的更多相关文章

  1. CSS魔法堂:选择器及其优先级

    一.前言    首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...

  2. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

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

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

  4. css笔记09:选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. css中常用的选择器和选择器优先级

    css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器. 选择器的优先级由四个部分组成:0,0,0,0 一个选择器的具体优先级如下规则确定: ID选择器 加 0,1 ...

  6. CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题

    css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...

  7. 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  8. [读书笔记] CSS权威指南1: 选择器

    通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ bo ...

  9. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

随机推荐

  1. 【5min+】传说中的孪生兄弟? Memory and Span

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  2. importlib 根据字符串导入模块

    应用: Django中间件,rest framework 组件的全局配置文件 import importlib path = "abc.def.foo" module_path,c ...

  3. MySQL日志及索引

    MySQL物理结构: MySQL它是通过文件系统对数据进行储存和管理,从物理结构上分为日志文件和数据文件 日志文件: 日志文件记录了数据库操作的信息和一些错误信息,我们常用的日志文件有:错误日志.二进 ...

  4. 指定HTML标签属性 |Specifying HTML Attributes| 在视图中生成输出URL |高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼

    结果呢: <a class="myCSSClass" href="/" id="myAnchorID">This is an o ...

  5. jvm内存模型、常见参数及调优

    JVM内存结构: 主要分为:方法区.堆.虚拟机栈.本地方法栈.程序计数器,其中方法区和堆是线程共享的,其他的都是线程隔离的. 方法区: 主要存放类的信息.静态变量.常量.编译后的方法代码,永久代Per ...

  6. Lobooi 结对作业(24235+24229)

    结队作业 GitHub项目地址 https://github.com/Lobooi/PairProgramming.git 伙伴博客地址 https://www.cnblogs.com/lanti/p ...

  7. Linux环境下的network IO

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  8. linux容器技术和Docker

    linux容器技术和Docker 概述 Docker在一定程度上是LXC的增强版,早期的Docker使用LXC作为容器引擎,所以也可以说Docker是LXC的二次封装发行版,目前docker使用的容器 ...

  9. mysql--->profile使用

    Mysql分析-profile详解 简介 Profiling是从 mysql5.0.3版本以后才开放的. 启动profile之后,所有查询包括错误的语句都会记录在内. 此工具可用来查询SQL执行状态, ...

  10. Docker三剑客之swarm

    简介 swarm是一种docker集群管理工具,跟三剑客前两者不同的是:compose是一种统一编排的工具,machine是一种远程控制工具,swarm则是将多个docker主机映射成一个docker ...