【复习必看】 ★ css3 所有选择器 | 【小索引】 ★
本帖最后由 liuzhengyuan 于 2020-7-6 16:37 编辑《零基础入门学习web开发》 | 学习笔记
上一篇：040-属性选择器
css所有选择器都学完啦~{:10_298:}
感谢 小甲鱼，感谢 不二如是
现在开始总结了：
[*]基本选择器（传送门）
[*]复合选择器（传送门）
[*]伪元素选择器（传送门）
[*]伪类选择器（传送门）
[*]动态伪类选择器
[*]UI 伪类选择器
[*]结构伪类选择器
[*]其他伪类选择器
[*]属性选择器（传送门）
下面会有一些每次笔记的 html 代码
这样对照会方便一些
下一篇：? ? ? 本帖最后由 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: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: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-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
你那几个url没弄好{:10_260:} 你那几个 URL 没弄好{:10_260:} 本帖最后由 liuzhengyuan 于 2020-4-6 18:03 编辑
墨羽岚 发表于 2020-4-6 16:14
你那几个url没弄好
传送门暂未开起{:10_297:} liuzhengyuan 发表于 2020-4-6 16:31
传送门暂未开起
嘿，学我的护眼绿！{:10_334:} weiter 发表于 2020-4-6 18:09
嘿，学我的护眼绿！
{:10_257:} css3和css的区别大吗？我看着差不多呀
majian890324 发表于 2020-4-30 21:08
css3和css的区别大吗？我看着差不多呀
css3就是 css 呀 yubi 永远的渣滓 发表于 2020-5-1 09:15
yubi
终于有人发现我这个有鱼币了{:10_275:} liuzhengyuan 发表于 2020-5-1 09:16
终于有人发现我这个有鱼币了
嗯嗯{:10_250:} 永远的渣滓 发表于 2020-5-1 09:17
嗯嗯
^_^ 占楼 Mike_Python0721 发表于 2020-5-1 09:30
占楼
你运气不好{:10_250:}，没领到鱼币 liuzhengyuan 发表于 2020-5-1 09:31
你运气不好，没领到鱼币
我不是欧皇？？！{:10_262:} 我是欧皇
页:
[1]
2