css深度学习

予倾

已于 2022-11-11 13:37:54 修改

阅读量169

点赞数 1

分类专栏： css学习文章标签： css javascript css3

于 2022-05-28 18:59:41 首次发布

本文链接：https://blog.csdn.net/qz9420/article/details/125021044

版权

css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css选择器：

交集选择器:

<style>
    /* 
    作用:选中同时复合多个条件的元素
    语法:选择器1选择器2选择器3选择器n{}
    注意点:交集选择器中如果有元素选择器，必须使用元素选择器开头
    */
    div.test {
        color: red;
    }
    .a.b.c {
        color: #bfa;
    }
</style>
<body>
    <div class="test">哈哈哈</div>
    <div>哈哈哈</div>
    <div class="a b c">哈哈哈</div>
</body>

选择器分组

<style>
/* 选择器分组（并集选择器)
   作用:同时选择多个选择器
   对应的元素语法:选择器1,选择器2选择器3选择器n{}
*/
.ccc, .test{
    color: red;
}
</style>
<body>
    <div class="test">哈哈哈</div>
    <div class="ccc">哈哈哈</div>
</body>

关系选择器

<style>
/* 
    子元素选择器:
    作用:选中指定父元素的指定子元素 语法:父元素>子元素
*/
.test > p {
    color: red;
}
/* 
    后代元素选择器:
    作用:选中指定元素内的指定后代元素 语法:祖先 后代
*/
.ccc p {
    color: #bfa;
}
/* 
    选择下一个兄弟:
    语法: 前一个 + 后一个 
*/
.ul-li + .ul-li {
    color: aqua;
}
/*
    选择下边所有的兄弟
    语法: 兄 + 弟
*/
.ol-li1 ~ .ol-li2 {
    color: green;
}
</style>
<body>
    <div class="test"><p>子元素选择器</p></div>
    <div class="ccc">
        <p>后代元素选择器</p>
        <p>后代元素选择器</p>
        <p>后代元素选择器</p>
    </div>
    <ul>
        <li class="ul-li">选择下一个兄弟</li>
        <li class="ul-li">选择下一个兄弟</li>
        <li class="ul-li">选择下一个兄弟</li>
    </ul>
    <ol>
        <li class="ol-li1">选择下边所有的兄弟</li>
        <li class="ol-li2">选择下边所有的兄弟</li>
        <li class="ol-li2">选择下边所有的兄弟</li>
    </ol>
</body>

伪类选择器

<style>
/* 
    伪类(不存在的类，特殊的类)
        伪类用来描述一个元素的特殊状态
            比如:第一个子元素、被点击的元素、鼠标移入的元素...
        伪类一般情况下都是使用 : 开头
            :first-child第一个子元素
            :last-child最后一个子元素
            :nth-child()选中第n个子元素
                特殊值:
                    n第n个 n的范围e到正无穷
                    2n或 even 表示选中偶数位的元素
                    2n+1 或 odd 表示选中奇数位的元素
            :first-of-type
            :last-of-type
            :nth-of-type()
                这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
            :not()否定伪类
                将符合条件的元素从选择器中去除
                使用: 
                    ul > li:not(:nth-child(2)) {
                        color: green;
                    }
            :active 表示鼠标点击
*/
ul > li:first-child {
    color: red;
}

ul > li:last-child {
    color: blue;
}

ul > :nth-child(2) {
    color: hotpink;
}

ul > li:nth-of-type(4) {
    color: rosybrown;
}
</style>
<body>
    <ul>
        <li class="ul-li">child</li>
        <span>child</span>
        <li class="ul-li">child</li>
        <li class="ul-li">child</li>
        <li class="ul-li">type</li>
        <li class="ul-li">type</li>
        <li class="ul-li">type</li>
    </ul>
</body>

a标签的伪类

<style>
/*
    :link用来表示没访问过的链接（正常的链接)
*/
a:link{
    color: red;
}
/*
    :visited用来表示访间过的链接
*/
a:visited{
    color: orange;
}
/*
    :hover用来表示鼠标移入的状态
*/
a:hover{
color: aqua;
}
</style>

伪元素

<style>
/* 
    伪元素，,表示页面中一些特殊的并不真实的存在的元素（特殊的位置)
    伪元素使用::开头
    ::first-letter表示第一个字母
    ::first-line表示第一行
    ::selection表示选中的内容
    ::before元素的开始
    ::after元素的最后
        before和 after必须结合content属性来使用 
*/
.c1::first-letter {
    color: red
}
.c2::first-line {
    color: blue
}
.c3::selection {
    color: green
}
.c4::before {
    content: '我是头部-';
}
.c5::after {
    content: '-我是尾部';
}
</style>
<body>
    <div class="c1">first-letter表示第一个字母</div>
    <div class="c2">first-line表示第一行</div>
    <div class="c3">selection表示选中的内容</div>
    <div class="c4">before元素的开始</div>
    <div class="c5">after元素的最后</div>
</body>

予倾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css深度学习

css选择器：交集选择器:<style> /* 作用:选中同时复合多个条件的元素语法:选择器1选择器2选择器3选择器n{} 注意点:交集选择器中如果有元素选择器，必须使用元素选择器开头 */ div.test { color: red; } .a.b.c { color: #bfa; }</style><body> <div class="te
复制链接

扫一扫