css(list-style属性和三大特性)

雯雯紫云府

已于 2024-06-17 23:43:50 修改

阅读量711

点赞数 10

文章标签： css 前端

于 2024-06-17 23:43:30 首次发布

本文链接：https://blog.csdn.net/wenwenzi__/article/details/139756929

版权

1.list-style属性

1.1list-style-type

.nav{

list-style-type: none; /*无标记1. 去掉小圆点 */

list-style-type: disc; /*默认。标记是实心圆。*/

list-style-type: circle; /*默认。标记是实心圆。

list-style-type: square; /* 3.实心方块 */

}

1.2list-style-position

.nav{

list-style-position: inside; /*列表项目标记放置在文本以内，且环绕文本根据标记对齐。/

list-style-position: outside; /*默认值。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/

}

1.3 list-style-image

.nav{

list-style-image: url(./tubiao.png); /*图像的路径。默认。无图形被显示。 */

}

2.CSS 三大特性

2.1 CSS层叠性

所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。所谓层
 叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 */ 
        #hot{
            color: orange;
        }
        .con{
            color: red;
        }
        .main{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="con main" id="hot">王者荣耀策划道歉 承认机制缺陷 承认改进</div>
</body>
</html>

2.2 CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*继承:字体大小 颜色可以继承除a以外 a标签的颜色不继承 line-height*/
        /* 下面的属性就不具有继承性:边框、外边距、内边距、背景、定位、元素高属性 */  
        .father{
            font-size: 50px;
            color: red;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">div元素</div>
        <a href="" class="son2">链接元素</a>
    </div>
    <p>
        div元素链接元素a 
    </p>
</body>
</html>

2.3 CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          /* 浏览器默认样式<继承的样式<通配符选择器<标签选择的样式<id选择器<行内样式<important*/
        #main{
            color: purple;
        }
        *{
            color: yellow;
          }
        .father{
            color: blue;
        }
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="con" id="main" style="color: aqua;">
            你是否在深夜辗转难眠-你在思考？你的人生？你的灵魂伴侣？还是接下来的路？
        </div>
    </div>
</body>
</html>

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

比如的例子：

选择器	权重
div ul li	0,0,0,3
.nav ul li	0,0,1,2
a:hover	0,0,1,1
.nav a	0,0,1,1
#nav p	0,1,0,1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签 0,0,0,1 */
        /* div ul li 0,0,0,3 */
        /* 类 0,0,1,0  */
        /* .main 0,0,1,0 */
        /* id */
        /* .mian ul li span 0,0,1,3  */
        /* #con 0,1,0,0  */
        /* 行内 1,0,0,0  */
        /* ul li a span{
            color: red;
        }
        ul li a {
            color: blue;
        } */ 
        .nav li a span {
            color: red;
        }
        /* 当鼠标悬停时字体颜色为蓝色 */
        ul li span:hover{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- <div class="main">
        <ul>
            <li><span>你好</span></li>
        </ul>
    </div> -->
    <ul>
        <li>
            <a href="">
                <span>业务展示</span>
            </a>
        </li>
    </ul>
</body>
</html>