CSS常用选择器大全

充电区

已于 2024-05-18 00:07:35 修改

阅读量765

点赞数 30

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

于 2024-05-16 17:31:56 首次发布

本文链接：https://blog.csdn.net/2301_79985682/article/details/138049638

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

立如芝兰玉树，笑如朗月入怀。——佚名

个人主页 @充电区

点击查看所属专栏《前端》

【关注+收藏专栏】知识追番，不遗漏！！！

【没有废话，全是干货】

像素

（固定单位，相对单位）

显示-屏幕分辨率（1920px*1080px常用（像素个数）

CSS的定义

层叠样式表（Cascading Style Sheets）

写在title下方
Style标签里可以书写CSS代码
书写规则选择器{属性名:属性值;}

CSS的引入方式

内部样式表（学习使用）

CSS代码写在style标签里面

外部样式表（开发使用）

CSS代码写在单独CSS文件中（.css）

再html中使用link标签引入（一般写在title标签下方）

 <link rel="stylesheet" href="./hh.css">
#"./"查找文件位置
#"hh"文件名
#".css"后缀，表示是css文件

行列样式（配合JS使用）

CSS写在标签的style属性值里面（不建议这种写法，后期维护十分麻烦）

<div style="color: green; font-size: 30px; ">
    金刚大战哥斯拉
</div>

基本选择器

作用：查找标签设置样式

 <style>
       /* 定义类选择器：.类名 */
        .speak{
            color: red;
        }
 </style>

/* 使用类选择器 */
<p class="speak">我对你说：一寸光阴一寸金，劝你死了这条心！！</p>

通配符选择器

（查找页面所有标签，设置相同样式）

*，无需调用，浏览器自动查找

        /* 通配选择器 */
        /* 在清除样式的时候，往往会用统配选择器 */
        * {
            color: orange;
            font-size: 40px;
        }

标签选择器（元素选择器）

（使用标签名作为选择器，选中同名标签设置相同的样式）

p、h1、div、a、img...

类选择器

（查找标签，差异化设置标签的显示效果）

步骤：

定义类选择器: .类名

使用类选择器：标签添加 class=“类名”

注意：

1、类名自定义，不要用纯数字或中文，尽量用英文命名（且见名知意）

2、一个类选择器可供多个标签使用

3、一个标签可使用多个类名，类名之间用空格隔开

 <style>
       /* 定义类选择器：.类名 */
        .speak{
            color: red;
        }
        .pig{
            font-size:20px;
        }
 </style>

/* 使用类选择器 */
<p class="speak pig ">我对你说：一寸光阴一寸金，劝你死了这条心！！</p>

id选择器

（查找标签，差异化设置标签的显示效果）

（id选择器一般配合JavaScript使用，很少用来CSS的样式）

步骤：

定义id选择器：#id名

使用选择器：标签添加 id="id名"

（同一个id选择器在一个页面，只能使用一次）

复合选择器

交集选择器

<style>
        /* 选中类名为rich的元素*/
        .rich {
            color: gold;
        }
        /* 选中类名为beauty的元素*/
        .beauty {
            color: red;
        }
        /* 交集选择器（且）：选择器1选择器2选择器3{} */
        /* 元素选择器必写在最前面 */
        /* id选择器、统配选择器理论上可以做为交集的条件，但是没有意义 */
        p.beauty {
            color: green;
        }
        h2.beauty{
             color: aquamarine;
        }
        .rich.beauty{
            color: chocolate;
        }
        /* .beauty{
            color: pink;
        }
        #peiqi{
            color:chocolate;
        }
        .rich.beauty {
            color: orange;
        } */
    </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2 class="rich beauty">土豪明星王五</h2>
    <hr>
    <p>汪汪队</p>
    <p class="beauty">小狗旺财</p>
    <p class="beauty" id="peiqi">小猪佩奇</p>
</body>

