CSS选择器

玊尔i

已于 2023-03-19 20:18:08 修改

阅读量177

点赞数

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

于 2023-03-18 17:05:29 首次发布

本文链接：https://blog.csdn.net/weixin_52866319/article/details/129638001

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基础选择器

1.标签选择器

指定的标签全选中，不能进行差异化选择

 <style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style>


    <p>111111</p>
    <p>222222</p>
    <p>333333</p>
    <div>444444</div>
    <div>555555</div>

如图将p标签所包含内容选择为红色，将div标签所包含内容选择为绿色

2.类选择器

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

 <style>
       .blue {
        color:blue;
       }
    </style>


    <div class="blue">啦啦啦啦啦啦啦啦</div>
    <div>1111</div>

如图，将带有class属性的div标签选择为蓝色。

注意：

类名必须用.开头
下方的标签使用class属性来调用
对于较长的类名，需要用 - 进行分割
一个标签可以同时使用多个类名

3.id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

<style>
    #haha {
        color: red;
   }
</style>

<div id="ha">1234456</div>

4.通配符选择器

使用 * 的定义, 选取所有的标签,多用于页面的默认设置，不需要被页面结构调用，页面所有内容将会被选择

 <style>
       * {
        color: purple;
       }
 </style>

复合选择器

1.后代选择器

表示一个标签的子标签，又叫包含选择器. 选择某个父元素中的某个子元素

语法规则：

元素1 元素2 {样式声明}

例如将 a 标签的颜色改为红色

    <style>
      a {
        color: red;
      }
    </style>

    <div>
        <div class="blue">啦啦啦啦啦啦啦啦</div>
        <div>1111</div>
        <a href="">这是一个a标签</a>
        <p>aaaaaa</p>
    </div>

注意：无论a标签被嵌套多少层，都可以找到

2.子选择器

和后代选择器类似, 但是只能选择子标签，也就是父标签的下一层

语法规则：

元素1>元素2 { 样式声明 }

与后代选择器不同，前后无空格

例如选择链接1为橙色

    <style>
     .two>a {
        color:orange;
     }
    </style>



    <div class="two">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

复合选择器只要复合语法要求，可以由任意基本选择器组合，只要逻辑正确即可

3.并集选择器

用于选择多组标签. (集体声明)，每个选择器由逗号隔开

语法规则：

元素1, 元素2 { 样式声明 }

例如同时将四叶草易烊千玺和王俊凯和王源改成橙色

 <style>
    p,ul>li {
        color: orange ;
    }
    </style>


    <p>四叶草</p>
    <ul>
        <li>王源</li>
        <li>王俊凯</li>
        <li>易烊千玺</li>
    </ul>

4.伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

小结

1.基础选择器小结

选择器	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择, 最灵活, 最常用.
id选择器	能选出一个标签	同一个 id 在一个HTML中只能出现一次
通配符选择器	选怎所有标签	常用于页面默认设置

2.复合选择器小结

选择器	特点	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子, 不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
链接伪类选择器	选择不同状态的链接	重点掌握 a:hover 的写法