CSS 的选择器

CSS的量大重点

属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式

标签选择器

根据标签名找到标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常见选择器</title>

    <style>
      /*-标签选择器-*/
        div{
            color: red;
        }
        p{
            color: blue;
        }

    </style>
</head>
<body>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>

<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>

</body>
</html>

类选择器

image.png

id 选择器

image.png

并列选择器

相当于 OC 中的“或”,只要满足一个条件即可


image.png

image.png

复合选择器

相当于 OC 的“与”


image.png

后代选择器

image.png

直接后代选择器

image.png

相邻兄弟选择器

image.png

属性选择器

image.png

image.png

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

推荐阅读更多精彩内容

  • 选择器做为CSS的灵魂一直是一个不可缺少的东西,使用CSS选择器的好处不用多说,对于整个文档的可读性 可修改性 以...
    熊蛋子17阅读 3,237评论 0 1
  • CSS 的常用选择器有: 通用选择器 * , id选择器 # , 类选择器 . , 元素选择器, 后代选择器, 兄...
    Ertsul阅读 1,677评论 0 1
  • 一、样式类型 1、行间 我的行间CSS样式。 2、内联 h1{font-size:12px; color:#000...
    宁骥阅读 2,656评论 0 0
  • 1.标签选择器、类选择器、id选择器、后代选择器 2.伪类 3.选择器的优先级别 4.html标签的类型 5.cs...
    阿凡提说AI阅读 1,365评论 0 0
  • 昨晚看完了中文版的序言,电子版共五百四十二页。是一位中国留学生,查理的良师益友,查理的投资合伙人李录所写,他无比崇...
    goodbyed阅读 2,472评论 0 0