首页 前端知识 前端小白的学习之路(CSS3 一)

前端小白的学习之路(CSS3 一)

2024-04-13 23:04:39 前端知识 前端哥 183 912 我要收藏

提示:CSS3 是 Cascading Style Sheets(层叠样式表)的第三个主要版本,引入了许多新的特性和增强功能,用于设计和布局网页。本章记录CSS3新增选择器,盒子模型。


目录

一、C3新增选择器

1) 属性选择器 

1.[class^='className']

2.tag[class^='className']

3.tag[class$='className']

4.tag[class*='className']

5.input[type='typeName']

 2)伪类选择器

1.first-child

2.last-child

3.nth-child(n) 与 nth-of-type(n)

3)其他选择器

1.empty

2.not('className')

3.+相邻选择器

4.~兄弟选择器

二、盒子模型box-sizing

1.content-box

2.border-box


一、C3新增选择器

1) 属性选择器 

1.[class^='className']

<style>
/*选中所有class属性以box开头的标签*/
        [class^="box"] {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

2.tag[class^='className']

<style>
    /* 选中所有class属性以box开头的div标签 */
    div[class^="box"] {
        background-color: red;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

3.tag[class$='className']

<style>
    /* 选中所有class属性以bbb结束的div标签 */
    div[class$="bbb"] {
        border-radius: 20px;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

4.tag[class*='className']

<style>
   /* 选中所有class属性包含aaa的div标签 */
    div[class*="aaa"] {
        opacity: .2;
    }
</style>
</head>

<body>
    <div class="box1 bbb ccc"></div>
    <div class="box2 aaa bbb"></div>
    <div class="box3 bbb"></div>
</body>

5.input[type='typeName']

<style>
    /* 选择文本输入框标签 */
    input[type="text"] {
        height: 40px;
        border: 2px solid blue;
        box-sizing: border-box;
        float: left;
    }

    /* 选择submit按钮标签 */
    input[type="submit"] {
        height: 40px;
        border: 2px solid deeppink;
        cursor: pointer;
        float: left;
    }
</style>
</head>

<body>
    <div class="clearfix">
        <input type="text">
        <input type="submit">
    </div>
</body>

 2)伪类选择器

1.first-child

选择第一个标签

<style>
    ul {
        margin-top: 10px;
    }

    /*选择ul下的第一个li标签*/
    ul li:first-child {
        font-size: 40px;
        color: red;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

2.last-child

选择最后一个标签

<style>
    ul {
        margin-top: 10px;
    }

    /*选择ul下的第最后一个个li标签*/
    /*如果最后一个不是li标签就会选择到那个标签*/
    ul li:last-child {
       font-size: 40px;
       color: green;
    }
    /*这才是最后一个标签*/
    ul div:last-child {
       font-size: 40px;
       color: green;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

3.nth-child(n) 与 nth-of-type(n)

选择第n个标签

<style>
    ul {
        margin-top: 10px;
    }

    /* 选择第2个 */
    ul li:nth-child(2) {
        color: purple;
        font-weight: bold;
        font-size: 30px;
    }
    /* 选择第3个 */
    ul li:nth-of-type(3) {
        color: yellowgreen;
        font-weight: bold;
        font-size: 20px;
    }
    /* 选择偶数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
    ol li:nth-child(2n) {
        background-color: red;
    }

    /* 选择奇数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
    ol li:nth-child(2n-1) {
        background-color: blue;
    }
</style>
</head>

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li></li>
        <li class="demo">123456</li>
        <div>这才是最后一个标签</div>
    </ul>
</body>

3)其他选择器

1.empty

没有任何内容的标签

<style>

    /* 选择没有任何内容的标签 */
    ul li:empty {
        height: 40px;
        width: 100px;
        background-color: pink;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

2.not('className')

选择除了包含className类名的其他标签 

<style>
/* 选择除了类名叫.demo的所有其他li标签 */
    ol li:not(.demo) {
        list-style: none;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li class='demo'>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

3.+相邻选择器

选择相邻的标签

<style>
    /* 相邻选择器 */
    .current+li {
        height: 100px;
    }

</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

4.~兄弟选择器

选择兄弟标签

<style>
    /* 兄弟选择器 */
    .current~li {
        opacity: .3;
    }
</style>
</head>

<body>
    <ol>
        <li>选项1</li>
        <li class="current">选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>

    </ol>
</body>

二、盒子模型box-sizing

box-sizing 是一个 CSS 属性,用于指定元素的盒子模型的计算方式。它有以下几种取值:

1.content-box

box-sizing: content-box;
/*默认属性,表示内容盒子,盒子模型总宽高=width/height+左右/上下padding+左右/上下border*/

2.border-box

box-sizing: border-box;/*表示怪异盒子,盒子模型总宽高=width/height*/

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4878.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!