css选择最后一个子元素，css3基本选择器？

用户投稿 • 2022年4月22日 pm5:45 • 网络资讯 • 阅读 502

0.常用选择器

0.1 元素选择器

元素选择器作用：根据标签名来选中指定的元素语法：标签名{} 例子：p{} h1{} div{}

p{ color: red;}h1{ color: green;}

0.2 id选择器

作用：根据元素的id属性值选中一个元素语法：#id属性值{} 例子：#box{} #red{}

#red{ color: red; }

0.3 类选择器

类选择器作用：根据元素的class属性值选中一组元素语法：.class属性值

.blue{ color: blue; } .abc{ font-size: 20px; }

0.4 通配选择器

作用：选中页面中的所有元素语法: *

*{ color: red; }

1.复合选择器

1.1 交集选择器

作用：选中同时复合多个条件的元素语法：选择器1选择器2选择器3选择器n{} 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{ font-size: 30px; } .a.b.c{ color: blue }

1.2 并集选择器

选择器分组（并集选择器）作用：同时选择多个选择器对应的元素语法：选择器1,选择器2,选择器3,选择器n{}

#b1,.p1,h1,span,div.red{}

h1, span{ color: green }

2.关系选择器

2.1 子元素选择器

作用：选中指定父元素的指定子元素语法：父元素 > 子元素

div.box > span{ color: orange; }

2.2 后代元素选择器

作用：选中指定元素内的指定后代元素语法：祖先后代

div span{ color: skyblue }

选择下一个兄弟语法：前一个下一个

p span{ color: red; }

选择下边所有的兄弟语法：兄 ~ 弟

p ~ span{ color: red; }

3. 属性选择器

[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素

/* p[title]{ */ /* p[title=abc]{ */ /* p[title^=abc]{ */ /* p[title$=abc]{ */ p[title*=e]{ color: orange; }

4. 伪类选择器

伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素…伪类一般情况下都是使用:开头 :first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素特殊值：n 第n个 n的范围0到正无穷2n 或 even 表示选中偶数位的元素2n 1 或 odd 表示选中奇数位的元素以上这些伪类都是根据所有的子元素进行排序:first-of-type :last-of-type :nth-of-type() 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序:not() 否定伪类将符合条件的元素从选择器中去除

/* ul > li:first-child{ color: red; } */ /* ul > li:last-child{ color: red; } */ /* ul > li:nth-child(2n 1){ color: red; } */ /* ul > li:nth-child(even){ color: red; } */ /* ul > li:first-of-type{ color: red; } */ ul > li:not(:nth-of-type(3)){ color: yellowgreen; }

5. a元素的伪类

:link 用来表示没访问过的链接（正常的链接）a:link{
color: red;

}:visited 用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色

a:visited{ color: orange; /* font-size: 50px; */ }

:hover 用来表示鼠标移入的状态

a:hover{ color: aqua; font-size: 50px; }

:active 用来表示鼠标点击

a:active{ color: yellowgreen; }

6. 伪元素选择器

表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

before 和 after 必须结合content属性来使用

p::first-letter{ font-size: 50px; } p::first-line{ background-color: yellow; } p::selection{ background-color: greenyellow; } /* div::before{ content: 'abc'; color: red; } div::after{ content: 'haha'; color: blue; } */ div::before{ content: '『'; } div::after{ content: '』'; }

7.样式继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承

p{ color: red; background-color: orange; } div{ color: yellowgreen }

8. 选择器权重

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！

/* #box1{ background-color: orange; } div#box1{ background-color: yellow; } */ .d1{ background-color: purple !important; } .red{ background-color: red; /* font-size: 20px; */ }

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家网络引流和网络创业感兴趣，可以添加微信：Sum8338 备注：营销圈学习，我拉你进直播课程学习群，每周135晚上都是有实战干货的引流技术和创业项目课程免费分享！

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！