05-css选择器进阶及三大特性

孙小明的测试修炼手册

已于 2023-06-24 17:21:21 修改

阅读量43

点赞数

分类专栏：前端实战-HTML&CSS 文章标签： html css css3

于 2023-06-24 00:00:20 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131355848

版权

前端实战-HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、选择器进阶

选择器	说明	使用场景	举例
复合选择器	根据HTML的嵌套关系，选择父元素后代中满足条件元素 1. 后代选择器：空格 1. 语法：选择器1 选择器2{} 2. 后代选择器中可以有儿子，孙子，孙孙子 2. 子代选择器 1. 语法：选择器1>选择器2{}	区别：后代标签中只要满足选择器的2的标签都会设置效果，子代选择器只会设置的儿子标签	.box a { color:red} box的后代标签中只要满足a标签，不管后代后后代都会设置成red颜色
并集选择器	同时选中多组标签，设置相同样式 1. 语法：选择器1，选择器2	可以选择个标签设置相同演示
交集选择器	选中页面中同时满足多个选择器的标签 1. 选择器1选择器2{css}	既有原则： 1. 找到页面中既能被1选中又能被选择器2选中的标签，设置样式
hover伪类选择器	作用：选中鼠标悬停在元素上的状态设置样式 1. 语法选择器：hover{css}	设置鼠标悬停样式

1、后代选择器

后代选择器只要满足选择器2都会被设置css, 所以后代和后后代都会设置成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    1. 后代选择器 只要满足选择器2都会被设置css, 所以后代和后后代都会设置成红色
    */
    div a{
        color: red;
    }
</style>
<body>

    <div>
        <a href="">这是a标签</a>
        <li>
            <ol><a href="">第二个a标签</a></ol>
        </li>
    </div>
</body>
</html>

展示

2、子代选择器

子代选择器只要满足选择器2只选择儿子层不会向下寻找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    1. 子代选择器 只要满足选择器2只选择儿子层 不会向下寻找
    */
    div>a{
        color: red;
    }
</style>
<body>

    <div>
        <a href="">这是a标签</a>
        <li>
            <ol><a href="">第二个a标签</a></ol>
        </li>
    </div>
</body>
</html>

展示

3、并集选择器

可以给多个标签设置相同的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    1. 可以给多个标签设置相同的样式
    */
    div,a{
        color: red;
    }
</style>
<body>

    <div>
        <a href="">这是a标签</a>
        <li>
            <ol><a href="">第二个a标签</a></ol>
        </li>
    </div>
</body>
</html>

展示

4、交集选择器

找同时满足多个选择器的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    a.A{
        color: red;
    }
</style>
<body>

    <div class="box">
        <a href="" class="A">这是a标签</a>
        <li>
            <ol><a href="">第二个a标签</a></ol>
        </li>
    </div>
</body>
</html>

展示

5、hover伪类选择器

选中鼠标悬停在元素上的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>

    a:hover{
        color: red;
    }
</style>
</head>
<body>

    <div class="box">
        <a href="" class="A">这是a标签</a>
        <li>
            <ol><a href="">第二个a标签</a></ol>
        </li>
    </div>
</body>
</html>

展示

2、背景相关属性

属性	说明	备注
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	背景平铺取值 1. repeat：水平和垂直方向都平铺 2. no-repeat 不平铺 3. repeat-x 沿着水平方向 x轴平铺 4. repeat-y 沿着水平方向y轴平铺
background-position		注意点: 方向名词取值和坐标取值时可以混用的，第一个取值表示水平方向，第二个取值表示垂直
背景属性连写	举例 background：color image repeat position

3、元素的显示模式

属性	说明	备注
块元素	div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
行内元素	a、span 、b、u、i、s、strong、ins、em、del
行内块元素	input、textarea、button、select
元素显示模式转换

4、水平居中方法居中

5、CSS特性

1、继承性

特性：子元素有默认继承父元素样式的特点（子承父业）常见继承属性有

coror
font-style font-weight font-size font-family
text-indent text-align
可以通过调试工具来判断是否继承
好处时可以在一定的程度上减少代码

2、层叠行

给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

6、练习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } *
        ul{
            list-style: none;
        }

         li{
            display: inline-block;
            width: 80px;
            height: 50px;
            background-color: #ff0000;
            line-height: 50px;

        }
        li:hover{
            background-color: #ffa500;
        }
        li a{
            color: black;


            text-decoration: none;
        }

    </style>
</head>
<body>
    <ul>
        <li><a href="">导航栏1</a></li>
        <li><a href="">导航栏2</a></li>
        <li><a href="">导航栏3</a></li>
        <li><a href="">导航栏4</a></li>

    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        ul{
            list-style: none;
        }

         li{
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: #ff0000;
            line-height: 50px;

          
        }
        li a{
            color: black;
            text-decoration: none;
            display: inline-block;
            width: 120px;
            height: 58px;

            }
            .one{
                background-image: url(./images/bg1.png) ;
            }
            .two{
                background-image: url(./images/bg2.png) ;
            }
            .three{
                background-image: url(./images/bg3.png) ;
            }
            .four{
                background-image: url(./images/bg4.png) ;
            }
            .one:hover {
            background-image: url(./images/bg5.png);
        }

        .two:hover {
            background-image: url(./images/bg6.png);
        }

        .three:hover {
            background-image: url(./images/bg7.png);
        }

        .four:hover {
            background-image: url(./images/bg8.png);
        }

    </style>
</head>
<body>
    <ul>
        <li><a href="" class="one">导航栏1</a></li>
        <li><a href="" class="two">导航栏2</a></li>
        <li><a href="" class="three">导航栏3</a></li>
        <li><a href="" class="four">导航栏4</a></li>

    </ul>
</body>
</html>

孙小明的测试修炼手册

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-css选择器进阶及三大特性

1. 后代选择器只要满足选择器2都会被设置css, 所以后代和后后代都会设置成红色。给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效。后代选择器只要满足选择器2都会被设置css, 所以后代和后后代都会设置成红色。1. 子代选择器只要满足选择器2只选择儿子层不会向下寻找。特性：子元素有默认继承父元素样式的特点（子承父业）常见继承属性有。子代选择器只要满足选择器2只选择儿子层不会向下寻找。1. 可以给多个标签设置相同的样式。可以给多个标签设置相同的样式。
复制链接

扫一扫