选择器与css的一些用法

1.选择器
例如:
 <style>
        div>p:first-child{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <p>01</p>
    <p>02</p>
    <p>03</p>
    <p>04</p>
    <p>05</p>
    <p>06</p>
    <p>07</p>
    <p>08</p>
    <p>09</p>
    <p>10</p>
    <span>我</span>
    <a href="#">你</a>
</div>
</body>
1.1.div>p:first-chlid{
    color:pink
}
代表div子元素是p的第一个
1.2.div>p:last-child{
    color:pink
}
代表div子元素是p的最后一个
1.3.div>p:nth-child(n){
    color:pink
}
代表div子元素是p的第n个
1.4.div>p:nth-child(3n+1){
    color:pink
}
代表div子元素是p的第3n+1个(比如1,4,7....),其他类似
1.5.div>p:nth-child(odd/even){
    color:pink
}
代表div子元素是p的奇数/偶数。
1.6.div>p:not(:first-child){
    color:pink
}
代表div子元素是p的除了第一个。
1.7.div :not(p){
    color:pink
}
代表div子元素除了p的子元素。
2.emmet语法
例如:
div.box$$*10>a[href=#]{$$}

3.样式写出三角形

例如:
    <style>
        .sanjiao{
            display: block;
            height: 0;
            width: 0;
            border: 20px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>
<body>
<span class="sanjiao"></span>
</body>
其中改变边框的方向就可以改变三角的朝向。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端-

Jquery的属性操作和DOM操作

       3 val()    :     获取或设置表单内容    (原生JS使用value)

11020
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

35450
来自专栏Golang语言社区

【Golang语言基础】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

30380
来自专栏天天

childNodes属性和nodeType属性

19740
来自专栏gaoqin31

jQuery源码浅析

如果说php是世界上最好的语言,那么javascript无疑可以称为世界上最飘逸的语言,最近看了下jQuery的源码,实现了一个简陋的jQuery。我觉得要看懂...

24330
来自专栏Golang语言社区

【Golang语言社区--基础篇】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

389110
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb02-CSS,JS(Java真正的全栈开发)

? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

482150
来自专栏老司机的技术博客

golang学习笔记10:数组切片Slice

10120
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

38370
来自专栏听雨堂

EXCEL单元格的引用方式

EXCEL单元格的引用包括相对引用、绝对引用和混合引用三种。 相对引用   公式中的相对单元格引用(例如 A1)是基于包含公式和单元格引用的单元格的相对...

19970

扫码关注云+社区

领取腾讯云代金券