基本标签选择器
把写在标签开始标签内部style属性中的样式,称为一个标签的行间样式
<div style="width:100px;height:100px;background-color:red">
行内样式定义,任何一个标签都可以通过style属性定义这个标签独有的显示效果
</div>
内部样式表
内部样式表,将写在行间的样式提取出来,写在一对style标签中,并且用花括号括起来。
如何让浏览器知道,这个三个样式是给哪个标签设置的呢?
这就需要在第一个{}前加一个“特殊标识”来告诉浏览器,花括号中的样式是给哪个标签设置的。
特殊标识的作用:就是在样式表中,选中标签,设置样式。因此将这个特殊标识称为 “选择器”
<style>
特殊标识{
width:100px;
height:100px;
background:red;
}
</style>
<div style="background-color: aquamarine;">显示内容</div>
<!--如果同时使用行间和内部两种定义方法,则效果为两者的叠加,如果重复定义则就近原则-->
基础标签选择器的分类
标签选择器、类型选择器、id选择器
标签选择器
以标签名称作为选择器选中标签 “标签名{样式}”
标签选择器特点 : 能够为一群具有相同名称的标签,同时设置相同的样式
<!--
例如:
div{
color:red;
}
-->
类型选择器
在标签内部通过class属性,给标签设置类型名在样式表中通过【.类型名{样式}】的方式给标签盒子设置样式
<!--
例如:
.p1{
border: 1px solid red;
}
-->
类型选择器特点:
相当于给标签起了一个别名
不同盒子可以有相同的class属性名,因此类型选择器可以给多个标签同时设置相同样式
同一盒子可以有多个class属性名,在文档中以空格隔开,因此同一个盒子的样式是多个选择器叠加的结果
id选择器
id选择器是通过给标签设置id属性,进行定位选择
在样式表中通过 #id{样式}对标签设置样式,相当于一个人的身份证号
id选择器特点
有且只能有一个,不能重名,不能有多个。事实上在一个页面针对
不同标签多次使用相同id没有问题【浏览器最大程度容错】一般不使用id选择器设置样式
使用三个基本选择器的优先问题
同时针对一个标签使用三种定义,如果显示属性配置冲突则id选择器>类型选择器>标签选择器;如果不冲突则叠加
总结:越精确越优先
ps:其他选择器都将是三大基本选择器的一个组合
其他选择器
通用选择器
*号选择器是通用选择器,这是元素选择器的扩展,功能是匹配所有html元素的选择器,
通用选择器会将所有元素匹配并配置样式,这是把双刃剑,好处就是非常方便,坏处就是将不必要的元素也配置了。
目前为止,还不存在所有元素都必须配置的样式,所以,一般来说,不常用
属性选择器
属性选择器,直接通过两个中括号里面包含属性名即可。当然,还有更多扩展的属性选择器。
<a href="https://www.baidu.com">test1</a><br/>
<a href="text1.html">test2</a><br/>
<span href="test2.html">bbbbbb</span>
<style>
/*匹配所有具有href属性的元素,这里的属性允许是自定义的*/
[href] {
color:red;
}
/*匹配具有href属性,同时href的属性值以https开头*/
[href^="https"] {
background-color: yellow;
}
/*匹配具有href属性,同时href属性值以.com收尾*/
[href$=".com"]{
border: 1px dotted blue;
}
/*匹配具有href属性,同时href属性值中包含.字符*/
[href*="."]{
border: 1px dotted blue;
border-radius: 20px;
}
</style>
复合选择器
分组选择器
将多个选择器通过逗号分割,同时设置一组样式。每个选择器都是独立的选择器,最后选择结果为所有选择器的和
在这个组合选择器中,使用了3种不同的选择方法,第一个div采用标签选择器,第二个p#id1采用的是id选择器,选择id=id1的p标签,第三个采用的是类选择器
/*
div,p#id1,.span1{
color:red
}
*/
后代选择器
选择元素内部所有指定元素,不在乎的层次深度。当然,
后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器
标准语法: 选择器1 选择器2 {样式定义}
<style>
/*选择包含span的p标签种span标签*/
p span {
color:orange;
}
/*选择包含id=span2的p标签中的span id=span2标签*/
p #span2{
color:blue
}
/*选择包含span标签的class=div3标签中的span标签*/
.div3 span{
background-color: blueviolet;
}
</style>
子选择器
子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一级的元素,不可以再往下选择
<div>
<p>
<a href="">aaaa</a>
<a href="">bbbb</a>
</p>
<a href="">dd<span>eee</span>dd</a>
</div>
<style>
/*后代选择器,所有的div中的热点文字显示为红色*/
div a{
color:red
}
/*儿子选择,所以aaaa和bbbb不会出现边框,而dddd则显示边框*/
div > a{
border: 1px solid blue;
}
/* div的儿子a中的儿子span*/
div > a > span{
color:beige;
}
</style>
相邻兄弟选择器
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。注意是相邻下一个元素,不能查找上一个元素。
例如li id="bb1"和下一个li中间插入一个span元素则#bb1 + li则不能查找到元素
<ul>
<li>我是儿子1
<ol>
<li>我是孙子11</li>
<li>我是孙子12</li>
</ol>
</li>
<li id="bb1">我是儿子2</li>
<!--
<span>abcde</span>
-->
<li>我是儿子3</li>
</ul>
<style>
#bb1 + li{
color:red;
}
</style>
普通兄弟选择器
普通兄弟选择器匹配和第一个元素后面的所有元素
<ul>
<li id="bb2">我是儿子1</li>
<span>span_span</span>
<li>我是儿子2</li>
<li>我是儿子3</li>
</ul>
<style>
/*查找id=bb2后面的所有同级的li标签*/
#bb2 ~ li{
color:blue;
}
</style>