CSS选择器-常用搜集
标签选择器:
div{
font-size=10px;
color=red;
background-color=yello;
width=200px;
height=200px;
}
<div>前端威武</div>
---------------------------------------
类选择器:
.box{
}
<p class="box">啊啊啊啊</p>
------------------------------------------
ID选择器:
#box{
}
<p id="box">啊啊啊<p>
-------------------------------------------
通配符选择器
*{
}
<div>aa</div>
<p>aaa</p>
---------------------------------
复合选择器:两个或两个以上的选择器通过不同方式连接起来
div.box{//无空格
color:red;
}
<div class="box">哎哎</div>//这个div里的box变红色
<p class="box">aaa<p>
<div>aaaaaa</div>
-------------------------------
后代选择器:有空格 无限制隔代
选择器+空格+选择器.....{
}
.box san{
cocor:red;
}
<div class="box">
<p><span class="miss">aa</span></p>
</div>
----------------------------------
子代选择器:
div>span{
color;red;
}
<div>
<p><span></span></p>//这里的span是孙子 这里是p>span
<span></span> //直接的子标签变了就是这个
------------------------------------------------------------------------
并集选择器:
div,p,span{
font-size:100px;
}
<div>aaa</div>
<p>aaa</p>
<span>aaaa</span>
------------------------------------
选择器优先级:
一、什么是css优先级
css优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、css优先级规则
比较简单易记的一种方法就是给不同选择器分配不同的值:
1.id选择器默认优先级最高,其权值为100
2.class选择器、属性选择器和伪类选择器的权值为10
3.标签选择器的优先级较低,其权值为1
所以在比较样式的优先级时,只需统计选择符中的id、class、标签名个数,然后把对应的权值相加即可。根据结果便可得出优先级高低。
1.结果较大的优先级较高
2.结果相同,则后定义的样式优先级较高
3.如果样式值中含有!important,则该值优先级最高
CSS选择器-常用搜集的更多相关文章
- html5--6-11 CSS选择器7--伪类选择器
html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...
- html5--6-10 CSS选择器7--伪类选择器
html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...
- html5--6-9 CSS选择器6--伪类选择器
html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...
- html5--6-8 CSS选择器5
html5--6-8 CSS选择器5 实例 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- html5--6-7 CSS选择器4
html5--6-7 CSS选择器4 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...
- html5--6-6 CSS选择器3
html5--6-6 CSS选择器3 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...
- html5--6-5 CSS选择器2
html5--6-5 CSS选择器2 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...
- html5--6-4 CSS选择器
html5--6-4 CSS选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用 ...
- CSS选择器使用
今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697) CS ...
随机推荐
- Scrum立会报告+燃尽图(十月二十五日总第十六次)
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...
- Scrum立会报告+燃尽图 04
此作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2194 一.小组介绍 组长:王一可 组员:范靖旋,王硕,赵佳璐,范洪达,祁玉 ...
- DP--HDU 1003(最大子串和)
问题描述: 给定整数A1, A2,--AN (可能有负数),求I到j的最大值. 例如: -2, 11, -4, 13, -5, -2时答案为20 对于这个问题的算法 ...
- 测试bug
模板在运行时出现了以下 1 个错误:---------------------------Controller.tt(-1,-1) : error : 获取 AppDomain 以便从主机运行转换时出 ...
- python获取前几天的时间
days的参数就是你想获取前多少天的数据,如果是昨天的话,则days=1 import datetime today=datetime.date.today() oneday=datetime.tim ...
- Scrum 项目准备3.0
SCRUM 流程的步骤2: Spring 计划 1. 确保product backlog井然有序.(参考示例图1) 2. Sprint周期,一个冲刺周期,长度定为两周,本学期还有三个冲刺周期. Spr ...
- webpack打包多html开发案例
简单说明: 1,案例没有使用devserver,所以不能实时查看 2,案例是将src下面的html.css.js分别进行处理 3,多html的规律是需要有多个entry,每个html一个entry,当 ...
- java 使用volatile实现线程数据的共享
java 使用volatile实现线程数据的共享 直接上代码看效果: public class VolatileTest extends Thread { private volatile boole ...
- luogu 1066 引水入城(bfs+贪心)
90分,有一个点TLE.... 首先可以证明一个东西,如果从上面一排的某个点bfs一次到最下面一排的饮水点不是一个区间的话,那么最后一定所有饮水点不会被覆盖完的. 证明考虑反证法. 所以从上面一排的每 ...
- pyhcarm github
1.主题 介绍如何用Pycharm实打实的创建.运行.调试程序. 2.准备工作 Pycharm版本为2.7或者更高. 至少安装一个Python解释器,2.4到3.3均可 3.下载安装Pycharm 下 ...