CSS学习笔记——复合选择器

1.交集选择器

交集选择器由两个选择器组成，第一个为标签选择器，第二个为class选择器/id选择器，两个选择器之间不能使用空格隔开，使用点号。

<p class="one">Hello</p>
<p>World</p>

p.one {
    color: skyblue;
    font-size: 25px;
}
带有one选择器名的p标签起作用

2.并集选择器

多个选择器具有同一种样式，中间用逗号隔开，标签选择器，类选择器，id选择器都可以。

strong,em,.two { strong，em标签，.two类名
    color: red;
}

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

用于选择元素的后代或者元素组的后代。
写法：外层标签写在前面，中间空格，内层标签写在后面，当标签发生嵌套时，内层标签就是外层标签的后代 ，一层一层的选择，直到选到需要样式的标签。

ul li p {
    color: blueviolet;
}

4.子元素选择器、

子元素选择器只能选择作为某元素子元素的元素，写法：父级标签写在前面，子级标签写在后面，中间用>进行连接。

  <ul class="three">
        <!-- 子级标签 -->
        <li>子标签</li>
        <!-- 非子级标签 -->
        <li>
            <p>非子标签</p>
            <p>非子标签</p>
        </li>
    </ul>
css代码：
.three > li {
    color: green;
}

注意：
1.子级标签是父级标签内部自带的标签，与新增的标签无关；
2.符号左右两侧需要各自保留一个空格。

5.属性选择器

选取某些标签带有特殊属性的选择器，使用中括号[特殊属性或者等式] ，如 div[class=font15] input[type=text]
属性选择器使用的一些特殊符号：class^=font 以font开头; class$=font 以font结尾 class*=font font在任意位置即可。

HTML代码：
    <input type="text">
    <input type="text">
    <input type="submit">
    <input type="reset">
    <input type="checkbox">
    <div class="font20">Hello World font-size:20</div>
    <div class="font15">Hello World font-size:15</div>
    <div class="font25">Hello World font-size:25</div>
CSS代码：
div[class=font25] { font25起作用
    color:skyblue ;
    font-size: 25px;
}
input[type=text] { text文本框起作用
    color: red;
}

6.伪元素选择器

        E::first-letter  文本的第一个单词或者字 如：p::frist-letter
        E::first-line  文本第一行
        E::selection 改变选中文本的样式