【CSS基础学习】复杂选择器

群组选择器

格式

选择器1,选择器2,,,选择器n{声明的属性和属性值}

例：

p,h1{color: blue;}

用于对于多个选择器进行样式修改，由简单选择器组合而成的选择器，可以是简单选择器中的任意组合，如上面代码例，就是修改了p标签和h1标签的字体颜色。

属性选择器

根据属性名查找元素

格式

元素[属性名]{	声明的属性和属性值;}

例：

p[id]{color: blue;}

前面添加元素的名字，然后后面加上属性名，比如上例，就是p标签，其中带有id的元素，然后把字体颜色设置为蓝色。

根据属性值精确查找

格式

元素[属性名=属性值]{	声明的属性和属性值;}

例：

p[class = 'p2']{color: blue;}

和上面的根据属性名查找差不多，只不过更加精确了，精确到了属性名后面的属性值，上例就是作用于p标签，只不过条件是为带有class属性，并且属性值为p2的p标签。

多属性选择器

格式

元素[属性名或属性表达式][属性名或属性表达式]..{	声明的属性和属性值;}

例：

p[title][class]{color: blue;}

元素后面加。属性名或属性表达式，可以加+∞个，但是没必要。上例为：设置title属性和class属性的段落p标签的样式

根据属性值近似查找

格式

元素[元素名~=属性值]{	声明的属性和属性值;}

或

元素[属性名|=值]{	声名的属性和属性值;}

例：

p[class~='red']{color: blue;}

注意，这里是~=，为约等于，就是找满足符合约等于条件的标签，上例为：设置class属性的值，包含red属性名的标签

根据标签查找

格式

元素名1~元素名2{	声名的属性和属性值;}

例：

a~p{color: blue;}

a标签后面的每一个p标签，都进行了样式的修改。

派生选择器

后代选择器

格式

父类标签 子类标签{ /*注意俩标签中间有空格*/	声名的属性和属性值;}

例：

div strong{color: blue;}

后代选择器是用一个空格符隔开的两个或更多的简单选择器组成的字符串，可以是直接孩子节点，也可以是间接孩子节点，上例这样就把div里面的strong标签的样式进行了修改。

子元素选择器

格式

父标签>子标签{	声名的属性和属性值;}

例：

div>p>strong{color: blue;}

使用>分隔的直接孩子节点，比如是依次的直接孩子节点，不能一下跳跃到别的标签，上例为，按照div–>p–>strong，的顺序进行寻找，然后对strong标签的样式进行修改。

相邻兄弟选择器

格式

父标签+子标签{	声名的属性和属性值;}

例：

#div1 + p{color: blue;}

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。