CSS选择器

CSS的基本语法

在<style></style>区域内的不属于html，应该遵循的是css的语法规范

css注释：
/* 注释内容 */（相当于html中的<!--注释内容-->）

css基本语法

• 选择器 ：通过选择器可以选中页面中的指定元素
• 声名块：通过声明块来设置元素的样式，声明块由一个一个的声明组成。声明是一个名值对结构（一个样式名对应一个样式值，名和值之间用冒号连接，用分号结尾）

例如：

p{color：red；}

其中p为选择器，color：red；为声明块

常用选择器

1.元素选择器

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

例如：

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

此时html中的所有p标签全部为红色，大小为20px

2.id选择器

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

例如：

CSS代码：

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

#red{
color: green;
}

html代码：

<p>大鹏一日同风起</p>
<p id="red">扶摇直上九万里</p>

效果：

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

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

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

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

例如：
CSS代码：

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

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

html代码：

<p>大鹏一日同风起</p>
<p id="red">扶摇直上九万里</p>
<p class="aqua">王侯将相，宁有种乎</p>
<p class="aqua">大和之间天上来，奔流到海不复回</p>

效果:

4.通配选择器

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

例如：

*{
color:red;
}

复合选择器

交集选择器

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

例如：
CSS代码

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

.aqua{
color: aqua;
}

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

html代码

<p>大鹏一日同风起</p>
<p>扶摇直上九万里</p>
<p class="aqua">王侯将相，宁有种乎</p>
<div class="aqua">大河之剑天上来，奔流到海不复回</p>

效果：

选择器分离（并集选择器）

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

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

例如：

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

html代码

<h>我是h</h>
<span>我是span</span>

效果：

关系选择器

1.几种关系

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

例如：

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

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

其中div为p元素、span2的父元素，p、span2为div的子元素
div为p、span1、span2的祖先元素，p、span1、span2为div的后代元素 p元素为span1的父元素
p元素与span2为兄弟元素

2.子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素>子元素{}

例如
css代码

div>span{
   color: orange;
}

html代码

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

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

效果：

3.后代元素选择器

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

例如：

div span{
color: aquamarine;
}

html代码同上

效果：

3.兄弟元素选择器

• 作用1：选择下一个兄弟
• 语法1：前一个+下一个
  例如：
  css代码：

p+span{
color: red;
}

html代码：

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

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

效果：

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

• 作用2：选择下面所有的兄弟
• 语法2：兄~弟

例如：将上述css代码中的+变为~

p~span{
color: red;
}

效果：

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

属性选择器

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

例如：

css代码

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

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

html代码

   <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>

效果：

效果分析:

p[title]表示p元素中含有title的所有文字全部为organge颜色；此时所有p元素全是orange颜色。

p[title=“!”]表示将p元素中title为“！”的设置为red颜色；此时第三行变为红色。

p=[title^=“abc”]表示p元素中title开头为“abc”的设置位绿色，此时ABC和ABCDE全部为绿色。
p=[title$=“de”]表示p元素中以de结尾的设置为pink色，此时ABCDE和AABCDE都是pink颜色
p=[title*=“cd”]表示p元素中含有cd的都设置为cyan颜色（无论cd处在什么位置，只要cd相连就行），此时ABCDE和AABCDE变为cyan颜色。

伪类选择器

1.伪类

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

例如：

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

例一：

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

color: aqua;

}

html代码

<ul>

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

例二：
将html代码添加一行span元素

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

效果对比：例一的第一行变为了红色，例二第一行没有变为红色的原因是伪类都是根据所有的子元素进行排序，ul>li:first-child的第一个子元素不是li元素，而是span元素，因此不会变

其余部分伪类：

:first-of-type

:last-of-type

:nth-of-type

这三个伪类与上述三个伪类区别是，这三个伪类只寻找同类型元素进行排序，例如ul>li:first-of-type只需找ul中的li元素进行排序

例如：
css代码：

ul>li:first-of-type
{
   color:blue;
}

html代码：

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

效果：

此时，伪类不会以span元素作为第一个元素

:not()否定伪类

• 作用：将符合条件的元素从选择器中去除

例如：
css代码：

ul>li:not(:nth-child(3)){
color:aqua;
}

html代码

<ul>

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

效果：

此时除了第三个li元素，其余元素全部变了颜色

超链接的伪类

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

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

例如：
css代码

a:link{
color:red;
}
a:visited{
   color: orange;
}

html代码：

<a href="http://www.baidu.com">访问过的链接</a>
<br><br>
<a href="http://www.baidu.com">没有访问过的链接</a>

效果：

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

伪元素

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

部分常用伪元素

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 表示选中的内容变色
• ::before 元素的开始
• ::after 元素的最后

注意：before与after必须结合content属性来使用，并且content的内容是无法选中的

例如：
css代码：

  p::first-letter{
      font-size: 20px;
      color: aqua;
   }

   p::first-line{
background-color: yellow;
      color: red;
   }

p::selection{
color: aqua;
}


div::before{
content: "你好";
color: brown;
}

html代码：

<div>      hello,world!come on.    </div>

<p>Remember, my son, you have to work. Whether you handle a pick or a pen, a wheel-barrow or a set of books, you must work. If you look around, you will see the men who are the most able to live the rest of their days without work are the men who work the hardest. Don't be afraid of killing yourself with overwork. It is beyond your power to do that on the sunny side of thirty. They die sometimes, but it is because they quit work at six in the evening, and do not go home until two in the morning. It is the interval that kills, my son. The work gives you an appetite for your meals; it gives you a perfect and grateful appreciation of a holiday.</p>

效果：

当我们选中段落时，颜色会变为aqua颜色，最开始的你好为content里面内容，无法选中。