css选择器

kclnb

于 2022-11-15 17:12:47 发布

阅读量212

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_74071644/article/details/127868272

版权

1、元素选择器

<style>
    p{
        要更改的样式
}
</style>
<body>
        <p>要更改样式的内容</p>
</body>

2、id选择器


<style>
    #id{
        要更改的样式
}
</style>
<body>
        <p id="">要更改样式的内容</p>
</body>

3、类选择器


<style>
    .class{
        要更改的样式
}
</style>
<body>
        <p class="">要更改样式的内容</p>
</body>

4.通配选择器


<style>
    *{
        要更改的样式
}
</style>
<body>
        <p>要更改样式的内容</p>
</body>

二、复合选择器

1.后代选择器

可以一层一层的包含下去


<style>
    ul li{
        要更改的样式
}
</style>
<body>
       <ul>
        <li>要更改样式的内容</li>
       </ul>
</body>

有相同的标签时可以用类选择器或id选择器来定义



<style>
    .nav li a{
        要更改的样式
}
</style>
<body>
       <ul>
        <li>...........</li>
        <li><a herf="#">..........</a></li>
       </ul>
       <ul class="nav">
        <li><a herf="#">要更改样式的内容</a></li>
        <li>................</li>
        <li>................</li>
        <li>................</li>
        <li>................</li>
       </ul>
</body>

2.子元素选择器

只选择最近一级的子元素



<style>
    div>a{
        要更改的样式
}
</style>
<body>
       <div>
            <a herf="#">更改样式的内容</a>
            <p>
                <a herf="#">...........</a>
            </p>
        </div>
</body>

3.并集选择器

同时选中对应选择器的元素




<style>
    div,p,.nav li a{
        要更改的样式
}
</style>
<body>
       <div>要更改样式的内容</div>
       <p>要更改样式的内容</p>
       <ul>
        <li>...........</li>
        <li><a herf="#">..........</a></li>
       </ul>
       <ul class="nav">
        <li><a herf="#">要更改样式的内容</a></li>
        <li>................</li>
        <li>................</li>
        <li>................</li>
        <li>................</li>
       </ul>
</body>

4.链接伪类选择器（需按照顺序）

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

5.focus伪类选择器（用于选取获得焦点的表单元素）

input:focus{background-color:yellow}

kclnb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css选择器

a:active 选择活动链接（鼠标按下未弹起的链接）有相同的标签时可以用类选择器或id选择器来定义。a:visited 选择所有已被访问的链接。a:hover 选择鼠标指针位于其上的链接。a:link 选择所有未被访问的链接。同时选中对应选择器的元素。可以一层一层的包含下去。只选择最近一级的子元素。
复制链接

扫一扫