Css的选择器

开发工具与关键技术： DW

作者：夜袭寡妇村

撰写时间：2021/6/27

基本选择器
1、所有用于选择特定元素的选择器分三种：
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素
ID和类选择器：基于id#和class的属性值进行选择元素。
属性选择器：基于属性的有无和特征进行选择。


②特殊的上下文选择器
子选择器> :
语法格式:标签1>标签2 解释说明：标签1和标签2是父子关系。
紧邻同胞选择器+ :
语法格式:标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器~ :
语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。
通用选择符* : * .
解释说明:通用选择器*是一个通配符，匹配任何元素。
③id选择器和class选择器
id选择器：语法格式:#idValue
class选择器：语法格式: .classValue
④属性选择器
属性名选择器：
语法格式：标签名[属性名]
属性值选择器：
语法格式：标签名[属性名="属性值"]

选择器是用来获取到需要添加样式的标签的一些符号。
1.1、标签选择器 元素选择器(元素选择器是最简单的选择器)
选择器{ 属性：值}

通过标签名选择
div{ ... }
p {color:red;}
ul{... }
组合选择器
p{color:red;font-size:19px;font-weight:bold;}
h1,p,a{color:blue;font-size:19px;}
1.2、类选择器

通过标签的类型（class属性）选择
.className{ ... }

1.3、通配符

选择所有的标签
*{ ... }
/* 通常用来去除所有标签的默认内外边距（项目中不建议）*/
*{
margin: 0;
padding: 0;
}

1.4、ID选择器

通过标签的id属性名选择
#id{ ... }
id命名规则，同class属性，但是id具有唯一性，同一个页面id名不允许重复,一个标签只能起一个id，id和类选择器：基于id#和class的属性值进行选择元素。
上下文选择器：
上下文选择器的语法格式：标签1 标签2{属性:值;}
//注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，
上下文选择器以空格隔开

特殊的上下文选择器
子选择器> :
语法格式:标签1>标签2 解释说明：标签1和标签2是父子关系。
紧邻同胞选择器+ :
语法格式:标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器~ :
语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。



属性选择器：基于属性的有无和特征进行选择
2、文本字体样式

2.1、font系列

2.1.1 font-size 字体大小

font-size:20px;
2.1.2 font-weight 字体加粗

font-weight:normal; 默认值，不加粗
font-weight:bold; 加粗
2.1.3 font-style 字体风格

font-style:normal; 正常
font-style:italic; 斜体
2.1.4 line-height 行高

行高指的一行字字体高度加上前后多占的一部分空间，行高越大行间距越大
单行文本垂直居中：把行高设置为盒子的高度
line-height:30px;
line-height:2; // 表示字体大小的倍数
2.1.5 font-family 字体系列

font-family:"微软雅黑";
font-family:"宋体";
font-family:Neue,Helvetica,Arial,MicrosoftYahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; // 设置字体的列表，浏览器会识别第一个支持的字体
2.1.6 font 简写

简写属性顺序不能随意更换
可以省略部分属性，至少保留 font-size 和font-family
font: italic bold 20px/2 "宋体";
font: 20px "宋体";

2.2 text系列

2.2.1 text-align 文本对齐

text-align:left;
text-align:center;
text-align:right;
2.2.2 text-indent 首行缩进

text-indent:2em; // 缩进两个字
2.2.3 text-decoration 文本修饰

text-decoration:none; //没有修饰
text-decoration:line-through;//删除线
text-decoration:underline; //下划线
text-decoration:overline; //上划线

2.2.4 color 文本颜色

color:red;

2.2.5 letter-spacing 字符间距

letter-spacing: 20px;
2.2.6 word-spacing 单词间距

word-spacing:20px