CSS选择符——简介

最新推荐文章于 2022-04-16 12:42:23 发布

清风吹拂

最新推荐文章于 2022-04-16 12:42:23 发布

阅读量554

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_34758023/article/details/52667139

版权

css 专栏收录该内容

8 篇文章

订阅专栏

在平常制作使用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