CSS选择器

最新推荐文章于 2024-09-19 11:25:25 发布

11BZou

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量141

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_52159101/article/details/109907403

版权

选择器

选择器: 选中元素

简单的选择器

ID选择器: 选中的是对应id值的元素

#test{
    color: blue;
}

<p id="test"></p>

元素选择器

p{
	color: red;
}

<p>lorem.</p>

类选择器

.name{
    color: red;
}

<p class="name">lorem.</p>

通配符选择器

*,选中所有元素.

*{
	color: red;
}

	<!--全部选中-->
	<h1>lorem.</h1>
	<p>lorem.</p>

属性选择器

[ ],根据属性名和属性值选中元素.

[href]{
    color: red;
}
[href="http://www.baidu.com"]{
    color: red;
}
/*选中class属性中带有b的元素*/
[class~="b"]{
    color: red;
}

<a class="a b c d" href="http://www.baidu.com">
    百度
</a>

伪类选择器

选中某些元素的某种状态.

link:超链接未访问时的状态
visited:超链接访问过后的状态

a:link{
    color: red;
}
a:visited{
    color: green;
}

hover:鼠标悬停时的状态

/* 选中鼠标悬停时的a元素 */
a:hover{
    color: red;
}

active:激活状态,鼠标按下状态

a:active{
    color: red;
}

书写顺序,爱恨法则:love hate

伪元素选择器

before

after

span::before{
    content: "《";
    color: red;
}
span::after{
    content: "》";
    color: red;
}

<body>
	<span>HTML</span>
</body>

页面显示结果:

选择器的组合

并且

p.red{
    color: red;
}

	<p class="red">lorem.</p>

后代元素–空格

div li{
    color: red;
}

<div>
    <ul>
        <li>lorem.</li>
    </ul>
</div>

子元素–>

div>ul{
    color: red;
}

<div>
    <ul>
        <li>lorem.</li>
    </ul>
</div>

相邻兄弟元素–+

该元素相邻下面元素

.special{
    color: red;
}
.special+li{
    color: blue;
}

<div>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li class="special">Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
</div>

页面显示结果:
相邻兄弟元素

兄弟元素–~

该元素下面所有元素

与相邻兄弟元素用法相同

页面显示结果:
兄弟元素

选择器的并列

多个选择器,用逗号分隔

语法糖

.red,p{
    color: red;
}

<div class="red">lorem.</div>
<p>lorem.</p>

11BZou

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