css选择器

xiaoxiao2021-02-28  92

1、基本选择器

(1)元素选择器

书写格式:要修饰的标签{css属性}

 <style type="text/css">         div{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利!!!</div>

(2)id选择器

书写格式:#id名{css属性}

 <style type="text/css">         #d1{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利!!!</div>

(3)class选择器

书写格式:.class名{css属性}

 <style type="text/css">         .c1{color:red;font-size:50px}

 </style>

<div id="d1" class="c1">大吉大利!!!</div>

**在上述基本类型的三种选择器中,优先级:id选择器>class选择器>元素选择器

2、元素选择器

书写格式:标签[选择的属性]{css属性}

 <style type="text/css">        input[type="text"]{background-color:yellow}

 </style>

<form id="d1" action="">         <input type="button" value="back"/>         <input type="text"/>   </form>

3、伪元素选择器

伪元素选择器常用于修饰链接标签<a>。

书写格式:a:link{css的属性} 正常时链接的属性                   a:hover{css的属性}鼠标箭头悬浮在上面时链接的属性                   a:active{css的属性}鼠标点击链接时链接的属性                   a:visited{css的属性}点击完成后链接的属性

 <style type="text/css">        a:link{color:blue}        a:hover{color:red}        a:active{color:yellow}        a:visited{color:green}

 </style>

<a href="http:/www.baidu.com" target="_blank">百度一下、你就知道</a>

4、层级选择器

书写格式:要选标签的父级标签 要选的标签{css属性}

 <style type="text/css">       #d1 input[type="button"]{background-color:blue}       form .text1{background-color:red}

 </style>

<form id="d1" action="">         <input id="btn1" type="button" value="back">         <input class="text1" type="text">  </form>

转载请注明原文地址: https://www.6miu.com/read-37303.html

最新回复(0)