2.1 CSS选择器的作用
- 选择器就是用来根据需求选择相应标签的
2.2 选择器分类
- 基础选择器：由单个选择器构成
- 基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器。
- 复合选择器
2.3 标签选择器
- 定义：用HTML的标签名作为选择器，为页面中的某一类标签指定统一的CSS样式。
- 语法：
标签名 { 属性1: 属性值1; 属性2: 属性值2; } - 例：
h1 { color: green; } //则所有的h1标签内的文字的颜色都会变成绿色
2.4 类选择器
- 作用：差异化选择不同的标签。单独选一个或某几个标签。最常用。
- 语法：
之后再在标签里调用类.类名 { 属性1: 属性1; …… } - 例：将所有拥有red类的HTML元素设置为红色
.red { color: red; }<ul> <li class="red">かれし彼氏</li> </ul> //li调用red类，则“かれし彼氏”会变成红色 - 注意
- 类名自己取有意义的，但不能取标签名，比如不能是.li
- 长类名连接用-连接，比如prologue-title
- 有命名规范，具体查阅文档。
- 多类名
- 可以给一个标签指定多个类名。
- 使用方式
- 在class属性中写多个类名。
- 多个类名中间必须用空格分开。
- 例：
.red { color: red; } .font35{ font-size: 35px; } <div class="red font35">がくせい学生</div> //则“がくせい学生”就会变成红色并且字体变为35像素大小
- 用法：把共有的属性提取成一个类，然后标签就可以调用这个公共的类，再调用自己独有的类。
- 优点：节省CSS代码，方便统一修改。
2.5 id选择器
- 用法：在HTML以id属性来设置id选择器，CSS中id选择器以“#”来定义。
- 使用场景：一般用于页面唯一的元素上，和js搭配使用。
- 语法：
#id名 { 属性: 属性值; } - 例：将“あした”改为粉色
#pink { color:pink; } <div id="pink">あした</div> - id选择器和类选择器的区别：
- 同一个id属性只能在每个HTML文档中出现一次，如果有一个标签调用了，其他标签就不能再调用。
- 类选择好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
- id选择器好比身份证号码，一个人只能有一个，不能重复。
2.6 通配符选择器
- 用法：通配符选择器使用“*”定义，表示选取页面中所有元素标签。
- 语法：
* { 属性: 属性值; } - 例：把body div span li以及没写出来的html等所有的标签都改为了红色。
* { color: red; } <body> <div>かのじょ</div> <span>彼女</span> <ul> <li>女朋友</li> </ul> </body> - 有特殊情况才使用，比如清除所有的元素标签的内外边距。
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
