标签选择器
标签选择器:按标签名称分类
基本语法格式:
标签名{属性1:属性1;属性2:属性2;}或
元素名{属性1:属性1;属性2:属性2;}
<style type="text/css">p {color: #00f;font-size:14px;}</style>
<body><p>选择器</p><p>选择器</p><p>选择器</p></body>
类选择器
基本语法格式:
.类名{属性1:属性值;属性2:属性值;}
标签调用时用class"类名"(class 类 )
.o { /*声明类样式*/color: orange}.n {color: blue}
<h1 class="o">类选择器</h1><!-- 引用类样式 class 单词 类 的意思 --><h1 class="n">类选择器</h1>
注意:类名前加"."
案例:<head><meta charset="UTF-8"><title>Document</title><style type="text/css">span {font-size: 100px;}.blue {color: blue}.red {color: red}.orange {color: orange}.green {color: green}</style></head><body><span class="blue">G</span><span class="red">O</span><span class="orange">O</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body>
多类名选择器
例如:
<style type="text/css">.font20 {font-size: 20px ;}.font14 {font-size: 14px;}.blue {color: blue;}.fontweight {font-weight: bold;}</style>
<div class="font20 blue">司马懿</div><div class="font20">司马炎</div><div class="font14 blue fontweight">司马昭</div><div class="font14">曹操</div><div class="font14">曹丕</div>
在例子中class=" "内可以放多个
id选择器
例:
#big {color:pink}
<div id="big">花</div>
id选择器与类选择器可结合记忆
id选择器: #名
id=“名”
类选择器:.名
class=“名”
注意:一般规定id选择器只能用一次,类选择器可以用多次(可能有的浏览器兼容性好id可以用不只一次但最好还是按规定来)
id选择器与类选择器的区别在使用次数上
通配符选择器
例:
* {color: purple;}
<p>1</p><p>1</p><p>1</p><h1>1</h1><h1>1</h1><h1>1</h1><ul><li>1</li><li>1</li></ul>
通配符选择器用”*“表示,它是所有选择器中作用范围最广的,能匹配网页中所有的元素
基本语法格式
*{属性1:属性值1; 属性2:属性值2;}
*指的是所有的标签
伪类选择器
用于向某些选择器添加特殊的效果
1个点.demo{} 为类选择器
2个点(冒号):link{} 为伪类选择器
#####链接伪类选择器
:link (为未访问的链接)
:visited (已访问的链接)
:hover (鼠标移动到链接上)
:active (选定的链接)
例:
<style>a:link { /*未访问的链接*/font-size: 14px; color: gray; /*gray*/font-weight: 700;/*bold*/}a:visited { /*已访问的链接 我们已经点击过一次的状态*/font-size: 14px; color: orange;font-weight:bold;/*700*/}a:hover { /*鼠标移动到链接上*/font-size: 14px; color: red;font-weight: 700;/*700*/}a:active{/*选定的链接 当我们点击别松开鼠标显示的状态*/font-size: 14px; color: green;font-weight: 700; }</style>
<body><div><a href="#">点击</a> <a href="#">点击</a> </div></body>
注意:写的时候它们顺序不可改变,:link和:hover比较常用
一般如下书写(链接伪类的简写方式):
a { /*a是标签选择器 所有的链接*/font-weight: bold;font-size: 16px; color:gray;}a:hover{ /* hover链接伪类选择器 鼠标经过*/color: red; /*鼠标经过的时候由原来的灰色变为红色*/}
<div> <a href="#">秒杀</a></div>
结构(位置)伪类选择器
:first-child 选取属于其父元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child 匹配属于其父元素的第n个元素,不论元素的类型even偶数odd奇数n从0开始
:nth-last选择器匹配属于其元素的第n个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n可以是数字、关键词或公式
注意::nth-child后跟()来填内容如下:
li:nth-child(odd){ /*可以选择所有的odd奇数的孩子标签*/color: skyblue}li:nth-child(even){ /*可以选择所有的even偶数的孩子标签*/color: blue}
<ul><li>1孩子</li><li>2孩子</li><li>3孩子</li><li>4孩子</li><li>5孩子</li></ul>