CSS选择器——(一)基本选择器及扩展

最新推荐文章于 2024-05-18 15:14:09 发布

_4xxxx_

最新推荐文章于 2024-05-18 15:14:09 发布

阅读量223

点赞数

分类专栏： CSS基础文章标签： css3 css

本文链接：https://blog.csdn.net/Jackson4X/article/details/104595669

版权

CSS基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css选择器的规范地址：https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
css选择器最新的规范地址：https://www.w3.org/TR/selectors

1.基本选择器

基本选择器包括：通配符选择器、元素选择器、类选择器、ID选择器、后代选择器。具体用法见下面代码：

<style>
    /* 通配符选择器，用 * 表示 */
    * {
        margin: 0;
        padding: 0;
        border: none;
    }
    /* 元素选择器，直接用元素名 */
    div {
        margin-top: 20px;
        margin-left: 20px;
        border: 1px solid green;
        width: 200px;
        text-align: center;
    }
    /* 类选择器，用 . 表示 */
    .first {
        color: lightseagreen;
        font-size: 20px;
    }
    /* ID选择器，用 # 表示 */
    #second {
        color: blueviolet;
    }
    .third {
        background-color: deeppink;
    }
    /* 后代选择器，用空格表示 */
    .third li {
        font-size: 15px;
        color: blue;
        /* 去掉li前面的圆点 */
        list-style-type: none;
    }
</style>
/*body部分*/
<body>
	<div>
	    <p class="first">类选择器</p>
	    <h5 id="second">ID选择器</h5>
	    <ul class="third">
	        <li>后代选择器1</li>
	        <li>后代选择器2</li>
	    </ul>
	</div>
</body>

上面代码的结果图如下：

2.基本选择器的扩展

1.子元素选择器（也称为直接后代选择器，即儿子级别）：用 > 表示
2.相邻兄弟选择器：用 + 表示
3.通用兄弟选择器：用 ~ 表示
4.分组选择器：用 , 表示
具体使用看以下代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 分组选择器 ，用 , 表示*/
    #fulei,#fulei2 {
       border: 1px solid green; 
       width: 200px;
       height: 300px;
       margin-left: 20px;
       margin-top: 20px;
       float: left;
    }
    /* 直接后代选择器，用 > ，儿子级别*/
    #fulei > .son1 , #fulei2 > .son5 {
        margin-top: 20px;
        font-size: 25px;
        border: 1px solid red;
    }
    /* 相邻兄弟选择器，用 + ，这里要注意的是 紧跟
    如果.son2改成.son3，页面中son3的颜色不会变成粉色，字体大小也不会变
    */
    #fulei > .son1 + .son2 {
        font-size: 30px;
        color: pink;
    }
    /* 通用兄弟选择器，用 ~ ,能匹配到.son1的所有.son兄弟*/
    #fulei .son1 ~.son {
        font-size: 40px;
        color: indigo;
    }
</style>
/*body部分*/
<body>
    <div id="fulei">
        <p class="son1">son1</p>
        <p class="son2">son2</p>
        <p class="son3">son3</p>
        <p class="son">son3</p>
        <p class="son">son4</p>
    </div>
    <div id="fulei2">
        <p class="son5">son5</p>
    </div>
</body>

结果图如下图所示

这是我第一次写博客，有写的不对的地方，请大家指教，谢谢，撒花！！

_4xxxx_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器——(一)基本选择器及扩展

css选择器的规范地址：https://www.w3.org/TR/2011/REC-css3-selectors-20110929/css选择器最新的规范地址：https://www.w3.org/TR/selectors 1.基本选择器基本选择器包括：通配符选择器、元素选择器、类选择器、ID选择器、后代选择器。具体用法见下面代码：<style> /* 通配符选择器，...
复制链接

扫一扫