CSS选择器的讲解

最新推荐文章于 2024-07-24 10:05:23 发布

WANG鲲

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量983

点赞数 31

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_63751497/article/details/137146334

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础选择器，包括标签选择器、类型选择器（类选择器）、ID选择器、通配符选择器、群组选择器以及层次选择器（后代和子代）。同时涵盖了伪类选择器的使用，如超链接的四种状态。

摘要由CSDN通过智能技术生成

1.基础选择器

1）标签选择器

2）类型选择器(类选择器，class类选择器)

1.基础选择器

1）标签选择器

通过标签的名字查找页面的元素，只要叫这个标签名字都会被匹配到，实现对应的样式规则

基本语法：

p{}

div{}

span{}

.........

弊端:匹配的范围过于广泛了

2）类型选择器(类选择器，class类选择器)

通过给元素起一个小名（class），在CSS中通过这个小名查找元素

基本语法：

<div class="box"></div>

.box{} .就是类的符号，不能被省略

代码展示：

 <p class="p1">我是一个p标签</p>

<style>
        .p1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
</style>

3）ID选择器

含义：给元素起一个id名字,在CSS中通过id的名字去查找页面中的元素

基本语法：

<div id="bobo"></div>

#bobo{} #就是id的符号，不能被省略

前提：注意事项：任何一个元素，任何一个标签都可以带id属性，但是他们的取值只能出现一个

命名的时候：

1）见名知意

2）是用小写字母开头，不能以数字开头，但是可以使用字母数字下划线配合使用

3）不能使用汉字去命名

代码展示：

<div id="bobo1">我是bobo1</div>

<style>
#bobo1{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
</style>

4）通配符选择器

能匹配页面中所有的元素;

基本语法：

*{margin:0;padding:0}

作用：用来取消页面中元素自带的内边距和外边距

* ======= 就是通配符选择器

大部分的元素是自带内边距和外边距的，但是文本修饰类型的标签，加粗，倾斜，下划线等等这些标签不带内边距和外边距

如何取消所有元素自带的内边距和外边距呢？

*{margin:0;padding:0}

通配符选择器其实有弊端；===不优化，就因为他让一部分没有自带内边距和外边距的标签，平白无故的取消了内边距和外边距

代码展示：

<style>
        *{margin: 0;padding: 0;}
    </style>

<body>
    <div>我是一个div标签</div>
    <div>我是一个div标签</div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h6>我是六级标题</h6>
    <ul>
        <li>我是无序列表里面的li</li>
        <li>我是无序列表里面的li</li>
        <li>我是无序列表里面的li</li>
    </ul>
    <ol>
        <li>我是有序列表里面的li</li>
        <li>我是有序列表里面的li</li>
        <li>我是有序列表里面的li</li>
    </ol>
    <dl>
        <dt>我是dt</dt>
        <dd>我是dd</dd>
    </dl>
    <span>我是一个span标签</span>
    <b>我是一个加粗标签</b>
    <u>我是下划线标签</u>

实现效果：

5）群组选择器（并集选择器）

含义：把一部分元素的公共样式提取出来，用来节约代码，提高优化性

谁自己带着内边距和外边距呢，我就取消谁就可以

群组选择器：符号（，）

基本语法：

选择器1，选择器2，选择器3{margin:0;padding:0}

代码展示：

<style>
        body,p,ul,dl,dd,ol,h1,h2,h3,h4,h5,h6{
            margin: 0;padding: 0;
        }
    </style>

2.层次选择器

1）后代选择器

后代：除了能匹配符合条件的父元素之外，还能匹配符合元素的子元素，还能匹配符合条件的孙子辈份的元素

基本语法：

选择器1 选择器2{}

空格就代表了是后代选择器的符号

代码展示：

/* 后代======ul里面符合条件的li */
        ul li{
            border: 2px solid gray;
        }

<ul>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签
            <ol>
                <li>我是ol里面的li</li>
                <li>我是ol里面的li</li>
                <li>我是ol里面的li</li>
            </ol>
        </li>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
    </ul>

实现效果：

2）子代选择器

子代：只能匹配符合条件的儿子辈份的元素

基本语法：

选择器1>选择器2{}

>就代表是子代选择器的符号

代码展示：

 /* 子代=======ul里面符合条件的li ====儿子辈分*/
        ul>li{
            border: 2px solid gray;
        }

实现效果：

3.伪类选择器

动态伪类===超链接默认是蓝色的文本，并且自带下划线

注意事项：主要应用在超链接标签上面

四个使用的时候必须按照以下顺序书写

a:link{}======超链接访问前

a:visited{}===超链接访问后

a:hover{}=====超链接悬停时

a:active{}====超链接激活瞬间

注意事项：

伪类选择器（：）前后不能带任何空格

实际开发时：

会把hover单独拎出来然后直接使用：鼠标悬停时改变元素的样式

代码展示：

<style>
        /* 超链接访问前 */
        a:link{
            color:chartreuse;
        }
        /* 鼠标访问后的样式 */
        a:visited{
            color:beige;
        }
        /* 鼠标悬停 */
        a:hover{
            color:red;
        }
        /* 鼠标激活瞬间 */
        a:active{
            color:orange;
        }
    </style>