部分出处:https://www.cnblogs.com/wangshen31/p/7911657.html
1. 选择器
1.1 类选择器
-
写法
.类名 或 [class~=类名] (优先级不等价)
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
1.2 ID选择器
- 写法
#id 或 [id=id] (优先级不等价)
1.4 属性选择器
1.5 后代(嵌套)选择器
1.6 通配选择器
1.3 伪类选择器
<html>
<head>
<style type="text/css">
q:lang(smile){
quotes:"o(* ̄▽ ̄*)ブ""~"//这里定义了将smile转换的符号
}
</style>
</head>
<body>
好吧,展示一个笑脸
<p>博君一笑<q lang="smile">祝你愉快</q></p>
</body>
</html>
复制代码
1.4 外部样式
导入外部样式表(导入样式要放在样式规则前面定义)
<style>
@import url("css/style.css")
body {
background: red;
}
</style>
注意,class选择器可以被用于多个对象被设定成同种css样式的情况。
<h2 class="style1">
<h3 class="style1">
是可以的
Id选择器则只能用于一个对象
<h2 id="style1">
<h3 id="style2">
是不可以的
给选择器命名的时候,不能使用数字开头,必须以字母或者下划线开头)
3.1 id派生选择器
#text p{
Color:blue;
}
/* 表明样式表只将作用于text对象中所有p标签下的内容*/
<p id="text">….</p>
- HTML选择器
<html>
<head>
<title>HTML选择器的使用</title>
<style type="text/css">
h1{
color:#555555;
font-size:2.3em;
font-family:微软雅黑;
}
</style>
</head>
<body>
<h1>HTML选择器的使用<h1>
</body>
</html>
- 派生选择器
<html>
<head>
<title>派生选择器的使用</title>
<style type="text/css">
h1 h2{
color:red;
font-size:1em;
font-family:黑体;
}
</style>
</head>
<body>
<h1>HTML选择器的使用<h1>
<h2>HTML选择器的使用</h2>
<h1><h2>HTML选择器的使用</h2></h1>
<h1>其他文本内容<h2>HTML选择器的使用</h2>其他文本内容</h1> <!--对“选择器的使用”起作用-->
</body> </html>
2.优先级
- !important>内联样式>ID选择器>类选择器=属性选择器([type=“text”]{…})=伪类选择器>标签选择器>通用选择器(*)
<div id=''father">
<div class="aa"> 1111</div>
<div class="bb">111</div>
</div>
#father div{color:red;}
.aa{color:blue;}
.bb{color:blue !important;}