CSS选择器专栏

最新推荐文章于 2024-05-23 19:22:36 发布

小猿猿q

最新推荐文章于 2024-05-23 19:22:36 发布

阅读量465

点赞数 3

分类专栏： html

本文链接：https://blog.csdn.net/qq_45091455/article/details/98034711

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我的第一篇博客：css选择器专栏

1.css基本选择器

1.1标签元素选择器

最常见的是标签元素选择器，选择器通常是某个HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html{
color:red;
}

1.2类选择器（class选择器）

选择器：.类名 {属性名:属性}
匹配：属于指定类的元素；当跟元素类型一起使用时，匹配属于指定类的特定类型的元素。

.main{
 color:red;
}

1.3ID选择器

选择器: #类名{属性:属性名}
匹配：具有指定全局属性id的元素。

#main{
 color:red;
}

1.4属性选择器

选择器:[<条件>]或<元素类型>[<条件>]
匹配：具有匹配指定条件的属性元素。

<html>
<head>
	<style type="text/css">
	a[href][title]
	{
	color:red;
	}
	</style>
</head>
<body>
	<a title="..." href="#">一个帅气的链接</a>
</body>
</html>

2.符合选择器

2.1并集选择器

选择器：<选择器>,<选择器>,<选择器>
匹配：单个选择器匹配的所有元素的并集

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>CSS并集选择器</title>
    <style>
        /*选中符合条件的所有标签*/
        .search, span, #Important {
            color: red;
        }
    </style>
</head>
<body>
    <a class="search" href="#">百度一下</a>
    <h1>我是一个h1标签</h1>
    <span>我是一个span标签</span>
    <div>
        <p>我是一个p标签</p>
        <span>我是一个span标签</span>
        <strong id="Important">我是一个强调标签</strong>
    </div>
    <p>我是一个p标签</p>
</body>
</html>

2.2交集选择器

选择器：<选择器>,<选择器>
匹配：交集符合选择器是由两个选择器直接构成的，其结果是二者元素范围的交集。

<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <style type="text/css">
            p.xxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p>我是段落</p>
        <p class="xxx">我是段落</p>
</body>
</html>

2.3后代选择器

选择器：<选择器> <选择器>
匹配：目标元素为匹配第一个选择器的元素后代，且匹配第二个选择器

<html>
<head>
<title>后代选择器<title>
	<style type="text/css">
	ul li{
	color:red
	}
	</style>
</head>
<body>
	<ul><li>我是一个无序标签</li></ul>
</body>
</html>

复杂的后代选择器：

<html>
<head>
<title>复杂的后代选择器<title>
	<style type="text/css">
	.my ul{
	color:red
	}
	</style>
</head>
<body>
	<div class="my">
	<ul><li>我是一个无序标签</li></ul>
	</div>
</body>
</html>

2.4子代选择器

选择器：<选择器> > <选择器>
匹配：目标元素为匹配第一个选择器的直接后代

<html>
<head>
<title>子代选择器<title>
	<style type="text/css">
	div > ul >li{
	color:red
	}
	</style>
</head>
<body>
	<div>
	<ul><li>我是一个无序标签</li></ul>
	</div>
</body>
</html>

2.5相邻兄弟选择器

选择器：<选择器> + <选择器>
匹配：目标元素紧跟匹配第一个选择器的元素，且匹配第二个元素。

<html>
    <head>

        <title>交集选择器</title>
        <style type="text/css">
            a + p{
                color: red;
            }
        </style>
    </head>
<body>

        <p>我是段落</p>
        <a>我是一个超链接</a>
        <p >我是段落</p>
</body>
</html>

3伪元素选择器

3.1 :hover :active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*鼠标悬浮在标签上的状态*/
        div:hover, a:hover {
            color: green;
        }
        /*元素在鼠标按下时的状态*/
        div:active, a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="block">我是一个div标签</div>
    <br>
    <a href="#">百度一下</a>
</body>
</html>

小猿猿q

关注

3
点赞
踩
0

收藏

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

我的第一篇博客：css选择器专栏1.css基本选择器1.1标签元素选择器最常见的是标签元素选择器，选择器通常是某个HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：html{color:red;}1.2类选择器（class选择器）选择器：.类名 {属性名:属性}匹配：属于指定类的元素；当跟元素类型一起使用时，匹配属于指定类的特定类型的元素。.main{ ...
复制链接

扫一扫