css基础学习总结(一)

news/2024/9/18 14:59:27/ 标签: css, 学习, 前端

文章目录

一. 选择器
- 1. 标签选择器
- 2. 类选择器
- 3. ID选择器
- 4. 分组选择器
- 5. 派生与子元素选择器
- 6. 属性选择器
- 7. 伪类选择器
- 8. 伪对象选择器
- 9. 选择器的优先级别
- - css优先级的 6大分类

一. 选择器

1. 标签选择器

选择器	例子	描述
element	p/div/span	选择所有含有指定标签的元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;}span {color: blue;}p {color: green;}</style>
</head>
<body><div>Hello</div><span>World</span><p>你好</p>
</body>
</html>

2. 类选择器

选择器	例子	描述
.class	.info	选择 class=“info” 的所有元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.info{color: pink;}</style>
</head>
<body><div class="info">Hello</div><div class="a">World</div><div class="b">你好</div>
</body>
</html>

3. ID选择器

选择器	例子	描述
#id	#Oh	选择 id=“Oh” 的元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#Oh{color: red;}</style>
</head>
<body><div class="info" id="o1">Hello</div><div class="a" id="Oh">World</div><div class="b" id="o2">你好</div>
</body>
</html>

4. 分组选择器

选择器	例子	描述
element,element	div, p	选择所有div元素和所有p元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p {color: red;}</style>
</head>
<body><div class="info" id="o1">Hello</div><p class="a" id="Oh">World</p><span class="b" id="o2">你好</span>
</body>
</html>

5. 派生与子元素选择器

选择器	例子	描述
element element.class	ul li.name	选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li.name {color: red;}</style>
</head>
<body><ul><li>Hello</li><li>World</li><li class="name">你好</li></ul>
</body>
</html>

选择器	例子	描述
element>element	ul > li	选择父元素是 ul 的所有 li 元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul > li {color: red;}</style>
</head>
<body><ul><li>Hello</li><ol><li>World</li></ol><li class="name">你好</li></ul>
</body>
</html>

6. 属性选择器

选择器	例子	描述
[attribute]	[target]	选择带有 target 属性的所有元素

css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[target] {color: red;}</style>
</head>
<body><ul><li>Hello</li><ol><li target="世界">World</li></ol><li class="name">你好</li></ul>
</body>
</html>

7. 伪类选择器

选择器	例子	描述
:active	a:active	选择活动链接。
:checked	input:checked	选择每个被选中的 input 元素。
:default	input:default	选择默认的 input 元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 input 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 p 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:visited	a:visited	选择所有已访问的链接。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素。

8. 伪对象选择器

选择器	例子	描述
::after	p::after	在每个p的内容之后插入内容。
::before	p::before	在每个 p 的内容之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个 p 元素的首行。