CSS学习笔记（子元素选择器~通配符选择器）

子元素选择器

找到指定标签中所有特定的子元素。（它的儿子）

标签1>标签2{
	属性：值；
}

div>p{
     color:red;
}
/*或者*/
.hhhh>.hahaha{
	color:blue;
}
/*或者*/
div>ul>li>p{
	color:yellow;

<div class="hhhh">
	<p>   </p>
	<ul>
		<li>
			<p class="hahaha">   </p>
		</li>
	</ul>
</div>
<p>   </p>

会找到第1个p标签，不会找到第二个p标签。
注意
1.子元素标签只会找到“儿子”。
2.标签与标签之间要用>隔开。
3.子元素不仅仅可以使用标签名称，也可以使用其他选择器。

交集选择器

选择器1选择器2{
	属性：值；
}

p.text1{
            color:red;
        }

<p>嘻嘻嘻</p>
<p class="text1">哈哈</p>
<p class="text1">哈</p>
<p class="text2">哈哈哈</p>

先找到p标签，再找到类选择器值为text1的
那部分。就是找到class="text1"的p。
注意
1.选择器和选择器之间没有任何连接符号。
2.可以使用标签、id选择器、类选择器。
3.仅作为了解，因为直接用id选择器或者class选择器更为简便。

并集选择器

给所有选中的选择器设置属性。

.text1,.text2{
            color:red;
        }

<p>嘻嘻嘻</p>
<p class="text1">哈哈</p>
<p class="text2">哈哈哈</p>

注意
1.选择器和选择器之间用逗号连接。
2.可以使用标签、id选择器、类选择器。

兄弟选择器

1.相邻兄弟选择器
给指定选择器后面紧跟的那个选择器选中的标签设置属性。

h1+p{
            color:red;
        }

<h1>我是标题1</h1>
<p>嘻嘻嘻</p>
<p >哈哈

只能选择紧跟h1后紧跟的那个p标签。
用加号连接。

2.通用兄弟选择（用~连接）
给指定选择器后面所有的同级另一个指定的标签设置属性。

h1~p{
            color:red;
        }

<h1>我是标题1</h1>
<P>嘻嘻嘻</P>
<p >哈哈
<a href="#">点这里</a>
<P>啦啦啦啦</p>

3个p标签都会选中。

序选择器

1.同级别的第几个
:first-child同级别的第1个。
:last-child同级别的最后1个。
:nth-child(3)同级别的第几个，括号里的数字是几，就是第几个，1~最后都可以。
:nth-last-child(2)同级别中倒数第n个。
:only-child选中父元素中唯一的元素。
:nth-child(odd)同级别里的奇数序号的标签。
:nth-child(even)同级别里偶数序号的标签。
:nth-child(x*n+y)同级别里满足x*n+y公式的序号。n从0开始，x、y自定义。

p:first-child{
            color:red;
        }

<p>哈哈哈哈</p>
<p>呵呵呵呵</p>
<div>
    <p>额鹅鹅鹅</p>
    <p>嗯嗯嗯呃</p>
</div>

会选中第1个p和第3个p，因为他们两个都是同级别里的第1个p。
2.同级别同类型的第几个
:first-of-type同级别同类型的第1个
:last-of-type同级别同类型的最后1个
:nth-of-type(2)同级别中同类型中第n个。
:nth-last-of-type(2)同级别中同类型的倒数第n个。
:only-of-type选中父元素中唯一类型的某个标签。
:nth-of-type(odd)同级别中同类型的奇数序号的标签。
:nth-of-type(even)同级别中同类型的偶数序号的标签。
:nth-of-type(x*n+y)同级别中同类型的满足x*n+y公式的序号的标签。n从0开始，x、y自定义。

p:first-of-type{
            color:red;
        }

<h1>我是标题</h1>
<p>哈哈哈哈</p>
<p>呵呵呵呵</p>
<div>
    <p>额鹅鹅鹅</p>
    <p>嗯嗯嗯呃</p>
</div>

会选中第1个p和第3个p，因为它们都是同级别中同类型的第1个p标签。

属性选择器

根据指定的属性名称找到对应的标签，然后设置属性。
1.[attribute]

p[id]{
            color:red;
        }

<h1 id="rrr1">我是标题</h1>
<p id="rrr2">哈哈哈哈</p>
<p id="rrr3">呵呵呵呵</p>
<div>
    <p>额鹅鹅鹅</p>
    <p id="rrr4">嗯嗯嗯呃</p>
</div>

找到p里有id属性的那些。
2.[attribute=value]

p[class=cc]{
            color:red;
        }

<p class="cc">哈哈哈哈</p>
<p class="bb">呵呵呵呵</p>
<div>
    <p class="cc">额鹅鹅鹅</p>
    <p class="dd">嗯嗯嗯呃</p>
</div>

找到p中class="cc"的那些。

应用

表单

input[type=text]{
            属性：值；
        }

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">

找到type="text"的那个input标签。
3.属性的取值是以什么开头的 [attribute]
3.1[attribute^=value] （CSS3）

p[class^=c]{
            color:red;
        }

<p class="abc-c">哈哈哈哈</p>
<p class="abcb">呵呵呵呵</p>
<p class="cc">额鹅鹅鹅</p>
<p class="ddc">嗯嗯嗯呃</p>
<P class="kk">啦啦啦啦</P>

会选中第1、2个p标签，因为它们的class属性都是以abc开头的。
3.2[attribute|=value] (CSS2)

p[class|=abc]{
            color:red;
        }

只会选中第1个p，这种格式只能找到value和其他内容被-隔开的。
4.属性的取值是以什么结尾的
[attribute$=value] (CSS3)
5.属性的取值是否包含某个特定的值
5.1[attribute*value] (CSS3)

p[class*=c]{
            color:red;
        }

<p class="abc-c">哈哈哈哈</p>
<p class="abcb">呵呵呵呵</p>
<p class="cc">额鹅鹅鹅</p>
<p class="dd c">嗯嗯嗯呃</p>
<P class="kk">啦啦啦啦</P>

选中第1、2、3、4个，因为它们的value都包含c。
5.2[attribute~=value]

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

只会选中第4个，因为这种格式里的value要和其他内容被空格隔开。

通配符选择器

给当前界面上所有标签设置属性。

*{
            color:red;
        }

因为通配符选择器是要给页面所有的标签设置属性，所以当标签过多时，会影响它的性能，所以一般不用通配符选择器。