web CSS选择器

选择器

注释:选择器的用处就是会告诉浏览器网页上的哪些元素需要设置什么样的样式
  • 元素选择器(标签选择器)
    注释:根据标签的名字来从页面市中选取指定的元素
    语法:标签名{ }

  • 类选择器
    注释:根据元素的class属性值选取元素
    语法:.className{ }

  • ID选择器
    注释:根据元素的ID是行之选取元素(注意:和class属性不同,ID属性是不能重复的)
    语法:#id{ }

  • 复合选择器(交集选择器)
    注释:可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素
    语法:-选择器1选择器2{ }

  • 群组选择器(并集选择器)
    注释:可以同时使用多个选择器,多个选择器将被同时应用指定的样式
    语法:选择器1,选择器2,选择器3{ }

  • 通用选择器
    注释:可以同时选中页面中的所有元素
    语法:*{ }

  • 后代选择器
    注释:后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式
    语法:祖先元素 后代元素 后代元素{ }

  • 子元素选择器
    注释:子元素选择器可以给另一个元素的子元素设置样式
    语法:父元素>子元素{ }

  • 兄弟选择器
    注释:除了根据祖先父子关系,还可以根据兄弟关系查找元素
    语法:查找后边一个兄弟元素:兄弟元素+兄弟元素{ }
    查找后边所有的兄弟元素:兄弟元素~兄弟元素{ }

标签之间的关系

  • 祖先元素

直接或间接包含后代元素的元素

  • 后代元素

直接或间接被祖先元素包含的元素

  • 父元素

直接包含子元素的元素

  • 子元素

直接被父元素包含的元素

  • 兄弟元素

拥有相投父元素的元素

博客代码

<!DOCTYPE html>
<html>
<head>
    <title>博客</title>
    <meta charset="utf-8">
</head>

<body>
    <center>
        <a id="b" href='#a'>去底部</a>
        <a href="#name1">跳转指定位置</a>
        <h1>个人博客第二天作业</h1>
        <br><br>
        <hr>
        <br><br>
        <h2>富人碰了吃土,穷人碰了入土的玩意</h2>
        <br>
        <a href='https://baike.baidu.com/item/%E5%AE%9D%E9%A9%ACS1000rr/10946402?fr=aladdin'>宝马S1000RR百科</a>
        <br><br><br>
            <p>四缸太费油</p>
            <p>三缸不成熟</p>
            <p>双杠不好听</p>
            <p>单杠没动力</p>
            <p>大的父母不让买</p>
            <p>小的自己不想买</p>
            <p>街车不帅又太闷</p>
            <p>跑车通过性不好</p>
            <p>越野不酷</p>
            <p>踏板太娘</p>
            <img id="name1" src="picture/66.png" alt="" width="350px" height="" />
            <p>风冷的冷却不好</p>
            <p>水冷的保养太麻烦</p>
            <p>油冷的又烫腿</p>
            <p>国际档的不会骑</p>
            <p>循环档的不安全</p>
            <p>无级变速又加速不强</p>
            <p>轮胎宽了阻力大</p>
            <p>轮胎窄了不好看</p>
            <p>两轮不会压弯</p>
            <p>三轮又不敢骑</p>
            <p>四轮不像摩托车</p>
            <p>大哥</p>
            <p>你说买啥???</p>
            <img src="picture/rr.jpg" alt="" width="350px" height="" />
            <hr>
            <br><br>
            <p>友情链接:<a href="http://www.baidu.com">百度网</a>|<a href="http://www.taobao.com">淘宝网</a>|<a href="http://www.JD.com">京东网</a></p>

            <a id='a' href="#b">回顶部</a>
            <a href="https://web2.qq.com/">联系作者</a>

            
    </center>



</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,366评论 2 66
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 转载说明 一、介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入g...
    17碎那年阅读 2,487评论 0 22
  • 目录一、介绍二、渲染引擎三、解析与DOM树构建四、渲染树构建五、布局六、绘制七、动态变化八、渲染引擎的线程九、CS...
    饥人谷_米弥轮阅读 2,473评论 0 10
  • 不知不觉就过了33天,33天的时间里,慢慢变成了一个习惯。每天早上睁开眼睛,就想着今天要写一篇文章。晚上孩子都睡了...
    静静地简书阅读 203评论 0 0