元素 标签，常识
2018-11-20 本文已影响0人
姓高名旭升
伪类选择器和伪元素
正常连接
x:link{
color:green;
}
访问过的链接
x:visited{
color:yellow;
}
鼠标滑过的链接
x:hover{
color:skyblue;
}
正在点击的链接
x:focus{
backgroud-color:orange;
}
选中的元素
x::selection{
background-color:white;
}
兼容火狐浏览器
x::-moz-selection{
background-color:orange;
}
伪元素
(给段落定义样式)
首字母
x:first-letter{
color:red;
font-size:30px;
}
首行
x:first-line{
background-color:orange;
}
before(前面)
x:before{
content:"我在文章的最前面";
color:skyblue;
}
需要用content(内容)来定义内容
after(后面)
x:after{
content:"我会出现在文章的最后面";
color:red;
}
属性选择器和子元素选择器
p[title]{
background-color:red;
}
选择器为title的背景变为红色
p[title="abc"]{
background-color:skyblue;
}
选择器是title等于abc的背景变为天蓝色
p[title^="a"]{
background-color:green;
}
选择器是title以a开头的背景变为绿色
p[title$="c"]{
background-color:yellow;
}
选择器是title以c结尾的背景变为黄色
p[title*="b"]{
background-color:orange;
}
选择器是title包含b的背景变为橙色
子元素选择器
选择第一个子元素
div p:first-child{
color:red;
}
选择最后一个子元素
:last-child{
color:yellow;
}
选择指定位置的子元素
:nth-child(3){
background-color:green;
}
位置是第3个的标签背景为绿色
:nth-child(even){
background-color:red;
}
位置是偶数的背景为红色
:nth-child(odd){
background-color:yellow;
}
位置为基数的背景为黄色
选择指定类型的子元素
p:first-of-type{
background-color:blue;
}
类型是p的第一个标签背景为蓝色
p:last-of-type{
background-color:skyblue;
}
类型是p的最后一个标签背景为天蓝色
p:nth-of-type(3){
background-color:yellow;
}
类型是p的第三个标签背景为黄色
.+.
span + p{
background-color:skyblue;
}
span后一个p标签背景为天蓝色
.~.
span ~ p{
background-color:green;
}
span后面所有的p标签背景为绿色
否定伪类
p:not(#p1){
color:red;
}
意思就是not()括号里面填什么,填的那句话就不会执行
样式的继承
给<body>设置样式
body{
font-size:30px;
}
body里面的所有元素都会继承body的样式
注:背景、边框、定义不会被继承
权重
!important
内联样式 优先级1000
id 选择器 优先级100
类和伪类 优先级10
元素选择器 优先级1
通配选择器 优先级0
继承的样式 没有优先级
注：如果优先级一样的会选择靠后的样式，后面的样式会覆盖前面的样式
！important
p{
background-color:orange !important
}
如果非要用元素选择器来设置样式就要在后面加上!important
p{
background-color:orange;
}
注：!important甚至比内联样式还有高，但是在开发的时候不建议使用
文本标签
<em></em>
<em>标签用于表示一段内容中的着重点
<strong></strong>
#####2.<strong>标签表示一段内容的重要性
<i></i>
<i>标签会使文字变成斜体 电商的<i>标签类似icon(图标)
<b></b>
<b>标签会使文字变成粗体
<small></small>
<small>标签会使文字变小
<big></big>
</big>标签会使文字变大
<cite></cite>
使用<cite>标签可以指明对某内容的引用或参考。例如，戏剧，歌曲，文章，电影等
<q></q>
<q>标签 浏览器自动添加引号（不同浏览器的样式不同）写样式基本不用
<blockquote></blockquote>(块元素)
<blockquote>标签 评论的地方特别多 如果引用了别人说的话就会使用<blockquote>标签
定义上标和下标
<sup></sup>和<sub></sub>
<ins></ins>
<ins>标签表示插入的内容，显示时加上下划线
<p>
1808班的男生都<ins>好帅啊</ins>
</p>
<del></del>
<del>标签表示插入的内容，显示时加上删除线
<p>
<del>18.88</del><br>
15.88
<p>
<code></code>
如果你的内容包含代码示例或文件名，就可以使用<code>元素
<pre></pre>
<pre>元素表示的是预格式化文本，可以使用
<pre>包含<code>来表示一段代码
<pre>
<code>
if(True):
print("hello")
</code>
</pre>
在网页中一共有3中列表
1.无序列表 ul li （块元素）
2.有序列表 ol li （块元素）
3.定义列表 dl dt （被定义的内#容）dd（对定义的内容描述）
<ul></ul>
<ul>
<li>武大官人</li>
<li>潘小娘子</li>
<li>西门大官人</li>
<li>武二官人</li>
</ul>
一共有三种样式 可以用type来取代
取消样式
在<style>样式下写
ul{
list-style:none;
}
<ol></ol>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
有序列表会自己排序,也有type属性,也可以用样式去掉
ol{
list-style:none;
}
