CSS选择器学习总结
CSS选择器学习总结CSS 选择器学习简单选择器
[*]
[*]
[*]
[*]
[*]
[*] CSS选择器
[*]
[*]
[*]
[*]
[*] 1
[*] 2
[*] 3
[*] 4
[*] 5
[*] 6
[*] 7
[*] 8
[*] 9
[*]
[*] CSS选择器学习
[*] 2020年4月7号
[*]
[*]
[*]显示效果
[*]style里面添加下面样式
[*] /* 父子选择器 */
[*] body > div {
[*] border: 3px solid white;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 同级相邻选择器（后面一个） */
[*] .item#center + .item {
[*] background-color: lightgreen;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 同级相邻选择器（后面全部） */
[*] .item#center ~ .item {
[*] background-color: violet;
[*] }
[*]显示效果
伪类选择器不分组匹配
[*]style里面添加下面样式
[*] /* 伪类选择器（不分组匹配） */
[*] /* 匹配第一个子元素 */
[*] .container > :first-child {
[*] background-color: lime;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 匹配最后一个子元素 */
[*] .container > :last-child {
[*] background-color:olivedrab;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 匹配任何一个子元素 */
[*] .container > :nth-child(4) {
[*] background-color: mediumblue;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*]/* 匹配倒数任何一个子元素 */
[*] .container > :nth-last-child(4) {
[*] background-color: midnightblue;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 匹配倒数偶数元素 */
[*] .container > :nth-child(even) {
[*] background-color:tomato;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 将ID选择器样式注释掉，因为权重大于类选择器 */
[*] /* #center {
[*] background-color: slateblue;
[*] } */
[*] /* 匹配倒数奇数元素 */
[*] .container > :nth-child(odd) {
[*] background-color: yellowgreen;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 匹配前四个元素 */
[*] .container > :nth-child(-n + 4) {
[*] background-color: red;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*]
[*] /* 从第6个开始,选择剩下的所有元素 */
[*] .container > :nth-child(n +6) {
[*] background-color:seagreen;
[*] }
[*]显示效果
伪类选择器分组匹配HTML源码
[*]
[*]
[*]
[*]
[*]
[*] CSS选择器
[*]
[*]
[*]
[*]
[*] 1
[*] 2
[*] 3
[*] 4
[*] 5
[*] 6
[*] 7
[*] 8
[*] 9
[*]
[*] CSS选择器学习
[*] 2020年4月7号
[*]
[*]
[*]style里面添加下面样式
[*] /* 伪类选择器（分组匹配） */
[*] /* 匹配span第一个子元素 */
[*] .container > span:first-of-type{
[*] background-color: orangered;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* 匹配span最后一个子元素 */
[*] .container > span:last-of-type{
[*] background-color:sienna;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* span分组第三个 */
[*] .container > span:nth-of-type(3) {
[*] background-color: springgreen;
[*] }
[*]显示效果
[*]style里面添加下面样式
[*] /* span分组前三个 */
[*] .container > span:nth-child(-n + 3){
[*] background-color: springgreen;
[*] }
[*]显示效果
IT论坛伪类html源码
[*]
[*]
[*]
[*]
[*]
[*] CSS选择器
[*]
[*]
[*]
[*]
[*] 1
[*] 2
[*] 3
[*] 4
[*] 5
[*] 6
[*] 7
[*] 8
[*] 9
[*]
[*]
[*]
[*]初步预览效果
[*]:root伪类
[*]style里面添加下面样式
[*] /* :root伪类 */
[*] :root {
[*] background-color: yellow;
[*] }
[*]显示效果
[*]a:hover伪类
[*] 6
[*]上面源码修改成下面源码
[*]
[*] php官网
[*]
-在style里面添加下面样式
[*] /* a:hover伪类 */
[*] a:hover {
[*] background-color: red;
[*] }
[*]显示效果
学习总结1.伪类学习感觉很重要，对学习帮助很大，希望以后可以常用2.经过老师讲解后感觉伪类很好理解3.似乎还是对display属性掌握不好，需要加深对display理解
摘自：https://www.php.cn/blog/detail/20397.html
页:
[1]