CSS 选择器（一）

CSS 选择器（一）

CSS 基础

css优点

方便省事，美化功能强大

css格式

必须写在style标签中
style必须放在head中

<style type="text/css">
选择器 {
      属性名称 : 属性值;
      属性名称 : 属性值;
      .......
}
</style>

标签选择器

根据指定的标签在当前页面中选中所有该名称标签
格式
标签名 {
属性:值;
}
会选中左右该标签，不能单独选中某一个标签

id选择器

根据指定的id选择到该属性，id名不能重复
id名称只能有字母数字下划线组成，不能以数字开头
id名称不能是重复的
id在企业开发中用的如果仅仅是为了设置样式是不会使用id选择器的，因为在前端开发中使用id选择器一般是为了添加js

<style>
#id1 {
   属性:值;
}
</style>
<p id="id1"></p> /*会被选中*/
<p id="id2"></p>

类选择器

根据指定的类名选择到该属性，类名可以重复
每一个标签都可以同时有类选择器和id选择器
命名与id选择器规范一样
每一个标签都可设置多个类名

• class=“class_1 class_2 class_3 …”

<style>
.id1 {
   属性:值;
}
</style>
<p class="id1" id="id2"></p> /*会被选中*/
<p class="id1"></p> /*都会被选中*/

id选择器和类选择器的区别

• id命名不可重复
• 一个标签id只可以有一个

后代选择器

找到指定标签的所有后代设置属性
先找到标签名称1的标签，再在这个标签内找到标签名称2的所有标签
必须用空格隔开,后代可以无限延伸:1 2 3 4 5 …
只要是标签1中的都是他的后代
标签名称不仅仅只能用标签名，也可以用类名或id

<style>
div p {
   属性:值;
}
</style>
<div>
<p class="id1" id="id2"></p> /*会被选中*/
<p class="id1"></p> /*会被选中*/
<div>
    <p class="id1"></p> /*会被选中*/
</div>
</div>
<p class="id1"></p>

子元素选择器

找到指定标签中的所有直接子元素名称叫做标签名称2的元素
中间用“>”连接切之间不能有空格,后代可以无限延伸
标签名称不仅仅只能用标签名，也可以用类名或id

<style>
div>p {
   属性:值;
}
</style>
<div>
<p class="id1" id="id2"></p> /*会被选中*/
<p class="id1"></p> /*会被选中*/
<div>
    <p class="id1"></p> /*不会被选中*/
</div>
</div>
<p class="id1"></p>

后代选择器和子元素选择器区别

• 后代选择器使用空格连接，子元素选择器使用>连接
• 子元素选择器只会选中直接子标签;后代选择器会选中其下的所有特定标签