CSS3中常用的几种选择器

css中几种常用的选择器

1.通配符

*{
            margin:0;
            padding:0;
        }

因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前

2.id选择器

#first{
            color:red;
        }
<div id="first">我是id选择器</div>

id选择器 调用css样式时需要用#
不推荐使用id选择器
以为id是唯一性的且不能共享 容易与js冲突

3.类选择器

.second{
            color:green;
        }
<div class="second">我是类选择器</div>

类选择器是使用次数最多的选择器
他可以共享使用切不会冲突

4.后代选择器

.second div{
            color:orange;
        }
<div class="second">我是类选择器
        <div>我是后代选择器</div>
    </div>

只要是(“second”)的后代都会跟随父元素的改变而改变

5.并集选择器

.one,.two{
            color:orange;
        }
<div class="one">我是并集选择器</div>
    <divc class="two">我想一起变色</div>

注意点:两个类名之间需要添加英文模式下的,

6.交集选择器

div.c2{
            color:red;
        }
<div>
        <div>我是儿子1</div>
        <div class="c2">我是儿子2</div>
        <div class="c3">我是儿子3</div>
    </div>

举例说明:
既是div又是 c2才会变

7.子选择器

<style>
        div>.c2{
            width:100px;
            height:100px;
            boder:2px solid black;
        }
    </style>
<div>我是父元素
            <div class="c2">我是儿子2</div>
            <div class="c2">我是儿子3
                <div class="c2">我是孙子3
            </div>
        </div>

只有亲儿子变 其余不变

总结

总结

CSS选择器用于选择HTML文档的元素,并为其应用样式。CSS选择器可以根据元素的标签名、类名、ID、属性等进行选择。以下是常见CSS选择器及其特点: 1. 标签选择器(Tag Selector):使用HTML元素的标签名作为选择器,如 `p`、`h1`。标签选择器会选择所有匹配的元素,并将样式应用于它们。 2. 类选择器(Class Selector):使用类名作为选择器,以点`.`开头,如 `.my-class`。类选择器可以选择具有相同类名的元素,并为它们应用样式。一个元素可以有多个类名,以空格分隔。 3. ID选择器(ID Selector):使用元素的ID属性作为选择器,以井号`#`开头,如 `#my-id`。ID选择器用于选择具有唯一ID的元素,并为其应用样式。每个页面的ID应该是唯一的。 4. 属性选择器(Attribute Selector):使用元素的属性作为选择器,如 `[type="text"]`。属性选择器可以根据元素的属性值来选择元素,并为其应用样式。 5. 后代选择器(Descendant Selector):使用空格分隔不同元素,选择后代元素。例如,`div p` 可以选择所有在 `div` 元素内的 `p` 元素。 6. 子元素选择器(Child Selector):使用 `>` 符号选择直接子元素。例如,`ul > li` 可以选择 `ul` 元素下的直接子元素 `li`。 7. 伪类选择器(Pseudo-class Selector):用于选择特定的元素状态或位置,如 `:hover`、`:first-child`。伪类选择器可以根据元素的动态状态或位置来选择元素,并为其应用样式。 8. 伪元素选择器(Pseudo-element Selector):用于选择元素的特定部分或生成的内容,如 `::before`、`::after`。伪元素选择器可以在元素的前后插入内容,并为其应用样式。 这些是CSS常用选择器,各自具有不同的特点和用途,可以根据需要选择合适的选择器来应用样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大斗师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值