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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

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