欢迎光临
我们一起进阶

python-基础css(二)css选择器

扫码或搜索:沉默王二
发送 290992
即可立即永久解锁本站全部文章

css选择器
一:标签选择器
给某一类标签定义某种样式,该类标签都会使用这种样式

<head>
    <style>
        h1{            #给h1标签定义的样式
            color: red;
            font-size: 30px;
        }
        div{            #给div标签定义的样式
            color:green;
            font-size: 20px;
        }
        input[type="text"]{     #input的text属性加样式
            color: palevioletred;
            width: 300px;
        }
    </style>

二:class选择器
在style里面定义一个.cssname{css样式} 在标签里用class=”cssname”来引用

<head>
    <style>
        .testcss{
            background-color: pink;
            font-size: 20px;
        }
#在body里的标签里使用
    <div class="testcss">testcss div</div>

三:id选择器
定义一个#idname样式,在标签里用id=”idname”来使用这个标签

<style>    
        #i1{
            color: deepskyblue;
            font-size: 40px;
        }
#标签里面使用
    <span id="i1">i1 span</span>

四:层级选择器
标签里嵌套着标签,对嵌套的标签加样式。下一级用空格表示

style{
        div span {
            color: yellow;
            font-size: 30px;
        }
}
#标签里面应用
    <div>
        <span>div span</span>  #用到了样式
    </div>
    <div>div</div>  #无变化

五:组合选择器
多个选择器,用同一个样式,用逗号分隔

div,p,.c1,#id1 {
            color: red;
            font-size: 30px;
        }
#标签里应用
    <div>div</div>
    <p>p</p>
    <span class="c1">span</span>
    <div id="id1">div</div>

注意:如果同时有多个选择器,那么浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

标签选择器的权值为1,class选择符的权值为10,ID选择符的权值最高为100。

<style>
        div{color: red;}
        .c1{color: blue;}
应用:
    <div class="c1">div</div>
#显示是蓝色,因为div标签的权重小于class的权重
赞(2) 打赏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小白学堂,学的不止是技术,更是前程

关于我们免责声明

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