CSS选择器常见用法

最新推荐文章于 2024-08-07 10:08:11 发布

我不是小明同学

最新推荐文章于 2024-08-07 10:08:11 发布

阅读量301

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/qq_61139806/article/details/127677597

版权

CSS选择器常见用法

基本语法规范

选择器+{n条声明}

选择器决定修改谁

声明决定修改什么

<style>
    p{
        /* 修改字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 50px;
    }
</style>

<p>hello world</p>

修改前：
在这里插入图片描述
修改后：

行内样式表

通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式.

<style>
    div {
    	color: red;
	}
</style>
<div style="color:green">猜猜我是什么颜色的</div>

在这里插入图片描述

可以看到红色并没有显示出来.

外部样式

实际开发中最常用的方式.

创建一个 css 文件.

使用 link 标签引入 css

<link rel="stylesheet" href="[CSS文件路径]">

示例：

test.html

<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>红红火火恍恍惚惚</div>
</body>

style.css

div {
	color: red;
}

在这里插入图片描述

优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效

基础选择器

标签选择器

特点：

※ 能快速为同一类型的标签都选择出来

※ 但是不能差异化选择

<style>
p {
	color: red;
}
div {
	color: green;
}
</style>
<p>娃哈哈</p>
<p>爽歪歪</p>
<p>拜拜拜</p>
<div>猪八戒</div>
<div>孙悟空</div>
<div>沙悟净</div>

类选择器

特点：

※ 差异化表示不同的标签

※ 可以让多个标签都是用同一个标签

<style>
.blue {
	color: blue;
}
</style>
<div class="blue">汤姆猫</div>
<div>汤姆猫</div>

注意事项：

类名用 " . "开头
下方的标签使用 class 属性来调用
一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要是用空格分割）
如果是长的类名，可以使用 “ - ”分割。
不要使用纯数字，中文，以及标签名来命名类名

多个类名的示例：

<style>
.box {
    width: 200px;
    height: 150px;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

id选择器

id选择器和类选择器类似

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

示例：

<style>
#ha {
	color: red;
}
</style>
<div id="ha">哈哈哈</div>

通配符选择器

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

* {
	color: red;
}

页面中所有内容都会被改成 red

复合选择器

后代选择器

后代选择器又叫包含选择器，选择某个父元素中的某个子元素

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

元素1 和元素 2 要使用空格分割

元素1 是父级，元素2 是子级，只选择元素2，不影响元素1

示例：只更改 ol 中的 li 的颜色，不影响 ul 中的。

ol li {
	color: red;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>

示例：更改子级的子级

ul li a {
	color: yellow;
}
或者
ul a {
	color: yellow;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>

示例：任意基础选择器的组合（包括类选择器、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

使用大于号分割
只选亲儿子，不能选“孙子元素”

.two>a {
	color: red;
}
<div class="two">
<a href="#">链接1</a>// 颜色变成红色
<p><a href="#">链接2</a></p>// 不收影响
</div>

并集选择器

并集选择器用于选择多组标签

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

通过逗号分割多个元素
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器

示例：

<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
//把苹果和香蕉改成红色
div, h3 {
	color: red;
}

伪类选择器

链接伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接（鼠标按下了但是未弹起）

<a href="#">小猫</a>
a:link {
	color: black;
	/* 去掉 a 标签的下划线 */
	text-decoration: none;
} a
:visited {
	color: green;
} a
:hover {
	color: red;
} a
:active {
	color: blue;
} a
{
	color: black;
} a
:hover {
	color: red;
}

force伪类选择器

获取焦点的input 表单元素

示例：

<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
.three>input:focus {
	color: red;
}

:visited {
	color: green;
} a
:hover {
	color: red;
} a
:active {
	color: blue;
} a
{
	color: black;
} a
:hover {
	color: red;
}


##### force伪类选择器

获取焦点的input 表单元素

示例：

```css
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
.three>input:focus {
	color: red;
}