CSS学习——选择器

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一人物的样式规则部分被称为选择器（选择符）。

标签选择器（元素选择器）

标签选择器是指用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名 {属性1：属性1；属性2：属性2；属性3：属性3；}

优点：能快速为页面中同类型标签指定统一样式

缺点：不能让设计差异化样式

    p {
        color: pink;
    }
    div{
        color: purple;
    }
    /*p div h1 span em i 这些标签作为选择器，我们称为“标签选择器”*/

类选择器

类选择器使用“.”（英文点号）进行标记，后面紧跟类名

.类名 {属性1：属性1；属性2：属性2；属性3：属性3；}

标签调用的时候用class=“类名”即可。

优势：可以为元素对象定义单独或相同的样式。

CSS命名规范：

长名称或词组可用中横线为选择器命名
不建议使用“_”下划线来命名
不要纯数字、中文等命名，尽量使用纯英文来表示

参考W3C规范手册

<head>
<title></title>
<style type="text/css">
.c-orange {   /*声明类样式*/
    color:orange;
}
</style>
</head>
<body>
<div class="c-orange">鸣人</div><!-- 引用类样式  -->
</body>

多类名选择器

注意：

样式显示效果跟类名先后顺序没有关系，受CSS样式书写的上下顺序有关
各类名之间空格隔开

<head>
    <title></title>
    <style type="text/css">
    .font20 {
        font-size: 20px;
        }
    .font14 {
        font-size: 14px;
        }   
    .pink {
        color:pink ;
    }
    .fontWeight {
        font-weight: bold;
    }

    </style>
</head>
<body>
    <div class="font20 pink fontWeight">亚瑟</div>
    <div class="font20">刘备</div>
    <div class="font14 pink">安其拉</div>
    <div class="font14">貂蝉</div>

</body>

id选择器

id选择器使用“#”进行标记，后面紧跟id名

#id名 {属性1：属性1；属性2：属性2；属性3：属性3；}

标签调用的时候用id=“类名”即可（只允许使用一次）

<head>
    <title></title>
    <style type="text/css">
    #big {  
        color:pink;
    }
    /*id 选择器使用与类选择器相似*/
    </style>
</head>
<body>
    <div id="big">熊大</div>
</body>

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

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

通配符选择器

用“*”号表示，能匹配页面中所有的元素

* {属性1：属性1；属性2：属性2；属性3：属性3；}

使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
    margin: 0;     /*定义外边距*/
    padding: 0;    /*定义内边距*/
}

<head>
    <title></title>
    <style type="text/css">
        * {
            color: pink;
        }
        /*"*"代表所有选择器*/
    </style>
</head>
<body>
    <p>我是段落</p>
    <div>我是段落</div>
    <span>我是段落</span>
    <em>我是段落</em>
    <strong>我是段落</strong>
    <h1>我是段落</h1>
</body>

伪类选择器

伪类选择器用于向某些选择器添加特殊效果。用“:”冒号表示。

链接伪类选择器

:link /未访问的链接/
:visited /已访问的链接/
:hover /鼠标移动到链接上/
:active /选定的链接/

注意：顺序尽量不要改变,按照lvha的顺序

<head>
    <title></title>
    <style type="text/css">
        a:link { /*未访问的链接*/
            font-size: 16px;
            color:gray;
            font-weight: 700;
        }
        a:visited { /*已访问的链接*/
            font-size: 16px;
            color:orange;
            font-weight: 700;
        }
        a:hover { /*鼠标移动到链接上*/
            font-size: 16px;
            color:red;
            font-weight: 700;
        }
        a:active { /*选定的链接*/
            font-size: 16px;
            color:green;
            font-weight: 700;
    </style>
</head>
<body>
    伪类选择器中的 链接伪类选择器 主要针对于 a
    <div>
        <a href="#">秒杀</a>
        <a href="#">闪购</a>

    </div>
</body>

实际工作中，简写即可

a { 
    font-size: 16px;
    color:gray;
    font-weight: 700;
}
a:hover {
    color:red;
}

结构（位置）伪类选择器（CSS3）

:first-child:选取属于其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):选取属于其父元素的第N个子元素，无论元素类型 even 偶数 odd 奇数如果用公式 n从0开始

:nth-last-child(n):选取属于其父元素的第N个子元素的每个元素，无论元素类型。从最后一个子元素开始计数

n可以是数字、关键词或公式

<head>
<title></title>
<style type="text/css">
    li:first-child {/*选择第一个孩子*/
        color: pink;
    }
    li:last-child {/*选择最后孩子*/
        color: purple;
    }
    li:nth-child(4) {/*选择第四个孩子 n代表第几个*/
        color: skyblue;
    }
    li:nth-child(odd){/*选择所有 odd 奇数的孩子 标签*/
        font-weight: 700;
    }
    li:nth-child(even){/*选择所有 even 偶数的孩子 标签*/
        font-weight: 400；
    }
    li:nth-child(2n){/*2n选择0,2,4,6,8...的孩子;3n选择0,3,6,9...的孩子 标签*/
        font-size: 20px;
    }
    li:nth-last-child(even){/*nth-last-child 从最后一个孩子开始数 倒数偶数， 即选择正数1,3,5,7的孩子*/
        font-style: italic;
    }

</style>
</head>
<body>
<ul>
    <li>第一个孩子</li>
    <li>第二个孩子</li>
    <li>第三个孩子</li>
    <li>第四个孩子</li>
    <li>第五个孩子</li>
    <li>第六个孩子</li>
    <li>第七个孩子</li>
    <li>第八个孩子</li>
</ul>
</body>

目标伪类选择器

:target 目标伪类选择器：可用于选取当前活动的目标元素

:target {
            color: pink;
            font-size: 30px;
        }