CSS学习笔记3:选择器及优先级

CSS选择器的类型:
  1. 标签选择器
  2. 类选择器
  3. ID选择器
  4. 全局选择器
  5. 群组选择器
  6. 后代选择器

1.标签选择器:
以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了css样式
用法很简单,直接在style中 标签{}即可声明
<style>p,h1,a{font-size:50px;}
</style>

2.类选择器:
标签选择器无法实现某一类标签里的标签css样式特殊化化
通过个标签命名类分类,例如<p class="pclass"> </p>来将一个p便签命名为pclass,再在style中以 .(点)pclass(类名)来声明
.pclass{color:red;}
可以给同一类的不同标签设置不同的样式,只需要在.classname前加入标签名,例如p.classname{}
一个标签可以引用多个类选择器创建的样式,用空格隔开,例如
<p class=“one two three”></p>

3.ID选择器:
用法与类选择器类似,在开始标签中添加标签的id,例
<p id=“one”>ID选择器</P>
在style中用#id声明,例
<style>#one{color:red;}
</style>
ps:一个标签只能有一个id

4.群组选择器:
既一个声明有多个选择器,他们以逗号隔开,例
.red,#one,p{font-size:30px;}

5.全局选择器:
顾名思义全局选择器就是一个声明选择所有的标签,用*表示所有的标签,又叫通配符选择器
*{color:yellow;}

 


 
6.后代选择器:
父子节点以空格隔开
div p b{font-size:100px;}     /* div标签里的p标签里的b标签*/

 


选择器的优先级与叠加:
①  在冲突的情况下(同一种选择器)
用同一种css属性,例如都是color修饰,采取就近原则,取最下面那个。
h1{color:red;}
h1{color:purple;}
例如上面这个,最后h1标签是字体是紫色。 
用不同一种css属性,会将效果叠加在一起
h1{color:red;}
h1{font-size:50px;}      
h1{color:red;font-size:50px} 
这两个效果是一样的
②在非冲突的情况下(不同选择器)
用同一个css属性修饰同一个标签采取一定的优先级
内部样式中 id选择器 > 类选择器

ps:当声明了多个相同属性的class(相同类型)时,一个标签选择多个class,最后的结果为最后声明的class(与开始标签中的class的顺序无关)
.classred{color:red;} 
.classblue{color:blue;}
先有如上两个内部class
<p class=“classred classblue”>test</p>
<p class=“classblue classred”>test</p>
这两个效果是一样的,都test都显示为蓝色,因为.classblue{color:blue;}是最后声明的     

当涉及到后代选择器,有多个css选择同一个类标签时,优先级的考虑复杂了些许,标签使用哪个css可以通过计算权值来决定优先
在同一个样式表中(同一个style或css文件):
1.权值相同:就近原则
2.权值不同:选取权值最高的使用
选择器的权值:
  • 标签选择器:1
  • 类选择器和伪类:10
  • ID选择器:100
  • 通配符选择器:0
  • 行内样式:1000
权值计算的规则:不同种选择器数量x权值之和
例如:
#one div.color h2{…}
ID:1x100
标签:2 x1
类:10
总权值:100 2 10=112
重要性:
涉及到优先级有一个特殊的语句,!important,在css中写入后这个最优先。注意!important要写在;分号前
p{color:blue !important;}
#one{color:red;}<p>important</p>

 

因为标签选择器使用了!important,所以这里显示蓝色
p{color:blue !important;}
#one{color:red !important;}<p>important</p>

 

这时候就显示红色。当大家都有!important时,就按照老方法,无视!important就好了
CSS优先级总结
  • !important声明最高
  • CSS使用方法的优先级
行内样式 > 内部样式 > 外部样式
PS:link链入外部样式和style内部样式的优先级,取决于先后顺序
  • 样式表中优先级
id选择器 > class选择器 > 标签选择器 > 通配符*
权值相同
权值不同
就近原则使用权值高的

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eclipse开发,编译,打包常见问题总结------持续更新

在使用Eclipse开发&#xff0c;编译&#xff0c;打包常见问题如下&#xff1a; 1、 保证本地开发的客户端与服务端使用的jdk版本一致 2、 保证本地开发的客户端与服务端使用的依赖jar包版本一致&#xff08;比如本地thrift 客户端使用的libthrift版本和服务端使用的libthrift…

ECMA-335 (CLI) 标准 读书笔记——总结CLI类型系统(上)

看到类型系统的概述时&#xff0c;就忍不住按图索骥&#xff0c;想搞清楚CLI如何定义的整个类型系统。于是翻遍了整个标准&#xff0c;将类型系统中最核心的、与运行平台密切相关的类型定义与说明整理了出来&#xff0c;以供理清思路。 标准的第四部指出&#xff0c;CLI的核心是…

流口水可执行模型

可执行模型是对引擎处理的Drools最低级别模型的重新设计。 在当前的系列&#xff08;最多6.x&#xff09;中&#xff0c;可执行模型在过去的8年中有机地增长了&#xff0c;从未真正成为最终用户的目标。 建议那些希望以编程方式编写规则的人通过代码生成和目标drl来完成&#x…

centos7安装openjdk8

首先&#xff0c;打开openjdk安装官网 http://openjdk.java.net/install/ 输入安装命令&#xff1a; su -c "yum install java-1.8.0-openjdk" 装完之后会有提示版本跟安装的路径&#xff1b;在/usr/lib/jvm下可以查看到对应的名字&#xff0c;ls-l 配置环境变量&…

CSB文件上传漏洞 -->Day4(图片挂马)

22二号&#xff0c;冬至啦&#xff0c;深圳这边只有5&#xff08;尊嘟好冷啊&#xff09;&#xff0c;写这篇文章的时候都已经是凌晨一点了&#xff0c;相信大部分的人都在温暖的被窝里面了吧&#xff01;&#xff01;&#xff08;可怜的我&#xff0c;还得写writeup&#xff0…

微信小程序禁止刷新之后苹果端还可以下拉的问题

一、问题描述 最近在做一个小程序项目&#xff0c;需要禁止下拉刷新&#xff0c;于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新&#xff0c;这段话确实禁止了下拉刷新&#xff0c;无论是安卓手机端还是苹果端&#xff0c;但是在…

Win32 Application和Win32 Console Application的区别

Win32 Application和Win32 Console Application都是工作在32位Windows环境的程序。其中Win32 Application就是普通的常见的窗口应用程序&#xff0c;当然有的界面做得比较个性化&#xff0c;比如圆形的、不规则形状的……它们都是所谓的GUI(Graphics User Interface图形用户接口…

调试OpenJDK

knowyourmeme.com/photos/531557 THX为mihn 有时调试Java代码还不够&#xff0c;我们需要逐步了解Java的本机部分。 我花了一些时间来实现JDK的正确状态&#xff0c;所以简短的描述可能对开始旅行的人很有用。 我将使用全新的OpenJDK 9&#xff01; 首先&#xff0c;您必须通过…

算法题解:旋转数组的最小数字

题目描述 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。输入一个非递减排序的数组的一个旋转&#xff0c;输出旋转数组的最小元素。 解题思路 将旋转数组对半分可以得到一个包含最小元素的新旋转数组&#xff0c;以及一个非递减排序的数组。新…

函数的自执行,变量提升和函数提升

其实之前虽然刚开始学习JavaScript的时候经常看到function add(){}、var addfunction(){}、function(){}之类的这种写法&#xff0c;但是具体是什么叫什么却没有去考虑过这个问题…… function add(){}这种写法叫做函数声明 var addfunction(){}这种写法叫做函数表达式 fun…

Python之机器学习-sklearn生成随机数据

sklearn-生成随机数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties from sklearn import datasets %matplotlib inline font FontProperties(fname/Library/Fonts/Heiti.ttc) 多标签分类数据…

css:学习CSS了解单位em和px的区别

在国内网站中&#xff0c;包括三大门户&#xff0c;以及“引领”中国网站设计潮流的蓝色理想&#xff0c;ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸&#xff0c;几乎所有的主流站点都使用em作为字体单位&#xff0c;也就是可调的。没错&…

外汇游乐场

介绍 F X Playground是基于JavaFX的原型制作工具或实时编辑器&#xff0c;它消除了编译Java代码的步骤。 这个概念并不是什么新鲜事物&#xff0c;例如在网络世界中&#xff0c;有许多HTML5 游乐场提供在线编辑器&#xff0c;使开发人员可以快速原型化或尝试各种JavaScript库。…

轻轻松松看懂Spring AOP源码

轻轻松松看懂Spring AOP源码 https://baijiahao.baidu.com/s?id1596466083334197175&wfrspider&forpc 如果对spring的核心容器和JDK动态代理、CGLIB有所了解&#xff0c;接下来再看spring AOP源码会比较容易。文中所有代码片段截图对应的spring版本是5.0。 本文内容曾…

2015年,Web 进入移动时代

最近 Morgan Stanley 发布了一份87页的报告&#xff0c;对 Internet 的未来趋势进行预测&#xff0c;报告显示&#xff0c;移动 Web 目前发展迅猛&#xff0c;包括 Kindle, iPhone, 智能手机&#xff0c;平板电脑&#xff0c;GPS 设备&#xff0c;游戏机在内的无线设备呈爆炸式…

vue2.0移除或更改的一些东西

一、vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的&#xff0c;但是有一些仔细一看&#xff0c;发现并不全是2.0版本&#xff0c;有些语法还是1.0的版本&#xff0c;比如这个$index,$key&#xff0c;这两个压根就不是2.0的写法&#xff0c;2.0早就把…

VGG16等keras预训练权重文件的下载及本地存放

VGG16等keras预训练权重文件的下载&#xff1a; https://github.com/fchollet/deep-learning-models/releases/ .h5文件本地存放目录&#xff1a; Linux下是放在“~/.keras/models/”中 Win下则放在Python的“settings/.keras/models/”中 在anaconda on win中默认是&#xff1…

Java Keystore教程

目录 1.简介 2. SSL及其工作方式 3.私钥 4.公开证书 5.根证书 6.证书颁发机构 7.证书链 8.使用Java keytool的密钥库 9.密钥库命令 10.在Apache Tomcat上使用密钥库和自签名证书配置SSL 1.简介 我们谁没有去ebay&#xff0c;亚马逊买东西或他的个人银行帐户来检查。 您是否认为…

spring AOP源码分析(一)

spring AOP源码分析&#xff08;一&#xff09; 对于springAOP的源码分析&#xff0c;我打算分三部分来讲解&#xff1a;1.配置文件的解析&#xff0c;解析为BeanDefination和其他信息然后注册到BeanFactory中&#xff1b;2.为目标对象配置增强行为以及代理对象的生成&#xff…

异或前缀和,组合数学——cf1054D

/* 每个异或前缀和sum[i]只有两个值 区间异或和不为0&#xff0c;即两个不相等的前缀和 sum[i]的两个前缀和只要标记一个就可以了&#xff0c;为了去重只用map保存最小的那个来计数 最后统计相同的前缀和时&#xff0c;为了使相同的最小&#xff0c;每个map的值要平分 */ #inc…