CSS写法风格
h3 {
color: pink;
}
空格注意:
1 属性值前面，冒号后面，保留一个空格
2 选择器(标签)和大括号中间保留空格
选择器
一 基础选择器
1.标签选择器
根据标签名称,选择同一名称的标签,可以做一些统一的设置.
p {
color: red;
font-size: 24px;
}
<p>有点意思</p>
2.类选择器
.wenzi {
background-color: crimson;
}
<div class="wenzi">我是一个div</div>
.test {
text-align: center;
color: white;
line-height: 500px;
font-size: 50px;
}
.red {
background-color: red;
width: 300px;
height: 500px;
}
<div class="red test">红色</div>
样式点定义，结构类调用。一个或多个，开发最常用。
多类名的开发场景:
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.
3.id 选择器
#swift {
background-color: blue;
font-size: 200px;
font-family: 'Times New Roman', Times, serif;
}
#swift {
color: white;
}
<div id = "swift">id选择器</div>
注意:id是唯一的,一般只能用在一个标签上.但是可以多次设置,例如上面的例子
4.通配符选择器
通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)
特点:修改所有的元素.
* {
color: chartreuse;
}
<div>测试通配符选择器</div>
二 .复合选择器
5.后代选择器
元素1 元素2 元素3 元素4 { 样式声明 }
元素1 元素2 元素3 元素4 可以是任意基础选择器,主要是标签选择器,id选择器,类选择器.可以任意组合,个数随便.
ol li {
color: pink;
}
//这里其实通过 ol a 也是可以选择到元素的.
ol li a {
color: red;
}
//下面其实写成 .nav a 也是可以选择到的
.nav li a {
color: yellow;
}
<ol>
变态写法
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
</ul>
特别注意:后代选择器可以逐级写,也可以跳级写,最终的结果是选择到最后的元素.其实主要是类选择器,id选择器,标签选择器逐级选定.
6.子选择器(亲儿子选择器)
核心区别是他只能选择儿子,不选择孙子.
元素1 > 元素2
.nav>a {
color: red;
}
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
7.并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
<h3>并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。</h3>
元素1,元素2 { 样式声明 }
逗号可以理解为和的意思.
元素1和元素2可以任意形式的选择器
8.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover 、 :first-child 。 因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
8.1 链接伪类选择器
主要是给链接的聚焦,访问,点击完设置不同的效果用的.
注意一点就是很多东西是有顺序的,顺序不能乱,否则没有效果.一定要按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。如果四个都有一定要按照这个顺序,有的就按照这个顺序
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */
a{
color: gray; }
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ }
8.2 :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
目的是在表单中选出当前聚焦的那个,然后根据是否聚焦设置一些性质.
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
网友评论