python之CSS选择器笔记


  • 概述

目的:使用CSS是自己的网页变得更加美观!(可能有部分代码不规范,毕竟没有系统学过,有问题请指出)

正文

这里主要写一些CSS选择器的及具体用法,语法规则请看后面的手册表格!

class中的空格是为了给html标签同时赋予多个class类名

<div class="box1 box2 textbox"></div>

这个div就被同时赋予了box1、box2、textbox这三个class类名,中间使用空格隔开。

接下来演示如何选取多类名

<!DOCTYPE html>
<html>
<head>
<style>
.row .brand .title
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>

<div class="carousel-item red white-text bg-cover about-cover">
<div class="container">
<div class="row">
<div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
<div class="brand">
<div class="title center-align">
人生匆匆,来者是客!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col s10 offset-s1">
<div class="title center-align">python笔记之GIF的制作</div>
</div>
</div>
</body>
</html>

效果如图:

2020022622373120200226223731

解释:以下为css,解释符号#(python用习惯了)

<style>
.row .brand .title  #选择class='row'的所有节点下的class=‘brand’的所有节点下的class='title'节点
{
background-color:yellow;   #背景为黄色
}
</style>

注意:最好选择第一个类名,第二个可能会没有效果,原理不知

如果我们的CSS过长,可以使用外部引入的方式,这样可以是我们的html更加的简洁!

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8" />
        <title>HTML引入JS/CSS的三种方式</title>
        <!--引入外部的css文件-->
        <link rel="stylesheet" href="css/index.css" />

        <!--引入外部的js文件-->
        <script type="text/javascript" src="js/index.js" ></script>


        <!--在head中添加js控制-->
        <script type="text/javascript">
            function onClickB1() {
                document.getElementById("b1").innerHTML = "HEAD";
            }
        </script>


        <!--在head中添加css修饰-->
        <style type="text/css">
            #j2 {
                background-color: #808080;
            }
        </style>

    </head>

    <body bgcolor="#F5F5F5">
        <div id="j1" class="divs">
            <button id="b1" onclick="onClickB1()">在head中</button>
            <p>方式一:将js代码写在head中,如本例所示,点击按钮改变按钮的内容!</p>
            <p>
                同理,也可以将css样式写在head中,如上面的代码所示,设置j2的背景色,这里需要注意的是,其实我在外部的css文件中也设置了j2的背景色,
                所以这两处设置是冲突的,但实验证明,网页中显示的是在head中修饰的属性值,这也许就是近水楼台先得月吧!
            </p>
        </div>
        <div id="j2" class="divs"">
            <button id="b2" onclick="onClickJ2()">在body中</button>
            <p>方式二:将js代码写在body中,如本例所示,点击按钮改变div的背景色!</p>
            <p>同理,在html的body中也可以设置css样式,代码如下面所示,设置b3的文字颜色为红色。</p>
        </div>
        <div id="j3" class="divs">
            <button id="b3" onclick="gaiBian()">在外部js中</button>
            <p>方式三:将js代码写在外部js文件中,并在html文件的head中引入该js,在本例中,点击按钮改变按钮的内容,并改变div的颜色!【推荐】</p>
            <p>当然,将css通过外部文件的方式引入html是最好的,也是推荐的方式。【推荐】</p>

            <p style="background: red;"><strong>这里需要注意的是,和js不同的是,css可以直接写在组件的内部,例如在此,我将文字直接加粗,背景变红!</strong></p>
        </div>


        <!--在body中添加js控制-->
        <script type="text/javascript">
            function onClickJ2 () {
                document.getElementById("j2").style.background = "red";
            }
        </script>

        <style type="text/css">
            #b3 {
                color: red;
            }
        </style>
    </body>
</html>

.css

.divs {
    width: 100%;
    height: 250px;
    background-color: grey;
    /*margin的属性顺序是上右下左*/
    margin: 10px 10px 5px 1px;
}

#j1 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: white;
}

