css选择器

2024-04-27 15:09:53

字体：大中小

来源：转载

供稿：网友

CSS选择器分为以下几类：元素选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器，类选择器，ID选择器

一.元素选择器

最常见的css选择器就是元素选择器，平时构建html页面用到的p、h1、div等元素选择器

p{ font-size:15px;}div{ color:#e0e0e0;}

这里写图片描述

二.关系选择器

关系选择器包括后代选择器，子元素选择器，相邻兄弟选择器 1.后代选择器

//意味着被class名为part1的元素包裹着的所有span元素的字体颜色设置为红色.part1 span{ color:red;}<div class="part1"> sdsdsdsd <span>make a world</span> <div> 我不会变红 <span>i want to make a world</span> </div></div><div> sdsdsdsd <span>make a world</span> <div> 我不会变红 <span>i want to make a world</span> </div></div>

这里写图片描述 2.子元素选择器

//只有class名为part1的子元素span标签的字体颜色被设置.part1 span{ color:red;}<div class="part1"> sdsdsdsd <span>make a world</span> <div> 我不会变红 <span>i want to make a world</span> </div></div><div> sdsdsdsd <span>make a world</span> <div> 我不会变红 <span>i want to make a world</span> </div></div>

这里写图片描述 3.相邻兄弟选择器

//h1的相邻元素上边距设置为5pxh1 + p { margin-top:50px;}<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p></body>

这里写图片描述

三.属性选择器

这里写图片描述注：图片来自w3cschool官网，详细内容如下：http://www.Vevb.com.cn/css/css_syntax_attribute_selector.asp

这里写图片描述

四.伪类选择器和伪元素选择器

伪类选择器和伪元素选择器

五.选择器优先级

优先级由上往下！important（权重：10000）直接在标签内设置样式（权重：1000） <span style="color:red;"></span> ID选择器（权重：0100）类选择器和伪类选择器（权重：0010）元素选择器和伪元素选择器（权重：0001）通配选择器*对特殊性没有贡献（权重：0000）

子元素选择器优先级（权重+权重）.firstDiv p{}的值为（10+1=11）

上一篇：理解vue实现原理，实现一个简单的Vue框架

下一篇：两种方式安装sublime插件 mac