CSS的选择器

来源：互联网发布：爱丽丝疯狂回归mac版编辑：程序博客网时间：2024/06/01 08:41

CSS的选择器

一般情况下，后加载的优先级高

<html><head>    <title>CSS的优先级</title>    <style type = "text/css">        div{        color:red;        }    </style></head><body>    <div style = "color:green">这些方法、属性和事件允许您</div>    <div>使用 JavaScript 来操作</div></body></html>

格式规范：属性名称1:属性值1;属性名称2:属性值2;(冒号和分号都是英文状态下的)
选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）

1.标签选择器：使用标签名称作为选择器。

<html><head>    <title>CSS的优先级</title>    <style type = "text/css">        div {        color:red;        }    </style></head><body>    <div style = "color:green">这些方法、属性和事件允许您</div>    <div>使用 JavaScript 来操作</div></body></html>

2.class选择器：每个html标签上面都有一个属性class，通过设置class属性的值

<html>    <head>    <title>CSS的示例</title>    <style type = "text/css">        /*div.haha{            color:red;        }        p.haha{            color:blue;        }*/        .haha {            color:red;        }    </style>    </head>    <body>    <div class = "haha">这些方法、属性和事件允许您</div>    <p class = "haha"> 使用 JavaScript 来操作</p>    </body></html>

3.id选择器
** 每个html标签都有一个属性id，通过设置id的属性值

<html><head>    <title>CSS的示例</title>    <style type = "text/css">        /*div#hehe{            color:red;        }        p#hehe{            color:blue;        }*/        #hehe{            color:red;        }    </style></head><body>    <div id = "hehe">这些方法、属性和事件允许您</div>    <p id = "hehe"> 使用 JavaScript 来操作</p></body></html>

选择器的优先级
style标签 > id选择器 > class选择器 > 标签选择器

<html><head>    <title>CSS的示例</title>    <style type = "text/css">    /*    id选择器    */    #hehe{        color:blue;    }    /*    class选择器    */    .haha {        color:green;    }    /*    标签选择器    */    div {        color:red;    }    </style></head><body>    <div id = "hehe" class = "haha" style = "color:yellow">这些方法、属性和事件允许您</div>    <div>这些方法、属性和事件允许您</div>    <div>这些方法、属性和事件允许您</div> </body></html>

CSS的扩展选择器

1.关联选择器
设置嵌套标签的样式

<html><head>    <title>CSS的示例</title>    <style type = "text/css">    div p {        color:red;    }    </style></head><body>    <div><p>AAAAAAAAAA</p></div></body></html>

2.组合选择器
设置不同的标签具有相同的样式

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>css示例</title>    <style type="text/css">        div,p {            color:red;        }    </style></head><body>    <div>这是div标签里面的内容</div>    <p>这是p标签里面的内容</p></body></html>

3.伪类元素选择器

拿超链接为例:状态：原始状态(:link)，鼠标放上去的状态(:hover)，点击状态(:active)，点击之后的状态(:visited).

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>css示例</title>    <style type="text/css">        /*原始状态*/        a:link {            color:red;            font-size: 20px;        }        /*悬停状态*/        a:hover{            color:green;            font-size: 30px;        }        /*点击状态*/        a:active{            color: #660000;            font-size: 50px;        }        /*点击之后的状态*/        a:visited{            color: #660066;            font-size: 10px;        }    </style></head><body><a href="hello.html">超链接</a></body></html>

0 0