css选择器

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量22 收藏
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuli_student/article/details/131650194
版权

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        #123{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <p id="123">1234567890</p>
    <div class="666">666666666</div>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="password"]{
            background-color: pink;
        }
 
        input[type^="te"]{
            background-color: pink;
        }
        /* 以te开头的type，input */
 
        input[type$="on"]{
            background-color: yellowgreen;
        }
        /* on结尾 */
        input[type*='e']{
            background-color: aquamarine;
        }
        /* 包含e */
       
 
    </style>
</head>
<body>
    <input type="text">
    <input type="button>">
    <input type="password">
</body>
</html>

复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p,
        span{
            background-color: pink;
        }
 
    </style>
</head>
<body>
    <DIV>UIHICHOICLHMOL</DIV>
    <P>UEJHCDIDCKNIK</P>
    <SPAN>eiuhcoyix</SPAN>
</body>
</html>

包含选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a li{
            background-color: aquamarine;
        }
 
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

味蕾选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:hover{
            font-size: 40px;
            cursor: cell;
            /* 鼠标样式 */
        }
        /* 悬停时 */
 
        a:link{
            color: pink;
        }
 
        a:visited{
            color: aquamarine;
        }
        /* 访问后 */
 
        a:active{
            font-size: 40px;
        }
        /* 鼠标悬停，但未放下 */
 
        a:hover+div{
            background-color: aquamarine;
        }
        
 
 
 
 
 
    </style>
</head>
<body>
    <a href="#">去百度</a>
    <div></div>
    
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            background-color: aqua;
        }
        /* 找ul中li第一个孩子*/
 
        ul li:last-child{
            background-color: aquamarine;
        }
        /* 最后一个 */
 
        ul li:nth-child(4){
            background-color: blue;
        }
        /* 第4个 ，全部编码再找*/
        
        ul li:nth-child(2n){
            background-color: aqua;
        }
        /* 偶数/even */
 
        ul li:nth-child(2n-1){
            background-color: aqua;
        }
        /* 奇数/odd */
 
        ul li :nth-of-type(n){
            background-color: blue;
        }
        /* 先找li，再编码再找 */
 
 
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li::before{
            content: "******"";
        }
        /*在li所有行前加******  */
 
        ul li::after{
            content: ">";
        }
        /* 末尾加> */
 
        ul li:nth-child(4)::selection{
            color: pink;
        }
        /* selection选中时 */
        /* placeholder 表单提示词 */
 
        
 
 
 
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

nuli_student
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 选择器
langmanboy的博客
04-08 1950
CSS 选择器 1. 什么是 CSS 选择器？ CSS 选择器用于查找（或选取）要设置样式的 HTML 元素 CSS 选择器可以分为五大类： 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 选择器 {属性: 属性值;} 2. 简单选择器 元素选择器 类选择器 id 选择器 * 通用选择器（通配符） 交集与并集选择器 2-1 元素
CSS选择器
qq_48424026的博客
07-20 53
CSS选择器 文章目录CSS选择器1.css简介（1）网页分为三个部分：结构(html)、表现(CSS)、行为(JavaScript)（2）CSS—层叠样式表（3）通过CSS来修改元素的样式2.CSS语法（1）选择器，通过选择器可以选中页面中指定元素，比如 p 的作用就是选中页面中所有元素的p元素（2）声明块，通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成，声明是一个名值对结构3.常用选择器（1）元素选择器（2）id选择器（3）类选择器（4）通配选择器4.复合选择器（1）交集选择器（2）选择
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
flex：1
m0_47999208的博客
07-25 337
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 379
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS相关记录
oThrowsException的博客
07-24 746
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1253
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
Vue 3 + Vite 项目中安装 Tailwind CSS
lq099526的专栏
07-22 419
安装 Tailwind CSS步骤，失效，样式不加载
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 555
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
CSS 基础
不能再留遗憾了的博客
07-23 434
后端程序员必须掌握的CSS知识
【CSS】响应式设计
小秀的博客
07-24 312
响应式设计是指通过⼀些技术⼿段，使得⽹站或应⽤在不同终端设备（如桌⾯电脑、平板电脑、⼿机等）上能够⾃适应地呈现最佳的⽤户体验。⼀种实现⽅式是使⽤等技术，以便根据设备屏幕的宽度和⾼度等信息⾃适应地调整⻚⾯的布局和元素的⼤⼩。另⼀种实现⽅式是使⽤，根据设备的屏幕尺⼨和分辨率等信息，加载不同的样式⽂件或应⽤不同的样式规则，以便实现不同场景下的最佳效果。
css气泡背景特效
u011626414的专栏
07-23 296
动画是可选的，并且它实际上并不创建额外的气泡效果，而只是让整个背景有微妙的移动。如果你想要更多的气泡，并且希望它们随机出现和消失，你可能需要使用JavaScript或更复杂的CSS动画来生成它们。此外，你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。要创建一个CSS气泡背景特效，你可以使用CSS的伪元素（属性来创建圆形或椭圆形的“气泡”，以及。属性来设置背景和动画效果。请注意，上述示例中的。
CSS选择器优先级与实战练习解析
练习部分则设计了不同级别的任务，帮助学习者逐步掌握这些概念，从理解到应用，提升对CSS选择器和样式的优先级的熟练度。例如，练习1关注五种选择器的使用，练习2强调样式优先级的理解，练习3和4涉及`display`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值