基础选择器
标签选择器
定义：
标签选择器（元素选择器）是指用html标签名称作为选择器，按标签名称分类。
语法：
标签名{
属性1：属性值1；
属性2：属性值2；
....
}
<style>
p {
color: blue;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>123</p>
<div>abc</div>
</body>
类选择器
定义：
差异化选择不同标签，单独选一个或者几个标签。
语法：
.类名{
属性1：属性值1
属性2：属性值
....
}
可多类名使用，例如：<div class="pink font20">123</div>
<style>
.one {
color: antiquewhite;
}
.two {
color: black;
}
.first {
font-size: 80px;
}
</style>
</head>
<body>
<div class="one first">123</div>
<div class="two">abc</div>
</body>id选择器
定义：
id选择器可以为标有特定id的html元素指定特定的样式。
语法：
#id名{
属性1：属性值1
属性2：属性值
....
}
<style>
#one {
color: pink;
}
</style>
</head>
<body>
<div id="one">123</div>
</body>
id属性只能在每个html文档中出现一次。
样式#定义，结构id调用，只能调用一次，别人切勿使用。
通配符选择器
定义：
在css中，通配符选择器使用“*”定义，表示选取页面中所有元素（标签）。
语法：
*{
属性1：属性值1
属性2：属性值
....
}
* {
padding: 0;
margin: 0;
}符合选择器
后代选择器
定义：
后代选择器（包含选择器），选择父元素里的子元素。
把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2{样式声明}
选择元素1中的所有元素2（后代元素，子元素的子元素也可以）
元素1和元素2可以是任意基础选择器。
<style>
ol li {
color: aquamarine;
}
</style>
</head>
<body>
<ol>
<li>1
<a href="">a</a>
</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>子选择器
定义：
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
语法：
元素1>元素2{样式声明}
表示选择元素1里面的所有直接后代（子元素）元素2。
<style>
.one>a {
color: aquamarine;
}
</style>
</head>
<body>
<div class="one">
<a href="">变</a>
<p>
<a href="">不变</a>
</p>
</div>
</body>
并集选择器
定义：
并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1，元素2{样式声明}
表示选择元素1和元素2。
<style>
.one,
a {
color: aquamarine;
}
</style>
</head>
<body>
<div class="one">
变
</div>
<a href="">变</a>
<p>不变</p>
</body>
伪类选择器
定义：
伪类选择器用于向某些选择器添加特殊效果。
用冒号表示。
链接伪类选择器
语法：
选择所有未被访问的链接 a: link
选择所有已被访问的链接 a：visited
选择鼠标指针位于其上的链接 a：hover
选择活动链接（鼠标按下未弹起的链接 ）a：active
按照LVHA的顺序声明（：link-：visited-：hover-：active）
<style>
a {
color: gray;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="">变</a>
</body>：focus伪类选择器
定义：
用于选取获得焦点（光标）的表单元素。
一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
语法：
input：focus{
属性1：属性值1
属性2：属性值
....
}
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
