css选择器

一：元素选择器

 元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）。

如下图所示，就是为div元素设置CSS样式的width和height属性。

    div{
        width: 300px;
        height: 300px;

二：class选择器（类型选择器）：

该选择器通过绑定HTML元素上已设置的class标签进行设置对应的CSS样式。
以 .（class选择符前缀）加上对应的class名称组合成选择器的元素符号。
例如，要选择页面上classs属性为aa的元素：

.aa{
        width: 300px;
        height: 300px;
        }
    </style>
</head>
<body>
<div class="aa" >
</div>

三：id选择器：

该选择器通过绑定HTML元素上已设置的唯一id标签进行设置对应的CSS样式。
以#（id选择符前缀）加上对应的id名称组合成选择器的元素符号。

#aa{
        width: 300px;
        height: 300px;
        }
    </style>
</head>
<body>
<div class="aa" >
</div>

四：后代选择器：
 选中某个父级下对应的所有子级，并针对该子级设置CSS样式。
后代选择器设置的CSS样式不会影响到父级。
父级和子级之间需要用空格隔开。
后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高

.father .baby{
    color:red;
}
    .family .mother .baby{
    color:blue;
}

五：子元素选择器：
 子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。
后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
父元素和子元素之间需要用 > (子结合符) 隔开。
在这里插入图片描述

div > span{
    width:80px;
    height:90px;
}

六：相邻选择器：
 选中对应元素的下一个兄弟元素。
所涉及的相邻兄弟元素必须是该元素的同级元素。
所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
元素A和对应的相邻兄弟元素之间需要用 + 隔开。

#aa+div{
    width:80px;
    height:90px;
}

 

posted @ 2021-11-13 20:42  四水呐  阅读(114)  评论(0)    收藏  举报