php css 选择器,CSS选择器

css 的基本语法

任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外

通过style 标签引入的css规则，仅适用于当前的页面(html文档)

css：层叠样式表，用来设置页面中的元素的样式，布局

h1{

color:violet;

border:1pxsolid#000;

}

h1: 选择器

{…}: 声明块，由一个或多个由分号隔开的样式声明构成

h1 + {…} 选择器 + 声明块 = 规则

声明由属性和值组成

使用CSS的三种方式内部样式

仅对当前文档的元素有效，使用style标签

在页面style标签内直接写css

引入外部样式表/公共样式表/共享样式表

在style标签里使用@import url(…);

这种情况使用的不多，一般用在CSS的模块化编程

使用link标签，更多的情况使用。

在使用公共样式表后，某个元素不想使用公共的样式，可以设置自定义样式。通过 元素的style属性来设置

适用于所有引入了这个css样式表的html文档，使用link。

元素的style属性设置样式

通过style属性给指定元素自定义/定制样式

行内样式：适用于当前页面中的指定元素，使用元素的style属性

/* 导入外部 */

@importurl(css/style.css);

/* 等效 */

@import"css/footer.css";

/*使用link标签*/

css真的非常好玩

样式表的模块化

对于一个网站来说，许多页面的页眉和页脚是相同的，可以考虑将他们的样式剥离出来，实现模块化编程

将公共样式部分分离，并创建一些独立的样式表来保存它。

使用@import 指令将这些独立的公共样式表引入到指定的CSS文档或标签中

选择器

选择器1：简单选择器

标签选择器标签选择器，返回一组

属性选择器(class,id)

类选择器：返回一组(简化为 .)

id 选择器：理论上返回一个。由开发者自行保证，浏览器不检查唯一性.(简化为 #)

选择器2：上下文选择器后代选择器: 选择所有层级 (空格 ：所有层级)

ul li{

background-color:violet;

}

子元素选择器：仅父子层级选中(> :父子级)

body>ul>li{

background-color:teal;

}

同级相邻选择器：仅选中与之相邻的第一个兄弟元素(+ ：相邻的兄弟)

.start+li{

background-color:lightgreen;

}

同级所有选择器：选中与之相邻的后面所有的元素(~ ：所有相邻兄弟)

.start~li{

background-color:blue;

}

伪类选择器： 结构伪类，重点难点

语法

:nth-of-type(an+b)

an + b : an起点，b是偏移量

n = (0, 1, 2, 3, 4…)

注意n从0开始 ,:冒号要紧挨着前面的选择器，中间不能有空格

实例：

• item1
• item2
• item3
• item4
• item5
• item6
• item7
• item8
• item9
• item10

• 我是一个li

有以上HTML

匹配第3个li

ul li:nth-of-type(0n+3){

background-color:violet;

}

/* 0乘以任何数都为0，通常直接写偏移量 */

ul li:nth-of-type(3){

background-color:violet;

}

选择所有元素

ul li:nth-of-type(1n){

background-color:yellow;

}

/* 如果只是为了全选，这样做没有意义了，还不如使用标签选择器，一旦带上偏移量就完全不同了。 */

/* 从第三个子元素开始，选中下面所有的元素 */

ul li:nth-of-type(1n+3){

background-color:violet;

}

/* 1乘以任何数都等于任何数，所以可以优化为 */

ul li:nth-of-type(n+3){

background-color:violet;

}

选中最后的3个元素

ul li:nth-of-type(n+8){

background-color:violet;

}

反向选中 还可以通过反向选中，不用关注元素的个数

语法：:nth-last-of-type(an+b)

始终选中后三个

ul li:nth-last-of-type(-n+3){

background-color:violet;

}

/*选中倒数第三个 */

ul li:nth-last-of-type(3){

background-color:violet;

}

选择所有索引为偶数的子元素

ul li:nth-of-type(2n){

background-color:violet;

}

/* 关键字 */

ul li:nth-of-type(even){

background-color:violet;

}

选择所有索引为奇数的子元素 2n-1 ,2n+1 一样，因为n是0开始

ul li:nth-of-type(2n+1){

background-color:yellow;

}

/* 关键字 */

ul li:nth-of-type(odd){

background-color:yellowgreen;

}

一些特殊情况，快捷方式 ，语法糖

/* 选择第一个子元素 */

ul li:first-of-type{

background-color:violet;

}

/* 选择最后一个子元素 */

ul li:last-of-type{

background-color:violet;

}

/* :nth-of-type(an+b)最核心的选择器，其他相关选择器都是他的语法糖，马甲，特殊应用场景 */

/* 我想选中第二个ul中的li */

ul:last-of-type li:first-of-type{

background-color:violet;

}

/* 还有更优雅的方式选中 */

/* 只想匹配父元素的唯一子元素 */

ul li:only-of-type{

background-color:yellow;

}