接下来的我们来说下剩余的选择器以及选择器的权重
g.属性选择器
语法:1.[属性名]{} 选择含有指定属性的元素
2. [属性名=属性值]{} 选择含有指定属性及属性值元素
3. [属性名^=属性值]{} 选择含有指定属性及属性值开头
4. [属性名$=属性值]{} 选择含有指定属性及属性值结尾
5. [属性名*=属性值]{} 选择含有指定属性,只要含有某个属性值的元素
以上代码演示为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择含有指定属性的元素*/
[title]{
font-size: 20px;
}
/* 选择含有指定属性及属性值元素*/
[title=a]{
color: red;
}
/* 选择含有指定属性及属性值开头 */
[title^=b]{
color: aqua;
}
/* 选择含有指定属性及属性值结尾 */
[title$=b]{
color: chartreuse;
}
/* 选择含有指定属性,只要含有某个属性值的元素 */
[title*=b]{
background-color: antiquewhite;
</style>
</head>
<body>
<H1 title="a">满江红·写怀</H1>
<h3 title="ab">作者:岳飞(宋代)</h3>
<p title="abc">怒发冲冠,凭栏处、潇潇雨歇。抬望眼,仰天长啸,壮怀激烈。</p>
<p title="bcd">三十功名尘与土,八千里路云和月。莫等闲,白了少年头,空悲切!</p>
<p title="ac">靖康耻,犹未雪。臣子恨,何时灭!驾长车,踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
</body>
</html>
效果图为:
f.伪类选择器
全部类型中 :first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) n个子元素
同类型中::first-of-type 第一个子元素
:last- of-type 最后一个子元素
:nth-of-type(n) n个子元素
否定伪类:not()
以上代码演示为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 全部类型中 : */
/* 第一个子元素*/
p:first-child {
color: antiquewhite;
}
/* 最后一个子元素 */
p:last-child {
color: aqua;
}
/* 第n个子元素 */
p:nth-child(2){
color: aquamarine;
}
/* 同类型中: */
/* 第一个子元素 */
p:first-of-type{
font-size: 20px;
}
/* 最后一个子元素 */
p:last-of-type {
background-color: blueviolet;
}
/* 第n个子元素 */
p:nth-of-type(3){
font-weight: bold;
}
</style>
</head>
<body>
<DIV>
<P>君不见黄河之水天上来,奔流到海不复回</P>
<p>君不见高堂明镜悲白发,朝如青丝暮成雪。</p>
<p>人生得意须尽欢,莫使金樽空对月。</p>
<p>天生我材必有用,千金散尽还复来。</p>
<p>烹羊宰牛且为乐,会须一饮三百杯。</p>
<p>岑夫子,丹丘生,将进酒,君莫停。</p>
<p>与君歌一曲,请君为我侧耳听。</p>
<!-- <span>钟鼓馔玉不足贵,但愿长醉不愿醒。</span>
<span>古来圣贤皆寂寞,惟有饮者留其名。</span> -->
</DIV>
</body>
</html>
效果图为:
10伪元素选择器
Lorem 随机生成单词
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 在元素开始的位置前
::after 在元素开始的位置后
11继承
背景、布局不会被继承
选择器的权重
样式冲突
优先级:
!important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器
注意:1.选择器的权重一样,优先选用靠下的样式
2.如果是交集选择器,则所有选择器权重相加,最终谁大听谁的
3.如果是并集选择器,则选择器的权重各算各的
4.选择器的权重相加,再大也不会超过它上一级权重
总结:哪个选择器越具体,权重越大
实际应用过程中,样式没设置成功:
1.有没有选择2.选择器权重