HTML5+CSS3(八)-全面详解（学习总结---从入门到深化）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
领取详细资料 请关注一下公众号
目录
关系选择器
关系选择器分类
后代选择器
定义
选择所有被E元素包含的F元素中间用空格隔开
语法
E F{}<ul>
<li>宝马</li>
<li>奔驰</li>
</ul>
<ol>
<li>奥迪</li>
</ol>ul li{
color:green;
}子代选择器
定义
选择所有作为E元素的直接子元素F对更深一层的元素不起作用 用>表示
语法
E>F{}<div>
<a href="#">子元素1</a>
<p> <a href="#">孙元素</a> </p>
<a href="#">子元素2</a>
</div>
div>a{
color:red
}相邻兄弟选择器
定义
选择紧跟E元素后的F元素用加号表示选择相邻的第一个兄弟元素
语法
E+F{}<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1+p{
color:red;
}通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F作用于多个元素用~隔开
语法
E~F{}<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>h1~p{
color:red;
}
学习效果反馈
1.下列代码属于哪种关系选择器
ul li{ color:green; }后代选择器
伪类选择器一
同一个标签根据其不同的状态有不同的样式。这就叫做“伪 类”。伪类用冒号来表示
超链接相关
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
color:orange;
}
/*鼠标悬停放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接但是不松手的时候是黑色*/
a:active{
color:black;
}
:first-child 选择器
定义
:first-child 选择器匹配其父元素中的第一个子元素
实例
列表中的第一个 <li> 元素选择的样式
li:first-child{
background:yellow;
}:last-child 选择器
定义
:last-child 选择器用来匹配父元素中最后一个子元素
实例
指定最后一个p元素的背景色
p:last-child{
background:#ff0000;
}:nth-child() 选择器
定义
:nth-child(n) 选择器匹配父元素中的第 n 个子元素元素类型没有限制 n 可以是一个数字一个关键字
实例
奇数和偶数是可以作为关键字使用用于相匹配的子元素其索引是 奇数或偶数该索引的第一个子节点是1。 在这里我们为奇数 和偶数p元素指定两个不同的背景颜色
p:nth-child(odd){
background:#ff0000;
}
p:nth-child(even){
background:#0000ff;
}学习效果反馈
1.下列哪个是鼠标悬停选择器:hover
伪类选择器二
:only-child 选择器
定义
:only-child 选择器匹配属于父元素中唯一子元素的元素
实例
匹配属于父元素中唯一子元素的 p 元素
p:only-child{
background:#ff0000;
}:empty 选择器
定义
:empty 选择器选择每个没有任何子级的元素包括文本节点
实例
指定空的p元素的背景色
p:empty{
background:#ff0000;
}:not() 选择器
定义
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器
实例
为每个并非 <p> 元素的元素设置背景颜色:not(p){
background:#ff0000;
}:focus 选择器
定义
:focus 选择器用于选择具有焦点的元素
实例
一个输入字段获得焦点时选择的样式
input:focus{
background-color:yellow;
}:checked 选择器
定义
:checked 选择器匹配每个选中的输入元素仅适用于单选按钮或复选框
实例
为所有选中的输入元素设置宽高
input:checked {
height: 50px;
width: 50px;
}学习效果反馈
1.下列哪个是获取焦点选择器:focus
伪对象选择器
伪对象也叫伪元素在过去伪元素被书写成前面只加一个冒号 实际上应该是
E::伪元素常用伪元素
E:before / E::before
E:after / E::after
beforeafter 选择器在被选元素的“内容”前面或后面插入内容用来和
content 属性一起使用。
虽然 E:before/after 可转化为 E::before/after 但是你写伪元素是要规范用
两个冒号<ul>
<li>刘亦菲</li>
<li>范冰冰</li>
<li>杨幂</li>
<li>袁姗姗</li>
</ul>ul::before{
content:"这是ul的伪元素";
color: blue;
}
ul::after{
content:"这是之后的伪元素";
}
应用场景
<p>标题</p>p::before{
content:" ";
background-color: red;
padding-left: 3px;
}学习效果反馈
1.下列哪个是在内容之前添加额外内容的选择器:only-child
属性选择器
可以为拥有指定属性的 HTML 元素设置样式而不仅限于 class 和 id 属性
[attribute] 选择器
定义
[attribute] 选择器用于选取带有指定属性的元素
实例
为带有 target 属性的 <a> 元素设置样式a[target]{
background-color:yellow;
}[attribute=value] 选择器
定义
[attribute=target] 选择器用于选取带有指定属性和值的元素
实例
为 target="_blank" 的 <a> 元素设置样式
a[target=_blank]{
background-color:yellow;
}[attribute~=value] 选择器
定义
[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素
实例
选择 titile 属性包含单词 "flower" 的元素并设置其样式
[title~=flower]{
background-color:yellow;
}[attribute|=value] 选择器
定义
[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元素
实例
选择 lang 属性值以 "en" 开头的元素并设置其样式
[lang|=en]{
background-color:yellow;
}[attribute^=value] 选择器
定义
[attribute^=value] 选择器匹配属性值以指定值开头的每个元素
实例
设置 class 属性值以 "test" 开头的所有 div 元素的背景色
div[class^="test"]{
background:#ffff00;
}[attribute$=value] 选择器
定义
[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素
实例
设置 class 属性值以 "test" 结尾的所有 div 元素的背景色
div[class$="test"]{
background:#ffff00;
}[attribute*=value] 选择器
定义
[attribute*=value] 选择器匹配属性值包含指定值的每个元素
实例
设置 class 属性值包含 "test" 的所有 div 元素的背景色
div[class*="test"]{
background:#ffff00;
}学习效果反馈
1.下列代码展示的属性选择器属于哪个选择器
a[target=_blank]{ background-color:yellow; }[attribute=value] 选择器