css常见选择器

最新推荐文章于 2024-02-28 21:36:57 发布

小白兔拔萝卜

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量138

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/qq_41177259/article/details/105133743

版权

1. 元素选择器

被选中的标签类型全部使用这种样式

<style type="text/css">
h1{
         color: red;
    }
    <style/>
   <body>
   <h1>huawei</h1>
   </body>

2. id选择器

被选中的id的元素使用这种样式，元素可以使用id属性，元素和id是一对一的关系，只能一一对用，id属性的名字随便

<style type="text/css">
#hello{
         color: red;
    }
    <style/>
   <body>
   <h1 id="hello">huawei</h1>
   </body>

3.类选择器

被选中的class的元素使用着中国样式，将元素使用class属性，元素和class可以n对1的关系，class属性的名字随便

<style type="text/css">
.hi{
         color: red;
    }
    <style/>
   <body>
   <h1 class="hi">huawei</h1>
   <p class="hi">microsoft</p>
   </body>

4.通配选择器

选择所有元素，都使用这种样式

<style type="text/css">
*{
         color: red;
    }
    <style/>
   <body>
   <h1>huawei</h1>
   <p>microsoft</p>
   </body>

5.并集选择器

将满足不同条件的选择器使用逗号分隔开，取并集，然后并成新的选择器

<style type="text/css">
.hi,#hello{
         color: red;
    }
    <style/>
   <body>
   <h1 class="hi">huawei</h1>
   <p id="hi">microsoft</p>
   </body>

6.交集选择器

将满足不同条件的选择器连接起来，取交集，然后并成新的选择器

<style type="text/css">
.hi#hello{
         color: red;
    }
    <style/>
   <body>
   <h1 class="hi">huawei</h1>
   <p id="hi">microsoft</p>
   </body>

7.后代元素选择器

作用：选中祖先元素中的被选中的所有后代元素
语法：祖先元素后代元素{}
ps:如祖先元素有多个，不管是哪个，它的后代元素都要选

<style type="text/css">
div span{
         color: red;
    }
    <style/>
   <body>
   <div/>
   <h>huawei</h1>
   <p id="hi">microsoft</p>
   <span>JetBrains</span>
   </div>
   </body>

8.子元素选择器

作用：选中祖先元素的儿子元素，不要孙子元素
语法：父元素>子元素{}

<style type="text/css">
div>span{
         color: red;
    }
    <style/>
   <body>
   <div/>
   <h>huawei</h1>
   <p id="hi">microsoft</p>
   <span>JetBrains</span>
   </div>
   </body>

小白兔拔萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css常见选择器

css常用选择器元素选择器被选中的标签类型全部使用这种样式<style type="text/css">h1{ color: red; } <style/> <body> <h1>huawei</h1> </body>id选择器被选中的id的元素使用这种...
复制链接

扫一扫