CSS 之选择器

最新推荐文章于 2024-02-28 21:36:57 发布

__Wwinky

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量288

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Wwinky/article/details/118642527

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

在 CSS 中，选择器的作用就是选择页面上的某一个或者某一类元素。一个网页就是一棵DOM树,我们可以利用选择器选中DOM树节点。

基本选择器

1. 标签选择器

标签选择器会选择到页面上所有这个标签的内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
    	/* 利用标签选择器选中 p 标签 */
        p{
            color: blue;
        }
    </style>
</head>
<body>
	<p>welcome to CSS!</p>
    <p>CSS</p>
	<hr>
	<h2>welcome</h2>
    <h2>hello</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

在浏览器的显示效果为：只有p标签中的内容改变了颜色。
在这里插入图片描述

2. 类选择器

在上面的例子，标签选择器选中的是所有p标签，如果我只想选中第一个p标签的内容，这时候就要使用类选择器。

类选择器的格式是：.class的名称{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        /* 利用类选择器选中第一个p标签 */
        .p1{
            color: blue;
        }
    </style>
</head>
<body>
	<p class="p1">welcome to CSS!</p>
    <p>CSS</p>
	<hr>
	<h2>welcome</h2>
    <h2>hello</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

网页呈现效果如下：
在这里插入图片描述
类选择器的好处就是可以对多个标签进行归类，属于同一个class就可以使用标签选择器进行管理，可以跨标签，可以复用。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        /* 利用类选择器选中 p1 类 */
        .p1{
            color: blue;
        }
    </style>
</head>
<body>
	<p class="p1">welcome to CSS!</p>
    <p>CSS</p>
	<hr>
	<h2 class="p1">welcome</h2>
    <h2>hello</h2>
	<hr>
	<div class="p1">嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

浏览器呈现的效果如下：
在这里插入图片描述

3. ID选择器

针对某一个特定的标签来使用，只能使用一次，请确保id全局唯一。该选择器的格式为：#id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        /* 利用ID选择器选中p1 */
        #p1{
            color: blue;
        }
    </style>
</head>
<body>
	<p id="p1">welcome to CSS!</p>
    <p>CSS</p>
	<hr>
	<h2>welcome</h2>
    <h2>hello</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

浏览器显示效果为：
在这里插入图片描述

4. 优先级

三个基本选择器的优先级为：id选择器>类选择器>标签选择器。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	    <style>
	        /* 利用类选择器选中第一个p标签 */
	        #p1{
	            color: blue;
	        }
	
	        .p2{
	            color: brown;
	        }
	
	        p{
	            color: yellow;
	        }
	    </style>
	</head>
	<body>
		<p id="p1" class="p2">welcome to CSS!</p>
	    <p class="p2">CSS</p>
	    <p>hello</p>
		<hr>
		<h2>welcome</h2>
	    <h2>hello</h2>
		<hr>
		<div>嘿嘿</div>
		<div>哈哈</div>
	</body>
</html>

在浏览器的显示效果为：
在这里插入图片描述

层次选择器

层次选择器，顾名思义，就是根据层次来进行选择，要弄清楚各个标签之间的关系，最好是画出DOM树。

假设有一段代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

画出的DOM树如下：
在这里插入图片描述

1. 层次选择器

1.1 后代选择器

作用的是选择元素的后代元素，包括子元素、孙辈元素等。格式为：选中元素想选中的后代元素{}

例如：我想选中body标签后的所有后代元素p：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body p{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

效果如下：
在这里插入图片描述

1.2 子选择器

作用的是某元素的所有子元素，不能包括孙辈元素。格式为：选中元素 > 想选中的后代元素{}

还是上面的例子，不过我想选中的是body标签的子元素p

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body>p{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

效果如下：
在这里插入图片描述

1.3 兄弟选择器

1.3.1 相邻兄弟选择器

选中的仅是选中元素的下一个兄弟元素。格式为 .选中元素 + 想要选中的标签 {}（如果是利用类选择器标记选择对象的话）

例如：我想要选中p2标签的相邻兄弟的p标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .p2+p{
                color: brown;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p class="p2">p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

显示效果如下：
在这里插入图片描述

1.3.2 通用兄弟选择器

选中的是选中元素的所有下级兄弟元素。格式为 .选中元素 ~ 想要选中的标签 {}（如果是利用类选择器标记选择对象的话）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .p2~p{
                color: brown;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p class="p2">p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

效果如下：
在这里插入图片描述

2. 结构伪类选择器

CSS中有如下四种伪元素选择器：

first-line:为某个元素的第一行文字使用样式；
first-letter:为某个元素中的文字的首字母或第一个字使用样式；
before:在某个元素之前插入一些内容；
after: 在某个元素之后插入一些内容；

使用方法：选择器：伪元素{样式}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 选中ul的第一个子元素 */
            ul li:first-child{
                color: brown;
            }

            /* 选中ul的最后一个子元素 */
            ul li:last-child{
                color: blueviolet;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p class="p2">p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p class="p5">p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

在这里插入图片描述

3. 属性选择器

属性选择器即是通过html的属性来选择元素，格式为：标签[属性值]{}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p[class="p2"]{
                background-color: brown;
            }
            li[class="li1"]{
                background-color: cadetblue;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p class="p2">p2</p>
        <p>p3</p>
        <ul>
            <li class="li1">
                <p>p4</p>
            </li>
            <li>
                <p class="p5">p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
    </body>
</html>

浏览器显示效果为：
在这里插入图片描述

__Wwinky

关注

0
点赞
踩
1

收藏

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

文章目录基本选择器1. 标签选择器2. 类选择器3. ID选择器高级选择器在 CSS 中，选择器的作用就是选择页面上的某一个或者某一类元素。一个网页就是一棵DOM树,我们可以利用选择器选中DOM树节点。基本选择器1. 标签选择器标签选择器会选择到页面上所有这个标签的内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&l
复制链接

扫一扫