通用
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
所有元素都使用同一个样式,*相当于所有
一般用于清除默认的一些间距样式,不过会把原来没有这些样式的也加上,影响效率,因此很少用,主要用于特定的元素
标签
<style type="text/css">
标签名{
CSS样式;
}
</style>
标签名,如html、body、h1、p、img等,选择器设置好样式,那么对应选择器的标签自动应用样式
类
<head>
<style type="text/css">
.类名1{ /*注意前面有个英文园点的*/
样式;
}
标签名 .类名2{ /*注意前面有个英文园点的;先找标签,在标签里面再找类*/
样式;
}
</style>
</head>
<body>
<span class="类名1 类名2">文本</span>
</body>
类选择器可以自定义名称,但是不能为中文。文档中可以使用多次,且可以多个样式组合使用。
类名尽量见名知意,多个单词用-连接(推荐)或 _ 连接,要有统一的规范
id
<head>
<style type="text/css">
#id名{ /*注意前面有个英文的井号*/
样式;
}
</style>
</head>
<body>
<span id="id名">文本</span>
</body>
id选择器可以自定义名称,但是不能为中文。文档中只能使用1次,不可组合使用
一般用于组合,如#header .title{ }
属性选择器
[title]{ /*带有 title 属性的所有元素设置样式.*/
color:red;
}
h1[style]{ /*带有 title 属性的所有h1元素设置样式.*/
}
[title="W3School"]{ /*带有 title 属性且值为W3School的所有元素设置样式.*/
border:5px solid blue;
}
input[type="text"]{ /*匹配 type="text" 的所有input元素设置样式*/
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type^="text"]{ /*匹配属性type属性是以"text"开头的所有元素设置样式*/
}
input[type$="text"]{ /*匹配属性type属性是以"text"结尾的所有元素设置样式*/
}
input[type*="text"]{ /*匹配属性type属性包含"text"的所有元素设置样式,不区分大小写*/
}
[lang|="en"]{
/*匹配属性lang属性恰好为"en" 或 "en"开头后面跟"-"的所有元素设置样式,不区分大小写*/
/*一般用于匹配语言*/
}
input[type~="text"]{ /*匹配属性type属性是包含"text"的所有元素设置样式,"text"和其他用空格隔开的*/
}
======================
子选择器(重要)
/*使class名为food的类选择器,下的子元素li(水果、蔬菜)加入红色实线边框,只作用第一个后代 */
.food > li{
border:1px solid red;
}
.food > li > p{
border:1px solid red;
}
/* class名为food下的 */
.food > .abc{
border:1px solid red;
}
后代选择器(重要)
.food li{
border:1px solid red;
}
这行代码会使class名为food的类选择器,下的子元素li(水果、蔬菜)加入红色实线边框,作用于所有后代以及后代的后代…
兄弟选择器
/*选择紧挨着id为a的元素下面的同级的div标签*/
#a + div{
border:1px solid red;
}
/*#a后面的全体兄弟div*/
#a ~ div{
border:1px solid red;
}
交集和并集选择器
交集
文字内容1符合
并集
=======================
伪类选择器
动态
它允许给html不存在的标签(标签的某种状态)设置样式,主要是a标签
未访问状态 a:link
访问过后状态 a:visited (访问过后浏览器有缓存,可能变不回未访问的状态。也可以通过变更链接避免)
鼠标放上状态 a:hover
激活状态(鼠标按下但还没弹出) a:active
目标(锚点)
就是锚点选中的那个元素,就是target
状态
结构
/*属于p元素的第一个子元素*/
p :first-child;
/*属于p元素的最后一个子元素*/
p :last-child;
/*作为倒数第3个子元素且是p元素*/
p:nth-last-child(3)
/*匹配第n个作为子元素的P元素,可以是(2n),(2n+1),隔行变色的表格;也可以-n+3表示前3*/
p:nth-child(n);
/*只有一个子元素且是p元素*/
p:only-child;
/*只有一个类型子元素且是p元素*/
p:only-of-type;
/* 第3个p元素 */
p:nth-of-type(3)
/* 倒数第3个p元素 */
p:nth-last-of-type(3)
/*Html元素*/
:root{}
/*元素内没有内容*/
:empty{}
否定
not(简单选择器),里面不支持组合
/*除了不是div的元素*/
:not(div){
}
/*去掉html元素和body元素,真实开发不会这样写*/
:not(html):not(body):not(div){
}
======================
伪元素
before和after
默认是行内元素
/*选择每个元素的第一个字母或中文*/
p:first-letter;
/*选择每个元素的第一行*/
p:first-line;
/*在每个p元素之前插入"abc",且变成红色,:或::都可以,经常用到*/
p::before{
content:"abc";
color:red;
}
/*在每个p元素之后插入图片,:或::都可以,经常用到*/
p::after{
content:url("./1.jpg")
}
输入框
placeholder
/*输入框的提示信息样式*/
input::placeholder{
}