+CSS+选择器の変更点

追加された行はこの色です。
削除された行はこの色です。
+CSS+选择器へ行く。
+CSS+选择器の差分を削除
#author("2022-12-20T13:32:39+08:00","default:Admin","Admin")
#author("2022-12-20T13:54:54+08:00","default:Admin","Admin")
[[スタイルシートCSS]]

#contents

* 后代选择器 [#wbda4a15]

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在内层标签前面，中间用空格隔开。

语法：元素1 元素2 {样式声明}元素1和元素2中间用空格隔开元素1是父级，元素2是子级，最终修改的样式是元素2

* 子选择器 [#q9125c93]

子选择器只能选择作为某元素的最近一级子元素。语法：元素1>元素2 {样式声明}元素1和元素2中间用大于号隔开元素1是父级，元素2是子级，最终修改的样式是元素2

* 相邻兄弟选择器 [#u7b73961]

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

#codeprettify{{
h1 + p {margin-top:50px;}
}}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
* 并集选择器 [#w59633b0]

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：元素1,元素2 {样式声明}元素1和元素2中间用逗号隔开最终修改的样式是元素1和元素2

* 链接伪类选择器 [#nca20160]

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

#codeprettify{{
a:link        /*选择所有未被访问的链接*/
a:visited     /*选择所有已被访问的链接*/
a:hover       /*选择鼠标指针位于其上的链接*/
a:active      /*选择活动链接(鼠标按下未弹起的链接)*/
}}

为了确保选择器生效，需要按照LVHA的顺序进行声明：link-visited-hover-active链接伪类选择器实际开发常用写法：

#codeprettify{{
a {
   color: gray; 
}
a:hover {
   color:red; /*鼠标经过的时候，由原来的灰色变成红色*/
}
}}

* focus伪类选择器 [#r3568328]

focus伪类选择器用于获取焦点的表单元素语法

#codeprettify{{
input:focus {
    background-color:yellow;
}
}}

* 复合选择器总结 [#q7c68478]

|选择器|作用|特征|隔开符号及用法|h
|后代选择器|用于选择后代元素|可以是外标签里包含的所有子标签|用空格隔开|
|子代选择器|选择最近一级元素|只能是最近一级标签|用大于号隔开|
|并集选择器|选择某些相同样式的元素|可以用于集体声明|用逗号隔开|
|链接伪类选择器|选择不同状态的链接|跟链接有关|实际开发常用写法：a{}和a:hover|
|focus伪类选择器|选择获得光标的表单|跟表单有关|input:focus|



#hr();
Comment：
#comment_kcaptcha
选择器 の変更点

选择器の変更点
