CSS选择符——简介

来源：互联网发布：网络销售推广方案编辑：程序博客网时间：2024/06/05 11:09

在平常制作使用HTML的时候，经常会通过CSS选择符来给不同元素添加显示效果，对于怎么选择，有以下几种方式：

id选择符（#）

<span style="font-size:18px;">#div1{background-color:red}/*通过唯一id选择所选元素*/</span>

群组选择符（，）

<span style="font-size:18px;">#div1,#div2{background-color:red}/*通过选中不同元素给予相同css属性*/</span>

class选择符（.）

<span style="font-size:18px;">.div2{background-color:red}/*最常用的，在html中给予class为div2的相同的css属性*/</span>

类型选择符(div……)

<span style="font-size:18px;">div{background-color:red}/*通过选择不同的标签来赋予css*/p{background-color:red}h1{background-color:red}</span>

包含选择符（div p）

<span style="font-size:18px;"><style>/*选择div下包含所有的p元素*/    div p{background-color:red}</style><body>    <div>        <p>改变背景颜色</p>         <span><p>这里面颜色依旧会变</p></span>       </div></body></span>

通配符（*）

<span style="font-size:18px;">*{color:red;}/*给所有元素的字体变为红色*/</span>

另外还有一些常见伪类：

link 未访问（默认）

<span style="font-size:18px;">a:link{ font-size:60px; text-decoration:none; color:green;} //超链接初始字体大小，下划线取消，字体颜色</span>

hover 鼠标悬停（鼠标划过）

<span style="font-size:18px;">a:hover{color:blue;}//当鼠标滑过a标签时改变颜色</span>

active 链接激活（鼠标按下）

<span style="font-size:18px;">a:active {color:red;}//当鼠标点击a标签时改变颜色</span>

visited 访问过后（点击过后）

<span style="font-size:18px;">a:visited {color:yellow;}//当访问过的a标签改变颜色</span>

下面对其中的优先级做一下简单介绍：

类型 < class < id < style(行间)

如果是对页面中同一个属性进行修饰，

div{color:red;}/*最后为黑色   因为在文中优先级最高*/.div_class{color:yellow;}#div_id{color:green;}<div class="div_class" id="div_id" style="color:black;">haha<div>

同级别下面，叠加越多优先级越高div p 叠加为二，优先显示

div p{color:red;}/*优先级大于p的*/p{color:green;}/*最终为红色*/

css写的靠近下面，优先级越高

p{color:red;}p{color:blue;}/*显示为蓝色*/

所以对于<a>标签，为了使用能都能使用，伪类写的先后顺序为 link hover active visited

0 0