选择器

选择器：帮助你精准的选中想要的元素

简单选择器

ID选择器
元素选择器
类选择器
通配符选择器

*，选中所有元素

属性选择器

根据属性名和属性值选中元素

[href] {color: red;
}[href="https://www.baidu.com"] {color: #008c8c;
}[href$="sina.com"] {color: red;
}[class~="b"] {color: blueviolet;
}

伪类选择器

选中某些元素的某种状态（按照如下顺序书写）

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：l ov e h a te

伪元素选择器

before

after

span::before {content: "《";color: red;
}span::after {content: "》";color: red;
}

选择器的组合

并且
后代元素 ——→ 空格
子元素 ——→ >
相邻兄弟元素(下一个) ——→ +
后面出现的所有兄弟元素 ——→ ~

div.red {/*并且*/color: red;
}.red li {/*后代*/color: #008c8c;
} .abc .bcd {color: red;
} .abc>.bcd {/*子元素*/color: red;
} .special {color: blue;
}.special+li {/*相邻兄弟元素*/color: #008c8c;
}.special~li {/*后面出现的所有兄弟元素*/color: #008c8c;
}

选择器的并列

多个选择器, 用逗号分隔

语法糖

p , .special+li {xxxxxx
}

tips:
1. p.red.a.b.c  快捷生成类名

参考资料

【渡一教育】袁进老师的html+css基础课程
【渡一教育】袁进老师相关课程源代码

CSS基础（3）- 选择器相关推荐

html选择文件框选择wood文件,CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 2.内部样式 div { color:red; } 3.外部样式 4.导入样式 /*在css导入样式*/ @im ...
HTML超链以及CSS基础、选择器
一.超链接a的相关属性 1.href="书写路径"有5种写法:外部路径以及绝对路径.相对路径.空(刷新页面).#(取消链接功能) 2.title="鼠标悬停上去之后的提示 ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
HTML与CSS基础之选择器优先级(十)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>选择器 ...
css基础层叠样式表选择器
CSS css: 层叠样式表语法: 选择器{属性:属性值:属性:属性值:} css的三种引入方式 a. 行内样式:<p style="color:red">描述内容& ...
html 并集选择器,HTML+CSS基础并集选择器
SpringBoot源码解析:tomcat启动分析 >> spring与tomcat的启动分析:war包形式 tomcat:xml加载规范 1.contex-param: 初始化参数 2. ...
CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
CSS基础(part2)--CSS选择器
学习笔记,仅供参考,有错必纠文章目录 CSS CSS语法 CSS简单属性 CSS注释 CSS选择器通配符选择器 ID选择器类选择器 CSS复合选择器标签指定式选择器(既...又...) 后代选 ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...

CSS基础（3）- 选择器

文章目录

选择器

简单选择器

选择器的组合

选择器的并列

参考资料

CSS基础（3）- 选择器相关推荐

最新文章

热门文章