CSS选择器

最新推荐文章于 2022-11-05 11:35:29 发布

肉嘟嘟_

最新推荐文章于 2022-11-05 11:35:29 发布

阅读量389

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cq7421/article/details/75267266

版权

CSS基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1关系选择器

（1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子...........

写法：E（元素） F（父元素）

案例

.content a{
    font-size: 30px;
}
<body>
    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>
    <divclass="content">
        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
        <ahref="http://www.huadianedu.com">前往现场</a>
    </div>
    <ahref="http://www.huadianedu.com">查看原文</a>
</body>

（2）子元素选择器：某一个元素选中直接后代元素。

写法：E > F（“>”英文状态输入下输入）

<styletype="text/css">
    .content > a{
        font-size: 30px;
    }
</style>
   <h1>中央气象台继续发布高温橙色预警局地超40度</h1>
    <divclass="content">
        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
        <ahref="http://www.huadianedu.com">前往现场</a>
    </div>
    <ahref="http://www.huadianedu.com">查看原文</a>
</body>

2并选择器

将相同的样式放在一起，类名直接用英文逗号分隔。

写法：E , E （中间用英文的逗号分隔）

案例：

.div1,.div2{
    position: relative;
    width: 100px;
    height: 100px;
}
.div1{
    border: 1px solid yellow;
}
.div2{
    border: 1px solid blue;
}
<body>
    <divclass="div1 ">我是div1</div>
    <divclass="div2">我是div2</div>
</body>

3通配符选择器

通配符选择器可以选中页面所有的标签

写法：*{}

案例：

<styletype="text/css">
    *{
        padding: 0;
        margin: 0;
    }

</style>
<body>
    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>
    <divclass="content">
        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>
        <ahref="http://www.huadianedu.com">前往现场</a>
    </div>
    <ahref="http://www.huadianedu.com">查看原文</a>
</body>

注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。

4兄弟选择器

（1）写法：E + F 选中最近的一个“弟弟”元素。不选中自己。

.go-to+a{
   font-size: 20px;
}
<body>
    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>
    <divclass="content">
        <ahref="http://www.huadianedu.com">前往现场</a>
        <a  class="go-to"href="http://www.huadianedu.com">前往现场1</a>
        <ahref="http://www.huadianedu.com">前往现场2</a>
        <ahref="http://www.huadianedu.com">前往现场3</a>
    </div>
</body>

（2）写法：E ~ F 选中所有的“弟弟”元素，不选中自己

案例：

<styletype="text/css">
    div{
        min-height: 30px;
        max-width: 300px;
        background-color:white;
        margin-left: 50px;
        border: 1px solid red;
    }
    #myself  ~ div{
        background-color:yellowgreen;
    }
</style>
<divid="myself">
    <p>我</p>
    <div>
        <p>大儿子</p>
        <div>大孙子</div>
        <div>二孙子</div>
    </div>
    <div>二儿子</div>
    <div>小儿子</div>
</div>
<div>二弟</div>
<div>三弟</div>

5伪类、伪元素选择器

1伪类选择器：条件一、根据元素不同的状态，自动选择不同的样式。或条件二、直接添加一个class（类），给这个class设定特殊的样式

li:first-child

a:hover:鼠标划过的时候添加样式

a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）

a:link :链接地址未被访问时候添加的状态。必须设置href属性。

a:vistied：链接地址点击之后添加的样式。必须设置href属性

input:focus :拥有键盘输入获取焦点时候添加的样式

2伪元素选择器：

（2.1）需要设置特殊效果的内容放到一个元素（标签）里面span

（2.2）在添加一个class，对class设置特殊样式。

P:first-letter、p:first-line、p:before、p:after

E:before

li:after{
    content:"。";
    color: blue;
}

肉嘟嘟_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

选择器
复制链接

扫一扫

专栏目录