专栏首页天天选择器与css的一些用法

选择器与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 条评论
登录 后参与评论

相关文章

  • css3转换(banner)

    天天_哥
  • 切换

    天天_哥
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥
  • 怎么处理多层Json数据循环遍历的问题?看这里

    今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的

    何处锦绣不灰堆
  • Position定位

    CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、i...

    WindrunnerMax
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • 原生JS实现拖拽鼠标绘画

    越陌度阡

扫码关注云+社区

领取腾讯云代金券