HTML学习-day4 CSS常用选择器及权重叠加

最新推荐文章于 2024-09-28 14:06:20 发布

study365day

最新推荐文章于 2024-09-28 14:06:20 发布

阅读量177

点赞数

分类专栏： html学习笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_41888318/article/details/119344719

版权

html学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.基础选择器

1.1 标签选择器

可以将某一类标签全部选出来

div {
    color: red;
    width: 100px;
    height: 50px;
}

1.2 类选择器

给元素一个类名，设置样式时.类名，可以给一个或多个元素指定样式，一个元素可以加多个类名获取多种样式，相当于人的名字，可以多次重复使用

<style>
    .red {
        color: red;
    }
    .myfont {
        font-size:14px;
    }
</style>

<div class="red"></div>
<p class="red myfont">好运来</p>

1.3 id选择器

与类选择器类似，但元素id是唯一的，相当于人的身份证号，不能重复

<style>
    #firstdiv {
        color: red;
    }
</style>

<div id="firstdiv">1</div>
<div>2</div>
<div>3</div>

1.4 通配符选择器

选择页面内所有元素，用于最开始清除页面元素原有样式

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

2.复合选择器

2.1 后代选择器

父元素+子元素的组合，外层标签写在前面，内层标签写在后面，中间空格隔开方便正确选择元素

<style>
ol li {
    color: pink;
}
</style>

<ol>
    <!--变成粉色-->
    <li>我是ol的孩子</li>
</ol>

<ul>
    <li>我是ul 的孩子</li>
</ul>

2.2 子元素选择器

只选择离它的子元素，即下一级元素

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

<div class="nav">
    <a href="#">我是儿子</a>

    <p>
    <!--不变色-->
    <a href="#">我是孙子</a>
    </p>
</div>

2.3 并集选择器

选出多个满足条件的标签

div,
p,
.pig li {
    color: pink;
}

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>

2.4 链接伪类选择器

用于向某些选择器添加特殊效果，写的时候按照lvha顺序

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

<style>

a:link {
    color: #333;
}

a:visited {
    color: orange;
}

a:hover {
    color: skyblue;
}

a:active {
    color: green;
}

</style>


<a href="#">小猪佩奇</a>

2.5 focus伪类选择器

把获得光标的input表单元素选取出来

<style>
input:focus {
    background-color: pink;
    color: red;
}
</style>

<input type="text">
<input type="text">
<input type="text">

3.权重计算公式

选择器	权重计算公式
继承或者*	0,0,0,0
标签选择器	0,0,0,1
类/伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式表style=""	1,0,0,0
!important	无穷大

多个选择器组合时，就出现了权重叠加的情况，举个栗子

ul li——权重为0,0,0,1+0,0,0,1=2

.nav li——权重为0,0,1,0+0,0,0,1=11

a:hover——权重为0,0,0,1+0,0,1,0=11

注意：继承权重为0，比较权重时要看元素有没有被选中

<style>
    p {
        color: green;
    }
    .demo {
        color: red;
    }
</style>

<div class="demo">
    <!--p的颜色为绿色-->
    <p>111111</p>
</div>