css3选择器

最新推荐文章于 2025-03-26 15:41:05 发布

原创最新推荐文章于 2025-03-26 15:41:05 发布 · 279 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Css 专栏收录该内容

17 篇文章

订阅专栏

1、属性选择器

/*
    [属性名称=值]{
    设置样式
    }
     */
a[href='a.txt']{
    color:yellow;
}

/* 拿到以什么开头的值*/
a[href^='a']{
    color:greenyellow;
}

/* 以什么结尾 */
a[href$='3']{
    color:pink;
}

/* 属性的值中带带有某个字符串 */
a[href*='m']{
    color:red;
}

2、伪类选择器

/*获取到第一个设置样式*/
li:first-child{
    color:red;
}
/*  获取最后一个 */
li:last-child{
    color:yellow;
}
/* 获取第n个 */
li:nth-child(7){
    color:red;
}

li:nth-of-type(2){
    background:green;
}


li:nth-child(7n){
    color:red;
}


li:nth-child(7n-1){
    color:red;
}

/*偶数*/
li:nth-child(2n){
    color:red;
}
li:nth-child(even){
    color:red;
}
/*奇数*/
li:nth-child(2n+1){
    color:red;
}
li:nth-child(odd){
    color:green;
}

/* 拿到空的元素*/
li:empty{
    background:red;
}


/*选中的是当前处于锚点位置的元素*/
/*在某些特定场合灵活使用会带来很好的效果*/
/*学习它的目的只是知道有这个一个特殊的选择器*/
h2:target{
    color:red;
}
/*not()
   拿到没有指定的 类样式 的元素,并且给它设置样式.*/
li:not(.special){
    background:red;
}
/*伪元素before,after
    before,after一定要结合 content属性一起使用。默认是行类元素 */
div::before{
    content:'';
    height:100px;
    width:100px;
    background:red;
    display:block;
}

div::after{
    content:'';
    height:100px;
    width:100px;
    background:yellow;
    display:block;
}
/*first-letter 获取首个字符，给它设置样式。*/
li:first-letter{
    color:red;
}
/*first-line 获取第一行文字，给它设置样式。*/
div::first-line{
    color:red;
    font-size:40px;
}
/*浏览器选中文字样式设置*/
div::selection{
    color:red;
    background:yellow;
    font-size:40px;
}