css3----基本选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/Cg_Companion_Xi/article/details/105595298

基本选择器

以下的基本选择器都在 index.html 的基础上添加样式实现：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
        body{
            padding: 0px;margin: 0px;  
        }
	    .warper{
	        width:400px;
	        height:50px;
	        border:1px solid #ccc;
	        padding:10px;
	    }
	    ul{
	        height:30px;
	    }
	    li{
	        list-style: none;
	        float:left;
	        height:20px;
	        line-height: 20px;
	        width:20px;
	        border-radius:10px;
	        text-align:center;
	        background:#f36;
	        color:azure;
	        margin-right:5px;
	    }
	    </style>
	</head>
	<body>
	    <div class="warper">
	        <ul class="clearfix">
	            <li id="first" class="first">1</li>
	            <li class="important">2</li>
	            <li class="important">3</li>
	            <li class="important">4</li>
	            <li>5</li>
	            <li>6</li>
	            <li>7</li>
	            <li>8</li>
	            <li>9</li>
	            <li id="last" class="last">10</li>
	        </ul>
	    </div>
	</body>
	</html>

效果：
在这里插入图片描述

元素选择器
元素选择器用于选择文档的某个元素

	li{background-color:cyan;color: red;}

在这里插入图片描述
类名选择器
根据 class 类的名字来选择

	.important{font-weight:bold;color:yellow;}

在这里插入图片描述
类选择器结合元素选择器使用.不能有空格。

	li.important{font-weight:bold;color:yellow;}

在这里插入图片描述
id选择器
id选择器，与类选择器相同，具有唯一使用性的用ID选择器

	#first{color:blue;}

在这里插入图片描述
后代选择器（E F）
选择元素E下面所有的后代F元素，不论之间隔了多少层，都能被选中,选择所有的后代。

	.warper li{color:red;}

在这里插入图片描述
子元素选择器（E > F）
现在的F是E的直接子元素，他们之间只隔了一层，为父子关系。如果内层还有别的选择器，但是设置属性值，则会跟着子元素被设置，如果内层设置了属性值，则不会被影响。

	ul>li{color:yellow;}

在这里插入图片描述
通配符选择器（*）
通配符选择器用来选择所有元素，也可以选择某个元素下的所有元素

	*{margin:0;padding:0;}
	.warper *{border:1px solid red;}

在这里插入图片描述
群组选择器
选多个元素，且需要用 “,” 隔开。

	.first,.last{background-color:hotpink;}

在这里插入图片描述