CSS选择器有哪些?选择器的优先级如何排序?
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选择器有哪些?选择器的优先级如何排序?的更多相关文章
- CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)
选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...
- css笔记09:选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- css中常用的选择器和选择器优先级
css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器. 选择器的优先级由四个部分组成:0,0,0,0 一个选择器的具体优先级如下规则确定: ID选择器 加 0,1 ...
- CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题
css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- [读书笔记] CSS权威指南1: 选择器
通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ bo ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
随机推荐
- 代码审计之CVE-2017-6920 Drupal远程代码执行漏洞学习
1.背景介绍: CVE-2017-6920是Drupal Core的YAML解析器处理不当所导致的一个远程代码执行漏洞,影响8.x的Drupal Core. Drupal介绍:Drupal 是一个由 ...
- 「 从0到1学习微服务SpringCloud 」12 Zuul的综合使用
上次讲了Zuul的基本使用,这篇讲的是综合使用,比如过滤器,限流,鉴权等应用 这里继续使用api-getway这个项目 过滤器 实现token验证(前置过滤器) 1.新建一个类,继承ZuulFilte ...
- openpyxl库实现对excel文档进行编辑(追加写入)
首先,这个库只支持xlsx格式的excel文件 预期,对”excel_test.xlsx“的A1单元格写入”hello word“ 1.安装”openpyxl“库,pip install openpy ...
- itext5和itext7操作pdf平铺和图层叠加(tiling, and N-upping)
区别 itext5 生成pdf版本:1.4(Acrobat5.x) itext7 生成pdf版本:1.7(Acrobat8.x) iText7生成的pdf文件大, itext7 Java库更加系统和完 ...
- [CCPC2019 ONLINE]E huntian oy
题意 http://acm.hdu.edu.cn/showproblem.php?pid=6706 思考 打表出奇迹. 注意到这个式子有一大堆强条件限制,最后化为: $$\frac{1}{2}\sum ...
- CF572_Div2_D2
题意 http://codeforces.com/contest/1189/problem/D2 思考 显然地,如果出现度数为2且两条出边边权不相同的情况,是无法构造合法方案的. 下面考虑缩边后的树, ...
- openlayer3 坐标系转换
'EPSG:4326'-经纬度坐标-WGS84'EPSG:3857'- xy坐标-web墨卡托 ol3默认的坐标系为3857,即在创建ol.map的时候,若不指定projection,则默认为EPSG ...
- python笔记11
今日内容 函数小高级 lambda 表达式 内置函数 内容回顾 函数基本结构 参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pass ...
- Java 加密/解密Excel
概述 设置excel文件保护时,通常可选择对整个工作簿进行加密保护,打开文件时需要输入密码:或者对指定工作表进行加密,即设置表格内容只读,无法对工作表进行编辑.另外,也可以对工作表特定区域设置保护,即 ...
- OpenStack之虚拟机热迁移
这里的环境是centos7版本,openstack K版 1.在各个计算节点设置权限 chmod /var/lib/nova/instances 2.修改各个节点的nova.conf(/etc/nov ...