首页 > 其他分享 >选择器

选择器

时间:2023-08-09 15:11:13浏览次数:22  
标签:匹配 伪类 元素 child div 选择器

记录下标签跳转

a、标签跳转到指定位置

<a href="#A1">方法一</a><a href="#A2">方法二</a><a href="#A3">方法三</a>
<div><a name="A1">方法一</a></div>
<div><a name="A2">方法二</a></div>
<div><a name="A3">方法三</a></div>

b、拨打电话

<a href="tel:123456789"></a>

 

正文

(一)、属性选择器

1、E[attr]:只使用属性名,但没有确定任何属性值;div[class]{}

2、E[attr="value"]:完全匹配;div[class=""]{}

3、E[attr~="value"]:包含就匹配div[class~=""]{}

4、模糊匹配

E[attr^="value"]

E[attr$="value"]

E[attr*="value"]

 

(二)伪类选择器

1、结构性伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持;li:first-child{}
X:last-child匹配父元素中最后一个X元素;li:last-child{}
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配X:root匹配文档的根元索。在HTML (标准通用标记语言下的一个应用)中,根元索永远是HTMLX:empty匹配没有任何子元素 (包括包含文本) 的元素X;奇数: li:nth-child(odd){},偶数:li:nth-child(even){}

X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配, div p:nly-child{}

X:root匹配文档的根元索。在HTML (标准通用标记语言下的一个应用)中,根元索永远是HTML;     root:body{}

X:empty匹配没有任何子元素 (包括包含文本) 的元素X;     div:empty{}

 

2、目标伪类选择器

E:target 选择匹配E的所有元素,且匹配元素被相关URL指向;div:target {};

 

3、UI 元素状态伪类选择器

E:enabled 匹配所有用户界面 (form表单) 中外于可用状态的E元素

E:disabled 配所有用户界面 (form表单)中处于不可用状态的E元素

E:checked 匹配所有用户界面 (form表单) 中处于选中状态的元素

EE:selection 匹配E元素中被用户选中或外于高亮状态的部分

 

 4、否定伪类选择器

E:not(s) (IE6-8浏览器不支持:not0选择器。);li:not(:first-child){}

 

 5、动态伪类选择器

E:link
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上


E:visited
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮 上
E:hover
用户行为选择器

选择匹配的E元素,且用户鼠标停留在元素E上,IE6一下仅支持a:hover

标签:匹配,伪类,元素,child,div,选择器
From: https://www.cnblogs.com/dongzi1997/p/17616898.html

相关文章

  • CSS基础-选择器
    概念前文说,CSS是给HTML添加样式的,那么要想两者之间产生作用,就需要用到选择器。选择器标记在HTML标签上;通过选择器,浏览器可以知道什么时候加载这些样式。CSS通过选择器组合一组样式,集体作用在某一段html代码上。多种选择器标签选择器标签选择器,使用HTML的标签作为选择器......
  • CSS选择器介绍
    1、三种基本选择器优先级:id选择器>类选择器>标签选择器/*标签选择器,可以作用于HTML里面的所有这种标签*/h1{ color:red; background-color:aquamarine; border-radius:5px;}p{ font-size:38px;}/*类选择器,.class类名,可以多个标签归类*/.xuexi{ color:blue......
  • uniapp 只选择月份与日的时间选择器
    1、使用 <picker> 组件的 mode 属性设置为 "multiSelector",然后通过设置 range 属性来提供可选的月份和日的列表。<template><view><pickermode="multiSelector":range="range"@change="onPickerChange"><viewclass=......
  • 使用伪类hover选择器显示边框页面抖动问题
    起因在mdn上完成“鼠标在某些HTML元素上悬停时增加动画”的练习时发生异常。当鼠标悬浮在p标签上,边框出现的同时,页面也会跟着抖动:我是打算在css样式里给p标签绑定伪类hover,当鼠标悬浮在p元素上时会出现边框并改变背景颜色,我的代码如下:p:hover{border:3pxridge;......
  • Unity 编辑器选择器工具类Selection 常用函数和用法
    Unity编辑器选择器工具类Selection常用函数和用法点击封面跳转下载页面简介在Unity中,Selection类是一个非常有用的工具类,它提供了许多函数和属性,用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法,并提供相应的示例代码。静态属性1.activeConte......
  • Unity 编辑器选择器工具类Selection 常用函数和用法
    Unity编辑器选择器工具类Selection常用函数和用法点击封面跳转下载页面简介在Unity中,Selection类是一个非常有用的工具类,它提供了许多函数和属性,用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法,并提供相应的示例代码。静态属性1.activeContex......
  • 选择器
    CSS(CascadingStyleSheets,层叠样式表)中包含各种类型的选择器,用于选择要应用样式的HTML元素。选择器定义了哪些元素将受到CSS规则的影响,从而可以控制元素的外观和样式。以下是一些常见的CSS选择器类型:元素选择器:选择特定标签的元素。例如,div会选择所有<div>元素。ID选择......
  • jQuery--dom对象选择器
    一、概述选择器:就是一个字符串,用来定位dom对象定位了dom对象就可以通过jquery的函数操作dom对象二、常用选择器1、id选择器$("#id值")通过dom对象的id定位dom对象。id是当前页面唯一值 2、class选择器$(".class样式名")使用样式的名称定位dom对象3、标签选择器$("标签名......
  • css伪类选择器大全
    伪类选择器css伪类选择器大全:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes伪类含义:link选中未访问过的超链接:visited选中已访问过的超链接:hover选中鼠标移入的元素:active选中鼠标按下的元素:focus选中聚焦的表单元素:......
  • 关于elementUI中Cascader 级联选择器高度问题:终极解决方案
    在使用elementUi级联选择器时,如果里面的option太多,导致它撑满整个屏幕,网上找了挺久的解决方案,都是说在全局设置它的高度,这个方法有效,但是这种方式我忍不了,因为它会影响到全局Cascader样式,以下设置意味着整个项目中的所有级联选择器都是300px,那如果我在别的页面没那么多option,岂不......