简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css常用选择器的使用——2019年1月15日
Blogger Information
Blog 5
fans 0
comment 0
visits 4993
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css常用选择器的使用——2019年1月15日
阿芃达个人博客
Original
1032 people have browsed it

总结：

css的选择器能够快速获取到相对应的标签，其中最为常用的是id、class、标签、以及伪类选择器

            1.全部选择器：在生成html文档之后，html文档会有自动生成的margin和padding，这时候就需要用到全部选择器‘*’去除；

           2.标签选择器：通过标签元素进行选择，可多选；

           3.层级选择器：也叫后代选择器，选择该标签元素后代中所有的标签元素；

           4.id选择器：通过设置id属性进行选择，选择方式‘#id名’，如果同时设置两个id名，只会选择前面的一个；

           5.class选择器：通过设置class属性进行选择，选择方式‘.class名’，可多选；

           6.属性选择器：对当前标签元素下的属性进行css样式设置时用到，最常见的地方如input[type=""]；

           7.群组选择器：同时进行多个样式修改，每个选择器用“,”隔开；

           8.相邻选择器：修改当前选择器后面的第一个元素的css样式时用到，设置方式是“当前选择器 + * ”；

           9.兄弟选择器：修改当前选择器并且是同一级别后面的所有元素的css样式，设置方式是“当前选择器 ~ * ”；

           10.伪类子元素选择器：  

                   first-child         修改当前元素下第一个子元素

                   last-child          修改当前元素下最后一个子元素

                   nth-child(i)        修改当前元素下任意一个元素，i从零开始

                   nth-last-child(i)   修改当前元素下从后往前数的任意一个元素，i从零开始

           11.伪类类型选择器：

                   first-of-type       修改当前第一个元素

                   last-of-type        修改当前最后一个元素

                   nth-of-type(i)      修改当前任意一个元素，i可以为任何值  

                   enabled             修改表单中处于激活状态元素的css样式

                   checked + *         修改当前选中按钮对应的文字时用到

                   focus               当前表单被选中触发

                   hover               鼠标经过时触发

                   invalid             当表单输入的内容与type不符时启用，常用在错误提醒时


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用选择器</title>
    <style>
    /*全部选择器*/
    * {
        margin: 0;
        padding: 0;
    }
    /*标签选择器*/
    ul {
        list-style: none;
        border: solid lightblue 2px;
        width: 550px;
        height: 50px;
    }
    /*层级选择器*/
    ul li {
        float: left;
        width: 40px;
        height: 40px;
        background-color: aquamarine;
        border-radius: 50%;
        margin: 5px;
        line-height: 40px;
        text-align: center;
    }
    /*id选择器*/
    #bg-blue {
        background-color: lightblue-;
    }
    /*class选择器*/
    .bg-yellow {
        background-color: yellow;
    }
    /*属性选择器*/
    li[id="bg-blue"] {
        border: solid red 1px;
    }
    /*群组选择器*/
    #bg-blue,.bg-yellow {
        border: double black 2px;
    }
    /*相邻选择器*/
    .bg-yellow + * {
        background-color:blanchedalmond ;
    }
    /*兄弟选择器*/
    .bg-yellow ~ * {
        background-color: blu-eviolet;
    }
    /*伪类：子元素选择器*/
    ul :first-child {
        background-color: red ;
    }
    ul :last-child {
        background-color: blue ;
    }
    ul  :nth-child(odd) {
       background-color: lightpink; 
    }
    ul :nth-last-child(3) {
        background-color: cornflowerblue;
    }
    /*伪类：类型选择器*/
    ul li:last-of-type {
        background-color: darkred;
    }
    ul li:first-of-type {
        background-color: blueviolet;
    }
    /*选中每个div下的第二个元素*/
    div :nth-child(2) {
        background-color: aquamarine;
    }
    p:nth-of-type(2) {
        background-color: crimson;
    }

    form :enabled {
        background-color: bisque;
    }

    form :checked + * {
        color: red;
    }
    form :focus {
        background-color: aquamarine;
    }
    button:hover {
        background-color: black;
        color: white;
        width: 50px;
        height: 30px;
    }
    form :invalid {
        color: red
    }
    </style>
</head>
<body>
    <ul>
        <li id="bg-blue">1</li>
        <li class="bg-yellow">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <div>
        <p>html</p>
        <li>css</li>
        <p>javascript</p>
    </div>

    <div>
        <p>php</p>
        <li>python</li>
    </div>
    
    <form action="">
        <label for="email">email:</label>
        <input type="email" id="email">
        <br>

        <label for="password">password:</label>
        <input type="password" id="password">
<br>
        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
    <br>    
        <button>登陆</button>
    </form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！