#j2 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: whitesmoke;
}

#j3 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: antiquewhite;
}

CSS选择器手册:

选 择 器 例  子 例子描述
.class .intro 选择 class=”intro” 的所有节点
#id #firstname 选择 id=”firstname” 的所有节点
* * 选择所有节点
element p 选择所有 p 节点
element,element div,p 选择所有 div 节点和所有 p 节点
element element div p 选择 div 节点内部的所有 p 节点
element>element div>p 选择父节点为 div 节点的所有 p 节点
element+element div+p 选择紧接在 div 节点之后的所有 p 节点
[attribute] [target] 选择带有 target 属性的所有节点
[attribute=value] [target=blank] 选择 target=”blank” 的所有节点
[attribute~=value] [title~=flower] 选择 title 属性包含单词 flower 的所有节点
:link a:link 选择所有未被访问的链接
:visited a:visited 选择所有已被访问的链接
:active a:active 选择活动链接
:hover a:hover 选择鼠标指针位于其上的链接
:focus input:focus 选择获得焦点的 input 节点
:first-letter p:first-letter 选择每个 p 节点的首字母
:first-line p:first-line 选择每个 p 节点的首行
:first-child p:first-child 选择属于父节点的第一个子节点的所有 p 节点
:before p:before 在每个 p 节点的内容之前插入内容
:after p:after 在每个 p 节点的内容之后插入内容
:lang(language) p:lang 选择带有以 it 开头的 lang 属性值的所有 p 节点
element1~element2 p~ul 选择前面有 p 节点的所有 ul 节点
[attribute^=value] a[src^=”https”] 选择其 src 属性值以 https 开头的所有 a 节点
[attribute$=value] a[src$=”.pdf”] 选择其 src 属性以.pdf 结尾的所有 a 节点
[attribute*=value] a[src*=”abc”] 选择其 src 属性中包含 abc 子串的所有 a 节点
:first-of-type p:first-of-type 选择属于其父节点的首个 p 节点的所有 p 节点
:last-of-type p:last-of-type 选择属于其父节点的最后 p 节点的所有 p 节点
:only-of-type p:only-of-type 选择属于其父节点唯一的 p 节点的所有 p 节点
:only-child p:only-child 选择属于其父节点的唯一子节点的所有 p 节点
:nth-child(n) p:nth-child 选择属于其父节点的第二个子节点的所有 p 节点
:nth-last-child(n) p:nth-last-child 同上,从最后一个子节点开始计数
:nth-of-type(n) p:nth-of-type 选择属于其父节点第二个 p 节点的所有 p 节点
:nth-last-of-type(n) p:nth-last-of-type 同上,但是从最后一个子节点开始计数
:last-child p:last-child 选择属于其父节点最后一个子节点的所有 p 节点
:root :root 选择文档的根节点
:empty p:empty 选择没有子节点的所有 p 节点(包括文本节点)
:target #news:target 选择当前活动的 #news 节点
:enabled input:enabled 选择每个启用的 input 节点
:disabled input:disabled 选择每个禁用的 input 节点
:checked input:checked 选择每个被选中的 input 节点
:not(selector) :not 选择非 p 节点的所有节点
::selection ::selection 选择被用户选取的节点部分
参考链接:

文章作者: 古客
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 古客 !
评论
 上一篇
2020寒假个人成长记录 2020寒假个人成长记录
您好, 这里需要密码才能查看哦.c14864013e9ce8d6ca2c8d4b018e8e275434b50d9457daff11e67414e38a570bab13c9c78e4c3dcc2b75cd00e561624b6d92e593
2020-03-01
下一篇 
python练手之百度翻译魔改 python练手之百度翻译魔改
概述 这次练手的目的是想把百度翻译的demo改的好用一些,使其可以翻译文档并且储存起来, 前提条件: python3, 百度API (没有的可去百度开放平台, https://fanyi-api.baidu.com/api/
2020-02-25 古客