常用css3选择器

Cheng_Gang 发布于2019-08-01 17:01 / 2756人阅读

摘要：模糊匹配属性选择器标题选择器匹配属性值以标题指定值开头的每个元素。选择器用来匹配父元素中最后一个子元素。和和是可用于匹配下标是奇数或偶数的子元素的关键词选择器匹配同类型中的倒数第个同级兄弟元素。

p{
  width:40px;
  margin:8px auto;
  line-height:40px;
  border:1px solid gray;
  text-align:center;
  font-weight: 700;
}

X + Y 相邻选择器

X + Y : 相邻兄弟选择器选择匹配Y的元素，且该元素为所匹配X元素后面相邻的位置。

.test1+p{
  background-color:green;
  color:#fff
}

X > Y 子选择器

X > Y:子包含选择器选择匹配Y的元素，且该元素为所匹配X元素的子元素。

.wrapper>p{
  background-color:#f5524b;
   color:#fff;
  border:none
}

X ~ Y 相邻选择器

X ~ Y: 选择所有后面的兄弟节点们

.test2~p{
  background-color:#0eabdf;
   color:#fff;
  border:none
}

X[title] 属性选择器

a {
                display: block;
        width:300px;
                text-align: center;
                margin: 10px auto;
                color: #000;
                text-decoration: none;
            }

a[title] {
                background: green;
                color: #fff;
            }

X[title=””] 另一种属性选择器

a[title="标题"] {
                background: #ff9900;
                color: #fff;
            }

属性选择器，上述代码不只匹配带有title属性，更匹配title属性等于”标题”的链接元素。[]内不只可用title属性，还可以使用其他属性。

X[title*=””] 模糊匹配属性选择器

    a[title*="标题"]{
                background: #3a8aee;
                color: #fff;
            }

选择器匹配属性值以标题指定值开头的每个元素。


            item1
            item2
            item3
            item4
            item5
            item6
            item7
            item8

 ul{
    list-style: none;
}
.list li{
  line-height:24px
}

:first-child

.list li:first-child{
background-color:yellow;
}

:last-child

:last-child选择器用来匹配父元素中最后一个子元素。

:nth-child()

nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。

.list li:nth-child(2){
background-color:#09ac24;
}

Odd 和 even

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词

.list li:nth-child(odd)
{
background:#e73a3a;
}
.list li:nth-child(even)
{
background:#f5a72c;
}

:nth-last-child(n)

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式

.list li:nth-last-child(6) {
background-color:#15d6af;
}

选择前几个元素

.list li:nth-child(-n+6) {
                background: #F05442;
                color: #fff;
            }

从第几个开始选择

.list li:nth-child(n+4){
background: #F05442;
color: #fff;
}

限制选择某一个范围

:nth-child(-n+6):nth-child(n+3){
background: #F05442;
color: #fff;
}

:nth-of-type(n)

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

.list li:nth-of-type(3) {
  background: #635f5c;
}

:only-child

:only-child选择器匹配属于父元素中唯一子元素的元素。

span:only-child{
  background: #f26f0f;
}

:not

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

.list li:not(:last-child){
  background: #0fcff2;
}

参考文章还需要学习的十二种CSS选择器
参考文章 CSS选取第几个标签元素：nth-child(n)、first-child、last-child

云服务器 GPU云服务器 jquery常用选择器选择器派生选择器省市选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50894.html

常用css3选择器

摘要：模糊匹配属性选择器标题选择器匹配属性值以标题指定值开头的每个元素。选择器用来匹配父元素中最后一个子元素。和和是可用于匹配下标是奇数或偶数的子元素的关键词选择器匹配同类型中的倒数第个同级兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

ytwman 2019-08-29 12:48 评论0 收藏0
前端培训-初级阶段（5 - 8）

摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...

PAMPANG 2019-08-30 15:56 评论0 收藏0
前端培训-初级阶段（5 - 8）

摘要：前端最基础的就是。类同于标签将对象作为弹性伸缩盒显示。定义了一条立方贝塞尔曲线。是，表示终止时间和终止状态。动画过渡可以理解为两个关键帧的补间操作。往期前端培训初级阶段后记年月日更新。参考资料引用培训目录出处已备份到笔记速查视差滚动前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...

gaosboy 2019-08-02 14:29 评论0 收藏0