css选择器:
交集选择器:
<style>
/*
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
*/
div.test {
color: red;
}
.a.b.c {
color: #bfa;
}
</style>
<body>
<div class="test">哈哈哈</div>
<div>哈哈哈</div>
<div class="a b c">哈哈哈</div>
</body>
选择器分组
<style>
/* 选择器分组(并集选择器)
作用:同时选择多个选择器
对应的元素语法:选择器1,选择器2选择器3选择器n{}
*/
.ccc, .test{
color: red;
}
</style>
<body>
<div class="test">哈哈哈</div>
<div class="ccc">哈哈哈</div>
</body>
关系选择器
<style>
/*
子元素选择器:
作用:选中指定父元素的指定子元素 语法:父元素>子元素
*/
.test > p {
color: red;
}
/*
后代元素选择器:
作用:选中指定元素内的指定后代元素 语法:祖先 后代
*/
.ccc p {
color: #bfa;
}
/*
选择下一个兄弟:
语法: 前一个 + 后一个
*/
.ul-li + .ul-li {
color: aqua;
}
/*
选择下边所有的兄弟
语法: 兄 + 弟
*/
.ol-li1 ~ .ol-li2 {
color: green;
}
</style>
<body>
<div class="test"><p>子元素选择器</p></div>
<div class="ccc">
<p>后代元素选择器</p>
<p>后代元素选择器</p>
<p>后代元素选择器</p>
</div>
<ul>
<li class="ul-li">选择下一个兄弟</li>
<li class="ul-li">选择下一个兄弟</li>
<li class="ul-li">选择下一个兄弟</li>
</ul>
<ol>
<li class="ol-li1">选择下边所有的兄弟</li>
<li class="ol-li2">选择下边所有的兄弟</li>
<li class="ol-li2">选择下边所有的兄弟</li>
</ol>
</body>
伪类选择器
<style>
/*
伪类(不存在的类,特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素...
伪类一般情况下都是使用 : 开头
:first-child第一个子元素
:last-child最后一个子元素
:nth-child()选中第n个子元素
特殊值:
n第n个 n的范围e到正无穷
2n或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不通点是他们是在同类型元素中进行排序
:not()否定伪类
将符合条件的元素从选择器中去除
使用:
ul > li:not(:nth-child(2)) {
color: green;
}
:active 表示鼠标点击
*/
ul > li:first-child {
color: red;
}
ul > li:last-child {
color: blue;
}
ul > :nth-child(2) {
color: hotpink;
}
ul > li:nth-of-type(4) {
color: rosybrown;
}
</style>
<body>
<ul>
<li class="ul-li">child</li>
<span>child</span>
<li class="ul-li">child</li>
<li class="ul-li">child</li>
<li class="ul-li">type</li>
<li class="ul-li">type</li>
<li class="ul-li">type</li>
</ul>
</body>
a标签的伪类
<style>
/*
:link用来表示没访问过的链接(正常的链接)
*/
a:link{
color: red;
}
/*
:visited用来表示访间过的链接
*/
a:visited{
color: orange;
}
/*
:hover用来表示鼠标移入的状态
*/
a:hover{
color: aqua;
}
</style>
伪元素
<style>
/*
伪元素,,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用::开头
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before元素的开始
::after元素的最后
before和 after必须结合content属性来使用
*/
.c1::first-letter {
color: red
}
.c2::first-line {
color: blue
}
.c3::selection {
color: green
}
.c4::before {
content: '我是头部-';
}
.c5::after {
content: '-我是尾部';
}
</style>
<body>
<div class="c1">first-letter表示第一个字母</div>
<div class="c2">first-line表示第一行</div>
<div class="c3">selection表示选中的内容</div>
<div class="c4">before元素的开始</div>
<div class="c5">after元素的最后</div>
</body>