选择器整理博客

1.元素选择器

• 作用：根据标签名来选中指定的元素
• 语法：标签名{ }

例如：

p{
color:red;
font-size:20px
}

2.id选择器

• 作用：根据元素的id属性值选中一个元素，id不能重复使用
• 语法：#id属性值{ }

例如：

p{
color: pink;
font-size: 100px;
}

#red{
color: green;
}

注意：如果id属性值中只有color，而没有p属性的其他值（例如没有font-size），则font-size的值和p属性中的一样。

3.类选择器（class选择器）

• 作用：是一个标签的属性，与id类似，不同的是class可以重复使用
• 语法：.class属性值{ }

可以通过class属性为元素分组

例如：

 p{
color: pink;
font-size: 20px;
}

#red{
color: green;
}
.aqua{
color: aqua;
}

4.通配选择器

• 作用：选中页面中的所有元素
• 语法：*{ }

例如：

*{
color:red;
}

复合选择器

交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1.选择器2.选择器3.选择器n{ }

例如：

p{
color: pink;
font-size: 20px;
}

.aqua{
color: aqua;
}

div.aqua{
color: brown;
font-size: 50px;
}

并集选择器

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1，选择器2，选择器n{ }

注意：交集使用的是点，并集使用的是逗号

例如：

h,span{
color: chartreuse;
font-size: 30px;
}

关系选择器：
父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素。一个元素的父元素也是它的祖先元素。
后代元素：直接或间接被祖先元素包含的元素叫做后代元素。
兄弟元素：拥有相同父元素的元素称为兄弟元素

例如：

<div>
我是一个div
   <P>
我是div中的p元素
<span1>我是p元素的span元素</span1>
   </P>

<span2>我是div的span元素</span2>
</div>

后代元素选择器

• 作用：可以选中指定元素内的指定后代元素
• 语法：祖先 后代{ }

例如：

div span{
color: aquamarine;
}

兄弟元素选择器

• 作用：选择下一个兄弟
• 语法：前一个+下一个

例如：

p+span{
color: red;
}

<div>
我是一个div
   <P>
我是div中的p元素
<span>我是p元素的span元素</span>
   </P>

<span>我是div的span元素</span>
<span>我是div的span元素</span>
<span>我是div的span元素</span> 

此时只会选择p元素下一个的兄弟元素

注意：兄弟元素选择器只对兄弟元素下面的兄弟有效。

属性选择器：

• [属性名] 选择含有指定属性的元素
• [属性名=属性值] 选择含有指定属性和属性值的元素
• [属性名字^=属性值] 选择属性值以指定值开头的元素
• [属性名$=属性值] 选择属性值以指定值结尾的元素
• [属性名*=属性值] 选择属性值中含有某值的元素的元素

例如：

p[title]{
   color: orange;
}
p[title="!"]{
   color: red;
}
p[title^="abc"]{
   color: green;
}

p[title$="de"]{
   color: pink;
}
p[title*=cd]{
   color:cyan;
}

   <p title="hello">第一行</p>
   <p title="world">第二行</p>
   <p title="!">第三行</p>
   <p title="abc">ABC</p>
   <p title="def">DEF</p>
   <p title="abcde">ABCDE</p>
  <p title="edcba">EDCBA</p>
  <p title="aabcde">AABCDE</p>

伪类选择器

伪类

• 作用：用来描述一个元素的特殊状态，比如第一个子元素、鼠标移动的元素
• 语法：一般情况下都是使用一个冒号开头

例1：

:first-child/*表示第一个子元素*/
:last-child/*表示最后一个子元素*/
:nth-child()/*选中第n个子元素,如果直接写n，则表示全部,2n表示选中偶数的元素*/



ul>li:first-child/*表示第一个子元素*/
{
   color:blue;
}
ul>li:last-child/*最后一个子元素*/{
   color:brown;
}
ul>li:nth-child(4)/*选中第n个子元素*/{

color: aqua;

}


<ul>

   <li>第一个</li>
   <li>第二个</li>
   <li>第三个</li>
   <li>第四个</li>
   <li>第五个</li>
</ul>

例2：

将html代码添加一行span元素

<ul>
   <span>我是span元素</span>
   <li>第一个</li>
   <li>第二个</li>
   <li>第三个</li>
   <li>第四个</li>
   <li>第五个</li>
</ul>

其余部分伪类：

:first-of-type

:last-of-type

:nth-of-type

超链接的伪类

：link
作用：用来表示没访问过的链接

:visited
作用：用来表示访问过的链接

例如：

:hover用来表示鼠标移入的状态
:active 用来表示鼠标点击

伪元素
作用：表示页面中的一些特殊的并不真实存在的元素（表示的是特殊的位置，例如首字母等等）
语法：双冒号开头
部分常用伪元素

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容变色
::before 元素的开始
::after 元素的最后
注意：before与after必须结合content属性来使用，并且content的内容是无法选中的