PHP从入门到精通，020第三章CSS之CSS选择器（DAY4第

2018-11-16 本文已影响2人极客研习社

（三）、CSS选择器

1、标准选择器：通配符选择器、标记选择器、类选择器、id选择器

（1）、通配符选择器

语法：* {属性: 值;}

* {color:red;}

注意：通配符是选择所有标记，但是少用，IE6不支持

案例：

<head>
  <meta charset="utf-8" />
  <title>极客研习社</title>
  <style type="text/css">
/*通配符*/
    * {
      background:green;
      font-size:30px;
      color:red;
      }
    </style>
</head>
<body>
  <p>HTML</p>
  <h1>CSS</h1>
  <ul>
    <li>PHP</li>
    <li>MYSQL</li>
    <li>THINKPHP</li>
    <li>YII</li>
  </ul>
</body>

（2）、标记选择器

说明：直接写标记名当成选择器来使用，选择哪个标记当前这个页面中的所有这个标记都会发生变化

语法：标记名{属性:值}

p {color:red;}

案例：

h1 {
  font-size:100px;
  color:yellow;
  background:pink;
}

（3）、类选择器，又称“class选择器”

说明：每个HTML标记都有一个公共属性，class属性配合CSS使用的，这个class属性就是给某些或某个标记加一类样式。

语法：

.class 属性的值 {color:red;}

注意：类名可以给不同的标记加上，这个时候这些标记统称一类

在写CSS选择器时必须加点（.）

建议不管是某个或某些标记都使用类的方式

案例：

<head>
  <meta charset="utf-8" />
  <title>极客研习社</title>
  <style type="text/css">
/*通配符*/
    * {
      background:green;
      font-size:30px;
      color:red;
    }
/*类选择器*/
    .my {
      color:yellow;
      }
    </style>
</head>
<body>
  <p class="my">HTML</p>
  <h1>CSS</h1>
  <ul>
    <li>PHP</li>
    <li id="sql">MYSQL</li>
    <li>THINKPHP</li>
    <li>YII</li>
  </ul>
  <h1>Javascript</h1>
  <div class="my">HTML5</div>
</body>

（四）、id选择器

说明：每个HTML标记都有一个公共的属性id，每个id必须是唯一的。

语法：#id 的值 {color:red;}

注意：id选择器只是给一个标记加样式，一般is的动态效果使用。

id和class是分开使用的，id给js使用，class给css使用。

#sql {
  color:blue;
}

2、复杂选择器：组合选择器（多元素选择器）、后代选择器、子类选择器、伪类选择器

（1）、多元素选择器：

说明：把CSS的基本选择器进行组合，组合成多种选择器方式

语法：

div,p,ul,li,.class,.my,#id, {color:red;}

注意：大型网站一般都是用多元素来替代通配符

每个选择器用逗号（,）隔开。

所有的标记在浏览器中的默认效果不一样，所以必须对网站进行CSS初始化（去掉所有默认效果）

···
p,div,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,.my,.sql{
padding:0px;
margin:0px;
border:0px;
}
···

（2）、后代选择器

说明：在制作网站时会出现“嵌套”的形式，有可能是多级，而且每个多级里面的标记还相同，这个时候就可以选择某个标记中某个内容

语法：

···
第一代第二代第三代... {color:red;}
···

注意：如果某一代有相同的标记都会选择，需要每代都写清楚

p标签中不能嵌套一些块元素

（3）、子类选择器

说明：就是选择一代（子孙）

语法：父类 > 子类（选择器） {color:red;}

(4)、伪类选择器

说明：给超链接加样式的方法<a href="#"></a>

link：默认状态
hover：放上状态
active：当点击时的状态（不放手）
visited：访问过的状态

语法：

选择器:状态 {color:red;}

注意：一般是默认状态和访问过的状态设置成一样的效果，所有的标记都可以加伪类选择器。