CSS-选择器

 

一: CSS选择器概述

选择器用于选择要进行CSS修饰的HTML片段, 主要有基本选择器和高级选择器两种

二: 基本选择器

2.1 标签选择器

• 直接使用标签名选择,会选中页面中所有的同名标签

html/css

<div>
    <p>这是一个段落标签</p>
    <span>这是一个span标签</span>
</div>

p{
   font-family: 华文行楷;
}

span{
    font-family: 华文行楷;
}

或者多个标签选择器选择 中间使用逗号分隔

p,span{
    font-family: 华文行楷;
}

2.2 id选择器

• 同一个页面id唯一
• 每个标签都可以设置id
• id命名规则,字母,数字,下划线,区分大小写
• 使用#号选择

html

<div>
    <p id="p1">这是一个段落标签</p>
    <span id="span1">这是一个span标签</span>
    <h1 id="h"> 这是一个h标签</h1>
</div>

css

#p1{
    background-color: green;
}

#span1{
    font-family: 华文行楷;
}

#h{
    color: red;
}

2.3 类选择器

• class选择器,将样式归类
• 同一个标签可以有多个类
• 使用点号选择

HTML

<div>
    <p class="blue big_size">这是一个段落标签</p>
    <span class="big_size xiahx">这是一个span标签</span>
    <h1 class="blue xiahx"> 这是一个h标签</h1>
</div>

CSS

.blue{
    background-color: blue;
}

.big_size{
    font-size: 20px;
}

.xiahx{
    text-decoration: underline;
}

三: 普通选择器注意点

• 尽可能的使用class,
• class要尽可能的小,可以为每个标签设置多个class
• id少用,JS时用

四: 高级选择器

4.1 后代选择器

• 空格隔开
• 使用频率比较多

HTML

<div class="father">I am father
    <div class="son">I am son
            <div class="son"> I am son too</div>
    </div>
</div>

CSS

.father .son{
    font-size: 21px;
}

4.2 子代选择器

• 使用>表示

4.3 并集选择器

• 多个选择器使用逗号分隔

比如下面这个例子中,将页面所有的标签去除margin 和 padding

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }

4.4 交集选择器

• 使用点号来表示交集选择
• 第一个选择器是标签选择器,第二个选择器是类选择器

HTML

<div>I am a pure div
    <div class="active">I have a active class</div>
</div>

CSS

div.active{
    font-size: 21px;
}

 五: 属性选择器

根据标签的属性进行选择

 1 /*根据属性查找*/
 2             /*[for]{
 3                 color: red;
 4             }*/
 5             
 6             /*找到for属性的等于username的元素 字体颜色设为红色*/
 7             /*[for='username']{
 8                 color: yellow;
 9             }*/
10             
11             /*以....开头  ^*/ 
12             /*[for^='user']{
13                 color: #008000;
14             }*/
15             
16             /*以....结尾   $*/
17             /*[for$='vvip']{
18                 color: red;
19             }*/
20             
21             /*包含某元素的标签*/
22             /*[for*="vip"]{
23                 color: #00BFFF;
24             }*/
25             
26             /**/
27             
28             /*指定单词的属性*/
29             label[for~='user1']{
30                 color: red;
31             }
32             
33             input[type='text']{
34                 background: red;
35             }

六 伪类选择器

• 主要作用于a标签
• link 没有访问过的
• visited访问过后的样式
• hover 鼠标悬停时的样式
• active 鼠标按住时的样式

6.1 link

HTML

<div class="box">
    <ul>
        <li class="item">
            <a href="#">百度一下</a>
        </li>
    </ul>
</div>

CSS

.box ul li.item a:link{
    color: red;
}

6.2 visited

 CSS

.box ul li.item a:visited{
    color: yellow;
}

 6.3  hover

CSS

.box ul li.item a:hover{
    color: blue;
    font-size: 21px;
}

 

6.4 active

CSS

.box ul li.item a:active{
    color: green;
    font-size: 30px;
}

 7 伪元素选择器

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }