CSS常用选择器

最新推荐文章于 2023-12-19 14:29:48 发布

符号丶

最新推荐文章于 2023-12-19 14:29:48 发布

阅读量326

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/qq_35833753/article/details/76021176

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、基础选择器

class 选择器

/*选择并设置 class="intro" 的元素的样式*/
.intro { 
    background-color:yellow;
}

id选择器

/*为 id="firstname" 的元素设置样式*/
#firstname { 
    background-color:yellow;
}

标签选择器

/*选择并设置所有 <p> 元素的样式*/
p { 
    background-color:yellow;
}

二、常用的组合选择器

并集选择器：使用”,”（逗号）连接两个选择器

/*选择并设置所有 <h1> 样式和所有 <p> 元素的样式*/
h1,p { 
    background-color:yellow;
}

后代选择器：使用” “（空格）连接

/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/
div p { 
    background-color:yellow;
}

子代选择器：使用”>”连接

<style type="text/css">
/*选取父元素是 <div> 元素的每个 <strong> 元素,结果是只有第一行<strong> 元素内文本变红*/
    div>strong {
        color: red;
    }
</style>
<div>
    This is <strong>very</strong> <strong>very</strong> important. <br>
    This is <em>really <strong>very</strong></em> important.
</div>

相邻选择器：使用”+”连接

/*选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色*/
div+p { 
    background-color:yellow;
}

通配符选择器：”*”

/*选择页面内所有元素，并设置内外边距为0*/
* {
    margin: 0px;
    padding: 0px;
}

三、常用的伪类选择器

:hover 选择器

/*当鼠标悬停在<a>之上时，设置背景颜色为黄色*/
a:hover{ 
    background-color:yellow;
}

:nth-child() 选择器

<style>
/*使第偶数个<li>变成红色*/
li:nth-child(2n) {
    color: red;
}
</style>
--------------------------------------
<ul>
    <li>黑色</li>
    <li>红色</li>
    <li>黑色</li>
    <li>红色</li>
    <li>黑色</li>
    <li>红色</li>
</ul>

<html>
<head>
    <style> 
        /*规定属于其父元素的第二个子元素的每个 p 的背景色*/
        p:nth-child(2) {
            background:red;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1> <!--第一个子元素-->
    <p>第一个段落。(红色)</p><!--第二个子元素-->
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
</body>
</html>

:first-child 选择器和 :last-child 选择器

/*选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式，相当于:nth-child(1)*/
p:first-child { 
background-color:yellow;
}

/*指定属于其父元素的最后一个子元素的 p 元素的背景色，相当于：:nth-last-child(1)*/
p:last-child { 
background:#ff0000;
}

符号丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录