CSS学习之基础选择器和高级选择器

1>什么是选择器

一个HTML页面中有很多的元素，不同的元素可能会有不同的样式，有些元素又需要设置相同的样式，

选择器就是用来从HTML页面中查找特定一个或一组元素，找到之后就可以为它们设置样式了。

选择器为样式规则指定一个作用范围。

基础选择器包括：

2>基础选择器的用法

2.1>标签选择器---故名思议，通过标签名来选择元素

作用范围：所有的p标签，字体颜色设置成红色

2.2>类选择器：所有样式类含 xx字段的元素，格式： .类值

作用范围：所有标签中 class属性等于c1的标签，字体颜色设置成红色

2.3>ID选择器：顾名思义，通过标签的id值选择标签，格式：#id值

作用范围：标签中id=name的元素字体颜色设置成红色，注：同一个html页面中不能存在相同的id，

2.4>通用选择器：使用 * 表示所有元素

2.5>各基础选择器优先级

ID选择器 > 类选择器 > 标签选择器 > 通用选择器

3>高级选择器

3.1>并集选择器，又称分组选择器，用于定义多个不同类型标签相同的样式。

3.2>交集选择器：通过标签和属性（类属性或id属性）来限制作用范围，

3.3>后代选择器

作用于某个标签所包含的所有指定元素，

如 div p {xx：xx}，定义div下面所有p标签，样式xx=xx

3.4>子元素选择器

通过 > 连接，仅作用于子元素

如 div p {xx：xx}，定义直属div下面的p标签，样式xx=xx

3.5>毗邻选择器

如 div+p {xx：xx}

找到所有紧挨在div后面的第一个p标签，设置xx样式=xx

3.6>兄弟选择器

如 div~p {xx：xx}

找到所有div标签后面同级的p标签，设置xx样式=xx

3.7>属性选择器

除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素

--->根据属性查找 [属性]{xx：xx}

--->根据属性和值查找 [xx='xx']{xx:xx}

--->其他扩展用法

找到所有title属性以aa开头的元素 [title^='aa']{xx:xx}

找到所有title属性以aa结尾的元素 [title$='aa']{xx:xx}

找到所有title属性包含aa的元素 [title*='aa']{xx:xx}

找到所有title属性(有多个值或值以空格分割)中有一个值为aa的元素 [title~='aa']{xx:xx}

3.8>表单常用

input[type="text"] {
background-color: #13ff67;
}