【复习必看】 ★ css3 所有选择器 | 【小索引】 ★

liuzhengyuan · 发表于 2020-4-6 16:11:02

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 liuzhengyuan 于 2020-7-6 16:37 编辑

《零基础入门学习web开发》 | 学习笔记

上一篇：040-属性选择器

css所有选择器都学完啦~

感谢小甲鱼，感谢不二如是

现在开始总结了：

基本选择器（传送门）
复合选择器（传送门）
伪元素选择器（传送门）
伪类选择器（传送门）
- 动态伪类选择器
- UI 伪类选择器
- 结构伪类选择器
- 其他伪类选择器
属性选择器（传送门）

下面会有一些每次笔记的 html 代码

这样对照会方便一些

下一篇：[url=]? ? ?[/url]

liuzhengyuan · 发表于 2020-4-6 16:47:22

本帖最后由 liuzhengyuan 于 2020-4-8 19:03 编辑

1，基本选择器（传送门）

通用选择器 - Univercal Selector
元素选择器 - Element Selector
类选择器 - Class Selector （传送门）
Id 选择器 - ID Selector （传送门）

代码

<h1>我是1，哈哈哈哈</h1>
<h2>我是2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
<p class="thirsty">我好渴，我想要喝点<span class="water">水</span></p>
<p class="hungry">我好饿，我想要吃点<span id="food">食物</span></p>

复制代码

更多--不二如是

liuzhengyuan · 发表于 2020-4-8 19:01:08

本帖最后由 liuzhengyuan 于 2020-4-8 19:14 编辑

2，复合选择器（传送门）

交集选择器 - Intersection Selector
并集选择器 - Union Selector
后代选择器 - Descendant Selector
子元素选择器 - Child Selector
相邻兄弟选择器 - Adjacent Sibling Selector
通用兄弟选择器 - General Sibling Selector

html代码：

<h1 class="a">aaaaaaaaaa</h1>
<h2 class="b">bbbbbbbbbbbbbbbb</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
<p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
<span class="a">aaaaaaaaaaaaaa</span>
<p class="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>

复制代码

代码2：

<h1 class="a">aaaaaaaaaa</h1>
<h2 class="b">bbbbbbbbbbbbbbbb</h2>
<div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
<p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
<span class="a">aaaaaaaaaaaaaa</span>
</div>
<p class="b">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>

复制代码

更多--不二如是

liuzhengyuan · 发表于 2020-4-8 19:19:44

本帖最后由 liuzhengyuan 于 2020-4-8 19:22 编辑

3，伪元素选择器（传送门） - Pseudo-elements

::first-line
::first-letter
::after, ::before
:selection

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>035-::first-line</title>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam explicabo hic perferendis dicta, quisquam repudiandae maxime dolor sit recusandae cumque at amet esse assumenda quibusdam praesentium culpa quos, nulla neque?</p>
<a href="https://ilovefishc.com">hello</a>
</body>
</html>

复制代码

更多--不二如是

liuzhengyuan · 发表于 2020-4-11 21:47:26

本帖最后由 liuzhengyuan 于 2020-7-6 16:42 编辑

4，伪类选择器 - Pseudo-class Selectors

动态伪类选择器（传送门）- Dynamic Pseudo-class Selectors

:link
:visited
:hover
:active
:foucus

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>036-动态伪类选择器</title>
<style>
</style>
</head>
<body>
<a href="http://demo.fishc.com" target="_blank">戳戳我吧！！！</a>
</body>
</html>

复制代码

UI 伪类选择器（传送门）- User Interface Pseudo-class Selectors

:enabled
:disabled
:checked
:required
:optional
:default
:valid
:invalid
:in-range
:out-of-range
:read-only
:read-write
:indeterminate

墨羽岚 · 发表于 2020-4-6 16:14:57

你那几个url没弄好

一个账号 · 发表于 2020-4-6 16:23:21

你那几个 URL 没弄好

liuzhengyuan · 发表于 2020-4-6 16:31:57

本帖最后由 liuzhengyuan 于 2020-4-6 18:03 编辑

墨羽岚发表于 2020-4-6 16:14
你那几个url没弄好

传送门暂未开起

weiter · 发表于 2020-4-6 18:09:46

liuzhengyuan 发表于 2020-4-6 16:31
传送门暂未开起

嘿，学我的护眼绿！

liuzhengyuan · 发表于 2020-4-6 19:34:22

weiter 发表于 2020-4-6 18:09
嘿，学我的护眼绿！

majian890324 · 发表于 2020-4-30 21:08:32

css3和css的区别大吗？我看着差不多呀

liuzhengyuan · 发表于 2020-4-30 21:12:40

majian890324 发表于 2020-4-30 21:08
css3和css的区别大吗？我看着差不多呀

css3就是 css 呀

永远的渣滓 · 发表于 2020-5-1 09:15:01

yubi

liuzhengyuan · 发表于 2020-5-1 09:16:39

永远的渣滓发表于 2020-5-1 09:15
yubi

终于有人发现我这个有鱼币了

永远的渣滓 · 发表于 2020-5-1 09:17:48

liuzhengyuan 发表于 2020-5-1 09:16
终于有人发现我这个有鱼币了

嗯嗯

liuzhengyuan · 发表于 2020-5-1 09:18:21

永远的渣滓发表于 2020-5-1 09:17
嗯嗯

^_^

Mike_Python0721 · 发表于 2020-5-1 09:30:32

占楼

liuzhengyuan · 发表于 2020-5-1 09:31:33

Mike_Python0721 发表于 2020-5-1 09:30
占楼

你运气不好

，没领到鱼币

Mike_Python0721 · 发表于 2020-5-1 09:35:17

liuzhengyuan 发表于 2020-5-1 09:31
你运气不好，没领到鱼币

我不是欧皇？？！

MIke_python小小 · 发表于 2020-5-1 09:51:09

我是欧皇

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 【复习必看】 ★ css3 所有选择器 | 【小索引】 ★

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

浏览过的版块