html5网站建站书,绍兴seo排名收费,wordpress登录地址更改,现在办宽带多少钱一年CSS复合选择器#xff08;一#xff09; 1.交集选择器2. 并集选择器3. 后代选择器4. 子代选择器5.兄弟选择器5.1相邻兄弟选择器#xff1a;5.2通用兄弟选择器#xff1a; 6.属性选择器 1.交集选择器
作用#xff1a;选中同时符合多个条件的元素。 交集有并且的含义#… CSS复合选择器一 1.交集选择器2. 并集选择器3. 后代选择器4. 子代选择器5.兄弟选择器5.1相邻兄弟选择器5.2通用兄弟选择器 6.属性选择器 1.交集选择器
作用选中同时符合多个条件的元素。 交集有并且的含义通俗理解即…又… 的意思例如年轻且长得帅。 语法选择器1选择器2选择器3…选择器n {}举例
/* 选中类名为beauty的p元素为此种写法用的非常多 */
p.beauty {color: blue;
}
/* 选中类名包含rich和beauty的元素 */
.rich.beauty {color: green;
}
注意
有标签名标签名必须写在前面。id 选择器、通配选择器理论上可以作为交集的条件但实际应用中几乎不用 —— 因为没 有意义。交集选择器中不可能出现两个元素选择器因为一个元素不可能即是 p 元素又是 span 元 素。用的最多的交集选择器是元素选择器配合类名选择器例如 p.beauty 。
2. 并集选择器
作用选中多个选择器对应的元素又称分组选择器。 所谓并集就是或者的含义通俗理解要么…要么… 的意思 例如给我转10万块钱 或者我报警。 语法选择器1, 选择器2, 选择器3, … 选择器n {} 多个选择器通过 , 连接此处 , 的含义就是或。 举例
/* 选中id为peiqi或类名为rich或类名为beauty的元素 */#peiqi,.rich,.beauty {font-size: 40px;background-color: skyblue;width: 200px;}
注意
并集选择器我们一般竖着写。任何形式的选择器都可以作为并集选择器的一部分 。并集选择器通常用于集体声明可以缩小样式表体积。
3. 后代选择器
作用选中指定元素中符合要求的后代元素。语法选择器1 选择器2 选择器3 … 选择器n {} 先写祖先再写后代 选择器之间用空格隔开空格可以理解为 xxx 中的其实就是后代的意思。 选择器 1234…n 可以是我们之前学的任何一种选择器。 举例
/* 选中ul中的所有li */
ul li {color: red;
}
/* 选中ul中所有li中的a */
ul li a {color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {color: blue;
}注意
后代选择器最终选择的是后代不选中祖先。儿子、孙子、重孙子都算是后代。结构一定要符合之前讲的 HTML 嵌套要求例如不能 p 中写 h1 ~ h6 。
4. 子代选择器
作用选中指定元素中符合要求的子元素儿子元素。先写父再写子 子代选择器又称子元素选择器、子选择器。 语法选择器1 选择器2 选择器3 … 选择器n {} 选择器之间用 隔开 可以理解为 xxx 的子代其实就是儿子的意思。 选择器 1234…n 可以是我们之前学的任何一种选择器。 举例
/* div中的子代a元素 */
diva {color: red;
}
/* 类名为persons的元素中的子代a元素 */
.personsa{color: red;
}注意
子代选择器最终选择的是子代不是父级。子、孙子、重孙子、重重孙子 … 统称后代子就是指儿子。
5.兄弟选择器
5.1相邻兄弟选择器
作用选中指定元素后符合条件的相邻兄弟元素。 所谓相邻就是紧挨着他的下一个简记睡在我下铺的兄弟。 语法 选择器1选择器2 {} 。示例
/* 选中div后相邻的兄弟p元素 */
divp {color:red;
}5.2通用兄弟选择器
作用选中指定元素后符合条件的所有兄弟元素。简记睡在我下铺的所有兄弟语法 选择器1~选择器2 {} 。实例
/* 选中div后的所有的兄弟p元素 */
div~p {color:red;
}注意两种兄弟选择器选择的是下面的兄弟。
6.属性选择器 作用选中属性值符合一定要求的元素。 语法 [属性名] 选中具有某个属性的元素。[属性名“值”] 选中包含某个属性且属性值等于指定值的元素。[属性名^“值”] 选中包含某个属性且属性值以指定的值开头的元素。[属性名$“值”] 选中包含某个属性且属性值以指定的值结尾的元素。[属性名*“值”] 选择包含某个属性属性值包含指定值的元素。 举例 /* 选中具有title属性的元素 */div[title]{color:red;}/* 选中title属性值为atguigu的元素 */div[titleatguigu]{color:red;}/* 选中title属性值以a开头的元素 */div[title^a]{color:red;}/* 选中title属性值以u结尾的元素 */div[title$u]{color:red;}/* 选中title属性值包含g的元素 */div[title*g]{color:red;}
