html、css 之选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81452897/article/details/145820517

一、元素选择器

顾名思义元素选择器就是使用元素（标签）用来控制元素的显示样式

以下为简写样式

<head>
<style> div { color: red;} </style>
</head>

<body>
    <div>css之元素选择器<div>
</body>

二、id选择器

id选择器前面必须要加上 # 符号不然 id 样式无法生效

<head>
    <style>
        #first { color : blue; }
    </style>
</head>

<body>
        <div id="first">id选择器</div>
</body>

三、class选择器

即类选择器，类选择器前面必须要加上 . 前缀 + 选择器类名样式才能生效

<head>
    <style>
        .second { color:red;}
    </style>
<body>
    <div class="second">class选择器</div>
</body>

CSS选择器

一、子元素选择器即选择父元素下的子元素

<head>
    <style>
        .father .son { color: red;}
    </style>
</head>

<body>
        <div class="father">
            <div class="son">子元素选择器</div>
        </div>
</body>

二、相邻选择器，就是选择该元素下的同级元素，记住必须是同级元素

<style>
    #xl+div { color: red;}
</style>

<body>
    <div id="xl"></div>
    <div>相邻选择器</div>
</body>

三、群组选择器，两个选择器之间要用 " , " 分隔，且每个选中的元素样式都生效

<style>
    h3,div,span { color:red;}
</style>

<body>
    <h3>群组选择器</h3>
    <div>群组选择器</div>
    <span>群组选择器</div>
</body>