css选择器

一.标签选择器

1. 前面在main.css中定义的<div><em>等选择器，称为标签选择器，此种选择器影响范围大，不能精确控制

特殊的为星号选择器，匹配所有标签，性能上有问题，慎用

margin:0;

padding:0；

}

二. id选择器

每个标签元素都有唯一的ID名，每次只作用于一个标签，不常用

main.css中写入
div{
    color:red;
}
#div2{
        color:blue;
}
 
原网页上<div>标签如下
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
</body>
 
效果：第一个div为红色，第二个div为蓝色，层叠样式表的效果

三. 类选择器

可用于多个标签元素中，一个标签元素上也可使用多个类，常用。

例子1：一个类用于多个标签元素

<head>
    <style type="text/css">
        .red{
       color:red;
       }
 
        #box{
         color:green;
       }
    </style>
</head>
 

<body>
<div class="red">这个第一个div</div>
<div class="red">这是第二个div</div>
<div id="box" class="red">这是第三个div</div>
</body>
 
实际效果为，第一，二个div为红色，但是第三个div为绿色，原因是id选择器的权重比类选择器大

例子2：一个标签元素上使用多个类

main.css的样式内容如下
 
.red{
        color:red;
}
 
.bold{
          font-weight:bold;
}
 
.yahei{
           font-family:'Microsoft Yahei';
}
 
网页中
<body>
    <div class="red bold yahei">这是第一个div</div>
</body>

四. 层级选择器

例子1，如下，有2行文本，并且在专业"软件工程"和“美术”上设置了<em>标签，那么此时页面上这两个专业名都会倾斜

.duanluo{
               text-indent:40px;
               font-size:20px;
}
 
<p class="duanluo">
你好，我叫韩妹妹，我的专业是<em>软件工程</em> 
</p>
 
<p>
你好，我叫李磊，我的专业是<em>美术</em>
</ p>

如果只想第一个<em>标签中的"软件工程"不倾斜，且改变颜色，需要用到层级选择器

.duanluo em{
        font-style:normal;
        color:pink;
}

例子2，列表中使用,多个层级选择器

.list{
      list-style:none；  #把列表前面的默认点号去掉
}
 
.list li{
         height:30px;
}
 
.list a{
         text-decoration:none;
         font-family:'Microsoft Yahei';
         font-size:20px;
}
 
html网页中写入
<ul class="list">
    <li><a href="">新闻1</a></li>
    <li><a href="">新闻2</a></li>
    <li><a href="">新闻3</a></li>
</ul>

五. 组选择器，作用是简化样式写法

例子1，如下，定义三个类选择器除了颜色不同，其他都相同

.box1{
          font-size:14px;
          text-indent:28px;
          color:red;
}
 
.box2{
          font-size:14px;
          text-indent:28px;
          color:blue;
}
 
.box3{
          font-size:14px;
          text-indent:28px;
          color:yellow;
}
 
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
<div class="box3">文字003</div>
</body>

可以用组选择器来简写，相同的样式写在一起，类名用逗号隔开，不同的样式单独写。

.box1,.box2,.box3{
         font-size:14px;
         text-indent:28px;
}
 
.box1{
         color:red;
}
.box2{
         color:blue;
}
.box3{
         color:yellow;
}

六. 伪类及伪元素选择器

常用的伪类选择器有hover，可用在所有标签上，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可通过样式在元素中插入内容

例子1，使鼠标停在链接标签<a>文字上时，文字变色

.list a{
         text-decoration:none;
         color:gray;
}
.list a:hover{
        color:blue;
}

例子2，使所有段落标签<p>中的文字，鼠标经过时都变色

 p:hover{
           color:red
}

例子3，在指定文字前面或者后面，自动加上想加的文字

.box1{
         color:red;
}
box2{
         color:green;
}
 
.box1:before{
        content:"在前面的文字 ";
        color:blue;
}
.box2:after{
        content:" 在后面的文字";
        color:blue;
}
 
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
</body>

效果就是页面显示：

在前面的文字文字001

文字002 在后面的文字

七. 做一个表格综合实例

<head>
    <style type="text/css">
        .goods_list{
            600px;
            height:200px;
            border:1px solid #333   #定义表格边框属性
            border-collapse:collapse;  #使边框变成一条线的效果
         }

         .goods_list th,.goods_list td{
             border:1px solid #333;
             text-align:center; #设置文字居中
        }
  
        #表头加背景色
        .goods_list th{
             backgroupd-color:blue; #设置背景为蓝色
             color:white;  #设置表头字体颜色为白色
         }


<table class="goods_list">
    <tr>
        <th>序号</th>
        <th>名称</th>
        <th>数量</th>
    </tr>
    <tr>
        <td>1</td>
        <td>苹果</td>
        <td>1000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>梨子</td>
        <td>500</td>
    </tr>
</table>