XZ_CSS之CSS选择器和选择器的优先级
来源:互联网 发布:js对象的tostring方法 编辑:程序博客网 时间:2024/06/08 04:52
CSS全称是Cascading Style Sheets,层叠样式表
用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如:
color: blueviolet;
font-size:18px;
background-color: yellow;
冒号:左边的是属性名,冒号:右边的属性值
CSS的3种书写形式
行内样式:内联样式直接在标签的style属性中书写
<divstyle="color:darkgrey;font-size:18px;">我是容器标签</div>
页内样式:在本网页的style标签中书写
<style>
div{
color: blueviolet;
font-size:18px;
}
</style>
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
<linkrel="stylesheet"href="../html/test.css"/>
CSS规律:1、就近原则;2、叠加原则;
CSS的两大重点
1>属性:通过属性的复杂叠加才能做出漂亮的网页
2>选择器:通过选择器找到对应的标签设置样式
CSS选择器
作用:拿到对应的标签设置样式
1.标签选择器
根据标签名找到选择器
作用:通过对应的标签,为之添加样式
<div>div1</div>
<div>div2</div>
div{
color: brown;
background-color: yellow;
font-size:15px;
}
样式 标签名 { }
2.类选择器
两个不想干的标签,通过类选择器,可以拥有相同的属性;
一个标签可以有多个类 <divclass="test1 test2">我是用来测试优先级的</div>
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
<pclass="high">我是段落标签</p>
<divclass="high">我是div标签</div>
.high{
color: palevioletred;
}
样式 .类名 { }
3.id选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
一一对应关系,只能有一个id,不能有<divid="main second">我是用来测试优先级的</div>这种样式
注意:id 属性只能在每个 HTML 文档中出现一次。
<divid="first">我是div标签</div>
#first{
color: teal;
font-size:18px;
}
样式 #id名称 { }
4.并列选择器
相当于逻辑或,只要两个条件满足一个即可,多个标签想要设置相同的样式
<pclass="high">我是段落标签</p>
<divclass="high">我是div标签</div>
div,.high{
color: black;
}
样式 选择器名称,选择器名称 { }
5.复合选择器
相当于逻辑与,满足两个条件
<pclass="high">我是段落标签</p>
<divclass="high">我是div标签</div>
p.high{
color: black;
}
样式 选择器名称选择器名称 { }
6.后代选择器又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
<div>
<p>div里面的p</p>
<span>
<p>div里面的span里面的p</p>
<ahref="#">我是超链接</a>
</span>
</div>
<p>div外面p</p>
diva{
color: aquamarine;
}
spanp{
color: tomato;
}
7.直接后代选择器
<div>
<p>div里面的p</p>
<span>
<p>div里面的span里面的p</p>
<ahref="#">我是超链接</a>
</span>
</div>
<p>div外面p</p>
div > p{
color: black;
}
8.相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符。
与子结合符一样,相邻兄弟结合符旁边可以有空白符。
用一个结合符只能选择两个相邻兄弟中的第二个元素。
<div>
<p>div里面的p</p>
<span>
<p>div里面的span里面的p</p>
<ahref="#">我是超链接</a>
</span>
</div>
<p>与div相邻的p</p>
<p>与p相邻的p</p>
div +p{
color: green;
}
8.属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
一维属性选择器
<divname="jack">Jack</div>
<divname="rose">Rose</div>
<div>ZhangSan</div>
div[name]{
color: darkcyan;
}
二维属性选择器
<divname="jack">Jack</div>
<divname="rose"age="20">Rose</div>
<div>ZhangSan</div>
div[name][age]{
color: darkmagenta;
}
CSS选择器 - 选择器的优先级
通配符:作用于所有的标签,权值0;
1.优先级别非常低
2.性能比较差
css样式遵循的规律:
1.相同类型的选择器遵循:a.就近原则;b.叠加原则
2.不同类型的选择器遵循:
a>选择器的针对性越强,它的优先级就越高;
b>选择器的权值加在一起,大的优先;如果权值相同,后定义的优先;
c>important > 内联 > id选择器 > 类选择器 | 伪类 | 属性选择 | 伪元素 > 标签选择器 > 通配符 > 继承
选择器的权值
通配选择符(*):0
标签选择器:1
类选择器:10
属性选择器:10
伪类:10
伪元素:10
id选择器:100
important:1000 优先用哪个样式,在后面加!important 例如:
div{
color: red !important;
}
原则:选择器的权值加在一起,大的优先;如果权值相同,后定义的优先
CSS选择器 - 伪类
通过选择器或者标签名先拿到标签,然后再添加伪类操作
<divid="first">我是div标签</div>
/** 当鼠标移动上来 */
#first:hover{
width:300px;
height:100px;
background-color: aqua;
}
<inputplaceholder="我是输入框”/>
/** 伪类 */
input:focus{
/** 去除外线条 */
outline:none;
/** 改变宽度和高度 */
width:200px;
height:50px;
/** 改变文字的大小 */
font-size:20px;
}
CSS选择器 - 伪元素
阅读全文
0 0
- XZ_CSS之CSS选择器和选择器的优先级
- css选择器&选择器的优先级
- css选择器和优先级
- CSS选择器和优先级
- CSS选择器的优先级
- CSS选择器的优先级
- CSS 选择器的优先级
- css选择器的优先级
- CSS的选择器,优先级
- CSS选择器的优先级
- css选择器的优先级
- CSS选择器的优先级
- css选择器的优先级
- css选择器的优先级
- CSS的基本选择器和优先级
- css 引入方式,选择器,选择器的优先级
- CSS基本选择器和优先级
- CSS选择器的优先级设定
- mysql多表查询
- npm install 生成的package-lock.json作用
- bzoj2989: 数列&&4170: 极光
- linux device
- Example 6.6 Cliff Walking
- XZ_CSS之CSS选择器和选择器的优先级
- codeforces841c(99/600)
- 2017.8.25
- Hbase 建表基本命令总结
- dpkg打包
- spark学习-23-Spark算子Transformations和Action使用大全(Transformations章(二))
- 一名全栈工程师的必备工具箱
- io-字符流与字节流
- leetcode 141. Linked List Cycle