并集选择器

 <style>
        /* 并集选择器（或）：选择器,选择器2,选择器3{} */
        .rich {
            color: gold;
        }
        .beauty {
            color: red;
        }
        .dog {
            color: blue;
            
        }
        .pig {
            color: green;
        }
        .rich,
        .beauty,
        .dog,
        .pig,
        #suxi {
            font-size: 40px;
            background-color: gray;
            width: 180px;
        }
    </style>
</head>
<body>
    <h1>哈哈哈哈</h1>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2>破产王五（不加任何样式）</h2>
    <hr>
    <p class="dog">小狗旺财</p>
    <p class="pig">小猪佩奇</p>
    <p id="suxi">小羊苏西</p>
</body>

后代选择器

 <style>
        /* 后代选择器（从祖先开始写）：选择器1 选择期2 选择器3{} */
        /* 选择器可以是我们学过的任何一种选择期 */
        li{
            color: red;
        }
        ul li {
            color: red;
        }
        ol li {
            color: green;
        }
        ul li a {
            color: orange;
        }
        ol li a {
            color: gray;
        }
        .subject li.front-end {
            color: blue;
        }
        .subject div.front-end {
            color: chocolate;
        }
        p h2{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>
            <a href="#">烫头</a>
        </li>
    </ul>
    <hr>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>
            <a href="#">王五</a>
        </li>
    </ol>
    <hr>
    <ol class="subject">
        <li class="front-end">前端</li>
        <div class="front-end">学科介绍：学好前端，挂帅杨帆！</div>
        <li>Java</li>
        <li>大数据</li>
        <li>UI</li>
    </ol>

    <p>哈哈哈哈
        <h2>啦啦啦啦啦</h2>
    </p>
</body>

子代选择器

 <style>
        /* 子代选择器（从父亲开始写）:选择器1>选择器2>选择器3{} */
        div a{
            color: aquamarine;
        }
        div>a {
            color: red;
        }
        div>p>a{
            color: skyblue;
        }
        .foot>a {
            color: chocolate;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">赵六</a>
            <div class="foot">
                <a href="#">孙七</a>
            </div>
        </p>
    </div>
</body>

兄弟选择器

 <style>
        /*相邻兄弟选择器（睡在下铺的兄弟）：选择器1+选择器2{}  */
        div+p {
            color: red;
        }
        /* 通用兄弟选择器（睡在下铺的所有兄弟）: 选择器1~选择器2{}*/
        div~p{
            color: chocolate;
        }
        li~li {
            color: orange;
        }
        li+li{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <div>汪汪队</div>
    <h2>信息技术学院</h2>
    <p>前端</p>
	<p>Java</p>
	<p>大数据</p>
	<p>UI</p>
    <ul>
        <li>主页</li>
        <li class="menu">秒杀</li>
        <li class="menu">订单</li>
        <li class="menu">我的</li>
    </ul>
</body>

属性选择器

<style>
        /* 1.[属性名]：选中具有某种属性的元素 */
        [title] {
            color: red;
        }

        /* 2.[属性名="属性值"]：选中的是具有指定属性值得元素 */
        [title="atguigu1"] {
            color: green;
        }

        /*3.[属性名^="属性值"]：属性值以指定值开头的元素  */
        [title^="atgui"] {
            color: blue;
        } 

        /*4.[属性名$="属性值"]：属性值以指定值结尾的元素  */
        [title$="u"] {
            color: yellow;
        } 

        /*4.[属性名*="属性值"]：属性值包含指定值的元素  */
        [title*="u"] {
            color: red;
        }
    </style>
</head>
<body>
    <div title="atguigu1">学院1</div>
	<div title="atguigu2">学院2</div>
	<div title="guigu">学院3</div>
	<div title="guigu" class="school">学院4</div>
    <div>学院5</div>
</body>

伪类选择器_概念

 <style>
        /* 伪类：很像一个类，但并不是一个类，只是元素的一种状态 */
        /* 伪类选择器   元素:元素状态 */
        a{
            color: yellow;
        }
        /* 超链接访问前的状态 */
        a:link {
            color: orange;
        }
        /* 超链接访问后的状态 */
        a:visited {
            color: gray;
        }
    </style>
</head>
<body>
    <a href="https://www.taobao.com">淘宝</a>
    <a class="baidu" href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
</body>

伪类选择器_动态伪类

 <style>

        /* 动态伪类遵循一个顺序:LVHA */
        a:link {
            color: orange;
        }
        a:visited {
            color: gray;
        }
        /* 鼠标悬停的状态 */
        a:hover {
            color: skyblue;
        }
        /* 元素激活的状态：鼠标按下不松开 */
        a:active {
            color: green;
        }


        span:hover {
            color: green;
        }

        span:active {
            color: red;
        }

        /* 获取焦点的元素 */
        input:focus,select:focus {
            color: orange;
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>
    <span>学院</span>
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
</body>

伪类选择器_结构伪类_1

/* first-child
last-child
nth-child
first-of-type
last-of-type
nth-of-type */

 <style>
        /* .first{
            color: red;
        } */
    
        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构1 */
        /* div>p:nth-child(2n+1) {
            color: red;
        } */

        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构2 */
        div>p:first-child {
            color: red;
        }
        div>p:last-child {
            color: yellow;
        }
        div>p:first-of-type {
            color: red;
        }
        /* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */
        /* div p:first-child {
            color: red;
        } */

        /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */
        p:first-child {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 结构1 -->
    <div>
        <span>学习成绩</span>
        <p>王麻子：99分</p>
        <p class="first">张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
    </div>

    <!-- 结构2 -->
    <!-- <div>
        <span>张三：98分</span>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
    </div> -->

    <!-- 结构3 -->
    <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三：98分</p>
        </marquee>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
    </div>
</body>

伪类选择器_结构伪类_2

 <style>
        /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）—— 结构1*/
        /* div>p:first-child {
            color: red;
        } */

        /* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）—— 结构1*/
        /* div>p:last-child {
            color: red;
        } */
        
        /* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 */
        div>p:nth-child(-n+5) {
            color: red;
        }
        /* nth-child()
        关于n的值（0-正无穷）：
        传第几个元素，N就等于几
            n：选中所有子元素，但是没意义
            1~正无穷的正整数
            2n（even）：选中序号为偶数的子元素
            2n+1（odd）：基数
            -n+5：前五个
        */
        /* div>p:nth-child(2n) {
            color: red;
        } */
    
        /* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        /* div>p:first-of-type{
            color: red;
        } */

        /* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        /* div>p:last-of-type{
            color: red;
        } */
        
        /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
        /* div>p:nth-of-type(5) {
            color: red;
        } */
    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
    </div> -->

    <!-- 结构2 -->
    <div>
        <p>第1个</p>
        <p>第2个</p>
        <p>第3个</p>
        <p>第4个</p>
        <p>第5个</p>
        <p>第6个</p>
        <p>第7个</p>
        <p>第8个</p>
        <p>第9个</p>
        <p>第10个</p>
    </div>

    <!-- 结构3 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <span>测试2</span>
        <p>赵六：68分</p>
        <span>测试3</span>
        <p>孙七：58分</p>
        <span>测试4</span>
        <p>老八：48分</p>
        <span>测试5</span>
    </div> -->
</body>

伪类选择器_结构伪类_3

/*
nth-last-child（n）：所有兄弟元素中的倒数第n个
nth-last-of-type（n）：所有同类型元素中的倒数第N个
only-child：没有兄弟元素的独生子女
only-of-type：没有同类型的兄弟元素
root：根元素~html
empty：内容为空的元素

 <style>
        /* 选中div中倒数第n个的儿子p元素（按照所有兄弟）—— 看结构1 */
        /* div>p:nth-last-child(3) {
            color: red;
        } */

        /* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟）—— 看结构1 */
        /* div>p:nth-last-of-type(2) {
            color: red;
        } */
        
        /* 选中的是没有兄弟的span元素 —— 看结构2 */
        /* span:only-child {
            color: red;
        } */

        /* 选中的是没有同类型兄弟的span元素 —— 看结构2 */
        /* span:only-of-type {
            color: red;
        } */

        /* 选中的是根元素 */
        /* :root {
            background-color: gray;
        } */

        /* 选中的是没有内容的div元素 */
        div:empty {
            height: 100px;
            width: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
    <!-- 结构1 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
        <span>测试2</span>
    </div> -->
    
    <!-- 结构2 -->
    <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
    </div>

    <!-- 结构3 -->
    <div></div>
</body>

伪类选择器_否定伪类

 <style>
        /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
        /* div>p:not(.fail) {
            color: red;
        } */

        /* 选中的是div的儿子p元素，但是排除title属性值以“你要加油”开头的 */
        /* div>p:not([title^="你要加油"]) {
            color: red;
        } */

        /* 选中的是div的儿子p元素，但排除第一个儿子p元素 */
        div>p:not(:first-child) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p class="fail" title="你要加油啊！孙七">孙七：58分</p>
        <p class="fail" title="你要加油啊！老八">老八：48分</p>
    </div>
</body>

伪类选择器_UI伪类

 <style>
        /* 选中的是勾选的复选框或单选按钮 */
        input:checked {
            width: 100px;
            height: 100px;
            color: red;
        }
        /* 选中的是被禁用的input元素 */
        input:disabled {
            background-color: gray;
        }
        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: green;
        }

    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="text">
    <input type="text" disabled>
</body>

伪类选择器_目标伪类

/* 定义 */
<style>
        div {
            background-color: gray;
            height: 300px;
        }
        div:target {
            background-color: green;
        }
 </style>
/* 使用 */
<body>
    <a href="#one">去看第1个</a>
    <a href="#two">去看第2个</a>
    <a href="#three">去看第3个</a>
    <a href="#four">去看第4个</a>
    <a href="#five">去看第5个</a>
    <a href="#six">去看第6个</a>

    <div id="one">第1个</div>
    <br>
    <div id="two">第2个</div>
    <br>
    <div id="three">第3个</div>
    <br>
    <div id="four">第4个</div>
    <br>
    <div id="five">第5个</div>
    <br>
    <div id="six">第6个</div>
</body>

伪类选择器_语言伪类

/* 定义 */ 
<style>
        div:lang(en) {
            color: red;
        }
        :lang(zh-CN) {
            color: green;
        }
    </style>
/* 使用*/
<body>
    <div>学院1</div>
    <div lang="en">学院2</div>
    <p>前端</p>
    <span>你好</span>
</body>

伪元素选择器

/* 定义*/
<style>
        /* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 */

        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content:".00"
        }
    </style>
/*使用 */
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>

选择器优先级_简单聊

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

选择器优先级_详细聊

 <style>
        #atguigu {
        /* （1，0,0） */
            color: orange;
        }
        /* （a,b,c）
            a:ID选择器的个数
            b：类、伪类、属性选择器的个数
            c：元素、伪元素选择器的个数
        */
        .container span.slogan {
            /* （0，2,1） */
            color: red;
        }
        div>p>span:nth-child(1) {
            /* （0，1,3） */
            color: green;
        }
        .slogan !important{
            /* !important的权重大于所有选择器,写在属性值上,而不是选择器上 */
            color: purple;
        }
    </style>
</head>

    <div class="container">
        <p>
            <span class="slogan" id="atguigu" style="color: chocolate;">西昌学院</span>
            <span>欢迎同学们来学习！</span>
        </p>
    </div>
</body>

每天学一点，知识不遗漏！