简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS基础-常用选择器的使用示例
Blogger Information
Blog 15
fans 0
comment 1
visits 14907
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基础-常用选择器的使用示例
空城的博客
Original
944 people have browsed it

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。本文将详细介绍各类选择器的用法

实例

<!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>CSS基础-常用选择器的使用示例</title>
    <script>
     /* 标签选择器 */
ul{
    border:1px dashed lightsalmon;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left:0px; 
    overflow: hidden;
    padding: 10px;
}

/* 层级选择器 */
ul li{
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: brown;
    float: left;
    border-radius: 50%; /*可以把块状变成圆球*/
    text-align: center;
    line-height: 40px;
    margin-left: 5px;
    box-shadow: 2px 2px 1px black;
    
}

/* id选择器 */
#bg-green{
    background-color: green;
}

/* 类选择器 */

.Kris{
    background-color: yellow;
}

/* 属性选择器 根据标签属性选择标签 */
li[id="bg-green"] {
    border: 2px solid red;
}

/* 群组选择器 可以用不同方法选择多个元素进行操作 记得要用逗号分隔开来*/
#bg-green, .Kris{
    border: 2px solid blue;
}

/* 兄弟选择器  给一个起点就可以选择后面的 此处第二个没变色是因为优先级弱于上面的*/
#bg-green ~ *{
    /* background-color: blueviolet; */
}

/* 伪类选择器 一般带引号引号前一定要有空格 */
ul :first-child{
    background-color: wheat;
}

ul :last-child{
    /* background-color: black; */
}

ul :nth-child(6){
    background-color: lightcoral;
}
ul :nth-last-child(3){
    background-color:gray;
}

/* 伪类 类型选择器：简单的来说就是选取某标签里面第几个为某一个类型的标签 */
 ul li:last-of-type{
     background-color:red;
 }
    </script>
</head>
<body>
    <ul>
        <li class="Kris">1</li>
        <li id="bg-green">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

    
</body>
</html>

运行实例 »

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


Correction status：Uncorrected

Teacher's comments：
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！