CSS选择器常见用法

最新推荐文章于 2023-05-09 18:49:48 发布

张同学吧

最新推荐文章于 2023-05-09 18:49:48 发布

阅读量773

点赞数 1

分类专栏：笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45861152/article/details/122479896

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css控制器

选择器

选择器

1.选择器的功能：选定页面中指定元素，进而修改元素的属性

2.选择器的种类

可以参考

.基础选择器: 单个选择器构成的

标签选择器

特点:1.能快速为同一类型的标签都选择出来.
2.但是不能差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p{
            font-size: large;
            color: coral;
        }
        div{
            color: crimson;
        }
    </style>
</head>
<body>
	<p>p1p1p1p1p1p1</p>
    <p>p2p2p2p2p2p2</p>
    <div>d1d1d1d1d1d1</div>
    <div>d2d2d2d2d2d2</div>
</body>
</html>

类选择器

特点: 1.差异化表示不同的标签.
2.可以让多个标签的都使用同一个标签

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

注意：：

不要使用纯数字, 或者中文, 以及标签名来命名类名类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
下方的标签使用 class 属性来调用.
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
如果是长的类名, 可以使用 - 分割.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .blue{
            color: blue;
        }
        .red{
            color: red;
        }
        .p{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <p class="p blue ">pblue</p>
    <p class="p red">pred</p>
</body>
</html>

id 选择器

和类选择器比较类似
注意：：

CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素id不必带 #
id 是唯一的, 不能被多个标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #div1{
            color: red;
        }
        #div2{
            color: rgb(56, 212, 166);
        }
        #div3{
            color: rgb(109, 186, 250);
        }
    </style>
</head>
<body>
    <div id="div1">喷火龙</div>
    <div id="div2">妙蛙种子</div>
    <div id="div3">杰尼龟</div>
</body>
</html>

通配符选择器

使用 * 的定义, 选取所有的标签.

* {
color: red;
}

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 页面所有内容都会被改成红色 -->
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
</body>
</html>

复合选择器: 把多种基础选择器综合运用起来.

后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素。

元素1 元素2 {样式声明}

注意：

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        div p{
            color: rosybrown;
        }
        div p a{
            color: rgb(209, 45, 224);
        }
        ul li{
            color: royalblue;
        }
        ol li{
            color:seagreen;
        }
    </style>
</head>
<body>
    <div>
        <p>p1p1p1p1p1p1</p>
        <p><a href="#">p2p2p2p2p2p2</a><br>p2p2p2p2p2p2</p>
    </div>
    <ul>
        <li>无序排序1</li>
        <li>无序排序2</li>
        <li>无序排序3</li>
        <li>无序排序4</li>
    </ul>
    <ol>
        <li>有序排序1</li>
        <li>有序排序2</li>
        <li>有序排序3</li>
        <li>有序排序4</li>
    </ol>
</body>
</html>

代码示例: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

.one li a {
	color: green;
}

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>

子选择器

和后代选择器类似, 但是只能选择子标签.

元素1>元素2 { 样式声明 }

注意：

使用大于号分割
只选亲儿子, 不选孙子元素

<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
<!-- 后代选择器的写法, 会把链接1 和链接2 都选中 --!>
.two a {
	color: red;
}
<!-- 子选择器的写法, 只选链接1 --!>
.two>a {
	color: red;
}

并集选择器

用于选择多组标签. (集体声明)

元素1, 元素2 { 样式声明 }

注意：

通过”，“分割等多个元素.
表示同时选中元素1 和元素2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
代码举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        /* 并集选择器建议竖着写. 每个元素占一行. (最后一个不能加逗号) */
        div,
        ul {
            color: red;

        }
    </style>
</head>

<body>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul>
</body>

</html>

伪类选择器

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

force伪类选择器：选取获取焦点的 input 表单元素

<div class="zms">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>
<!-- 此时被选中的表单的字体就会变成红色 --!>
.zms>input:focus {
	color: red;
}

张同学吧

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器常见用法

css控制器选择器1.选择器的功能：选定页面中指定元素，进而修改元素的属性2.选择器的种类.基础选择器: 单个选择器构成的标签选择器类选择器id 选择器通配符选择器复合选择器: 把多种基础选择器综合运用起来.后代选择器子选择器并集选择器伪类选择器选择器1.选择器的功能：选定页面中指定元素，进而修改元素的属性2.选择器的种类可以参考.基础选择器: 单个选择器构成的标签选择器特点:1.能快速为同一类型的标签都选择出来.2.但是不能差异化选择<!DOCTYPE html>&lt
复制链接

扫一扫