web选择器

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

1基本选择器

<!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>
    /* 标签选择器 选中所有的p标签*/
    p{
      color: aqua;
    }
    /* id选择器 */
    #box1{
      color: pink;
    }
    /* 类选择器 */
    .box2{
      color: blueviolet;
    }
    /* 通配符选择器 */
    *{
      background-color:pink;
    }
  </style>
</head>
<body>
  <p>我是一段文字</p>
  <p>我是一段文字</p>
  <div id="box1">我是一个盒子</div>
  <div class="box2">我是一个盒子</div>
</body>
</html>

2.包含选择器

<!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: pink;
    }
    /* 后代选择器 找到后代所有要找的元素*/
    .a li{
      color: aqua;
    }
  </style>
</head>
<body>
  <div>
    <ul class="a">
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </ul>
  </div>
  
</body>
</html>

3.复合选择器

<!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{
    color:red;
   }

  </style>
</head>
<body>
  <div>asdasfaf</div>
  <p>safafewaaf</p>
  <span>rgewgwq</span>
  <ul>
    <li>拆的花朵</li>
  </ul>
</body>
</html>

4.属性选择器

<!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: aquamarine;
    }
    div[id]{
      width: 200px;
      height: 300px;
       background-color: black;
    }
    /* type^="te" 以te开头 */
    input[type^="te"]{
      background-color: aquamarine;
    }
    /* type$="l" 以l结尾*/
    input[type$="l"]{
      background-color: green;
    }
    /* type*="e" type值里包含e的*/
    input[type*="e"]{
      background-color: green;
    }
  </style>
</head>
<body>
  <input type="text"> <br/>
  <input type="password"> <br/>
  <input type="search"> <br/>
  <input type="url"> <br/>
  <input type="number"> <br/>


  <div id="aquamarine">1</div>
  
</body>
</html>

5.伪类选择器

<!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:link{
      color:pink;
    }
    a:visited{
      color:black；
    }
    /* hover 鼠标悬停 */
    a:hover{
      /* 鼠标样式 */
      cursor:cell;
      font-size:40px;
    }
    /* 长按 */
    a:active{
      font-size:70px;
    }
    a:hover+div{
      /* 元素消失 */
      display: none;
    }

    
  </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=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 父元素 子元素：nth-child(n):父元素第n个子元素  -->
  <style>
    ul li:first-child{
      background-color: pink;
    }
    ul li:last-child{
      background-color: green;
    }
    ul li:nth-child(4){
      background-color: blue;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</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>Document</title>
  <style>
    ul li:nth-child(2){
      background-color: pink;
    }
    ul li:nth-of-type(2){
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <p>我是一段文字</p>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  
</body>
</html>

6.伪元素选择器

<!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>
    ul li::before{
      /* content 必有属性 */
          content: "~";
    }
    ul li::after{
          content: "<";
    }
    /* 表单提示词 */
    input::placeholder{
      color:red;
    }
    /* selection 选中时 */
    ul li:nth-child(4)::selection {
      color: pink;
    }
  </style>
</head>
<body>
  用户名：<input type="text" name="user" value="" placeholder="请输入用户名：" maxlength="4">
 <ul>
  <li>asfafs</li>
  <li>gegsg</li>
  <li>asfafs</li>
  <li>hdrrhd</li>
 </ul>
</body>
</html>

沉醉几度
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web网页端颜色选择器
12-01
总的来说，"web网页端颜色选择器"涉及到网页开发的多个方面，包括前端框架、交互设计、颜色表示和无障碍性等。理解和掌握这些知识点，能帮助开发者创建出高效、易用且美观的颜色选择组件，提升用户体验。
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
Web:选择器的种类
JunYig的博客
06-11 1844
1.标记选择器： 标记是元素的固有特征。 标记选择器它将属于该标记的所有元素全部选中。 ex. 2.类选择器：其中class为元素定义类名。 再根据类名定义类选择器来选中该类元素，类选择器以“.”开头。 （1）类选择器的第一种用法： ex. （2）类选择器的第二种用法： 3.id选择器：其使用方法和类选择器相同，但是不同之处：id选择器只能用于一个元素，而类选择器可以应用于多个元素。 id选择器以“#”开头。 ...
WEB中五大选择器（基本选择器、包含选择器、复合选择器、属性选择器、伪类选择器）
m0_68976043的博客
07-10 1988
选择器五大总结
【web前端开发】CSS最常用的11种选择器
云泽野の编程日记
03-09 5258
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS的作用:给HTML里面的标签设置样式简单点来说就是让HTML的页面变得更加好看。
Web前端，CSS标签选择器、类选择器、id选择器、通配符选择器，理解选择器的作用，能够使用基础选择器在 HTML中选择元素
星辰迷上大海的博客
04-24 1937
持续总结输出中，今天讲的是Web前端，CSS标签选择器、类选择器、id选择器、通配符选择器，理解选择器的作用，能够使用基础选择器在 HTML中选择元素
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
CSS3选择器大全
Shadow_Weirdo
08-16 3万+
1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana...
jQuery 兄弟元素选择器
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
09-17 4万+
本篇文章介绍jQuery的兄弟元素选择器。兄弟节点的查找方式有很多，本文章只列举出实用性较高的方式。
Web滑动日期选择器（仿iOS）
Monster-L的专栏
04-03 1万+
datepicker.mobile移动web端统一使用体验，在ios上通过select标签滑轮的效果很赞，但是android不同版本表现各异，为了统一UI与使用体验，使用开源库mobiscroll封装了一个自己的时间选择控件（mobiscroll库的使用文档不多，自己使用时也遇到很多坑），实现js比较简单，大家可以看看，然后定制出自己的时间选择器。
CSS后代选择器
歪脖先生的博客
12-02 1万+
关系选择器 关系选择器，顾名思义，是根据HTML元素在DOM树中的关系来选择元素，这些关系包括后代、父子、同胞、相邻同胞。于是，关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
web前端 --- CSS（1）-- 选择器
weixin_62443409的博客
04-23 8700
【代码】web前端 --- CSS（1）
web端 日期选择器 月份选择器 时间选择器 时间范围选择器
03-23
本文将详细讲解"web端日期选择器、月份选择器、时间选择器以及时间范围选择器"这四个核心知识点，并结合提供的文件名称进行分析。 1. **日期选择器** 日期选择器是Web应用中常见的组件，用于让用户选择一个具体的...
jsp日期选择器开发技术- Web开发
06-13
日期选择器是Web应用程序中不可或缺的组件，它允许用户方便地选取日期，常见于表单输入、日程安排等场景。本教程将重点探讨如何在JSP中实现日期选择器的开发技术。 首先，我们需要理解JSP中的基本概念。JSP是由HTML...
web端 颜色选择器
01-07
在Web开发中，颜色选择器是一个非常实用的工具，它允许用户在网页上方便地选取颜色，常用于设计、编辑或者配置界面元素的颜色。这里我们关注的是一个基于jQuery的Web端颜色选择器，它被设计得既漂亮又美观，且具有...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1106
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 905
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vue前端打包
weixin_63680330的博客
07-04 299
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 217
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
(三)前端javascript中的数据结构之链表上
峰会路转的博客
07-08 214
在js中，没有为我们提供原生的数据结构支持的，但是在java中是有提供的。所以需要我们去模拟这种结构实现。链表中最关键的一个元素，就是头节点，头节点不存储数据，指向第一个节点链表中几乎所有的操作都要从头结点开始。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值