CSS选择器、CSS属性

style写在head中间，type="text/css"可以不用写，默认就是这个。

规定文字样式、粗细、大小、字体的属性

1、字体不存在用户电脑上时：

不处理时，使用用户电脑系统默认字体

处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体

2、一串字符串既有中文，又有英文时，如何设置两种字体

英文字体是中文字体的子集。【意思是：英文字体不能处理中文，中文字体可以处理英文】

文本装饰、文本对齐，文本缩进的属性

文本装饰-文字的下划线，中划线等

文本对齐：

文本缩进：

格式：

p{

font:20px,"楷体"

}

标签选择器选中的是页面中所有的该标签

作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）

第一步：给需要设置的标签设置id，

第二步：

注意：

1、id在同一页面是唯一的

2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

根据指定的类名称找到对应的标签，然后设置属性

第一步：给需要设置的标签设置className，

第二步：

注意：

1、className是可以重复的

2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

4、同一个HTML变迁可以有多个classname

1、id使用“,”class使用#

2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；

id相当于身份证，所以同一个页面上的HTML标签不可以有一样的id；

3、class相当于人名，所以，一个HTML标签可以有多个Class

id相当于身份证，所以，一个HTML标签只能有一个id

4、一般情况下设置样式，使用class；如果需要js配合，使用id

格式：

先祖位置可以是HTML标签，可以是class名，可以是id

后代位置可以是HTML标签，可以是class名，可以是id

可以随意组合

只会查找直接子元素

格式：

1、都可以使用HTML标签、id名、class名

1、后代使用空格，子使用>

2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签

定义：两个选择器相交的部分

格式：

选择器1选择器2{

}

选择器1和选择器2之间没有任何符号，没有空格，没有>

选择器1和选择器2之间有逗号。

相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式

通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签【n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y】

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |

| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |

| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |

| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |

| [ attribute ^= value ] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a>元素。 | 3 |

| [[ attribute =value] 选择器") | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a>元素。 | 3 |

| [ attribute = value*] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a>元素。 | 3 |

1、属性的取值是以什么开头的

[ attribute |= value ]----------------CSS2

优先使用CSS3的。

2、属性的取值是以什么结尾的

3、属性的取值是否包含某个特性的值的

[attribute~=value]

*{

}

【这是我的学习笔记，你也可以拿去用】

1 元素选择器：比如p{xxxx}，选择文档中所有的p元素；

2 类选择器：比如.center_bar{xxxx}，选择文档中使用了类center_bar的元素；

3 id选择器：比如.button1{xxxx}，选择文档中使用了button1的元素；

4 或选择器：用逗号连接多个选择器；

5 与选择器：多个选择器紧挨在一起；

6 后代选择器：用空格连接多个选择器；

7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况；

8 属性选择器：

(1) 比如p[id]，选择标签上有属性“id”的p元素；

(2) 比如p[id="button1"]，选择标签上有属性“id”并且id的值为“button1”的p元素；

(3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素；

(4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素；

(5) 比如p[id*=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素；

9 p:first-child：既是p元素，也是某元素的第一个孩子；

10 p:last-child：既是p元素，也是某元素的最后一个孩子；

11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子；

12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子；

13 伪类选择器都是某种状态，比如active、link、hover，使用“:”；

14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::”

15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题；

16 如果两个选择器优先级相同，那么写在后面的选择器生效；

17 选择器优先级的排列：

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) *选择器

(7) 继承样式

一、简单的选择器

1）标签选择器

与网页元素同名，用的最多，也简单，即直接作用于与该选择器名字相同的标签

2） 类选择器

能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同样式

3）类选择器和标签结合在一起==>指定类选择器

指定该类用于特定的标签范围内

4）ID选择器（ID唯一）

这个就不举例讲解了，类比类选择器，把"."换成"# "即可

5）通配选择器

如果所有元素都需要定义相同的样式，推荐使用通配选择器

二、复合选择器

1）子选择器

2）相邻选择器（二者有相同父元素）

**利用相邻的兄弟元素来控制，即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示

3）包含选择器（后代选择器）

第一对象一定要内包含第二对象

4）选择器嵌套

5）属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。

1.匹配属性名选择器

2.扩展

3.匹配属性值选择器

4.模糊匹配属性值选择器

类似正则表达式

6）伪选择器和伪元素选择器

标签之间可以通过逗号隔开来设定多个标签的CSS样式

---