css3选择器归类整理---基本选择器和属性选择器

17肖俊俊俊      2022-02-14     191

关键词:

css3选择器分类

CSS3选择器分类如下图所示

 

选择器的语法

1.基本选择器

类型 代码 功能描述
通配选择器 *{ margin: 0; padding: 0; border: none; } 选择文档中所有HTML元素
元素选择器 body { background: #eee; } 选择指定类型的HTML元素
类选择器 .list { list-style: square; }

选择指定class属性值为“class”的

任意类型的任意多个元素

ID选择器 #list { width: 500px; margin: 0 auto; } 选择指定ID属性值为“id”的任意类型元素
后代选择器 .list li { margin: 10px; background: #fff; } 选择作为某元素后代的元素。

基本选择器扩展

类型 代码 功能描述
子元素选择器 #wrap > .inner. {color: pink;}

也可称为直接后代选择器,

此类选择器只能匹配到直接后代,

不能匹配到深层次的后代元素

相邻兄弟选择器 #wrap #first+.inner{color:#f00; } 它只会匹配紧跟着的兄弟元素
通用兄弟选择器 #wrap #first ~ div { border: 1px solid;} 它会匹配所有的兄弟元素(不需要紧跟)
选择器分组 h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符

2.属性选择器

(1)存在和值属性选择器

选择器 功能描述
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute] 用于选取带有指定属性的元素。

(2)子串值属性选择器

选择器 功能描述
[attr|=val] 用于选取带有以指定值开头的属性值的元素。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

 

css3新增选择器:伪类选择器和属性选择器

一、结构(位置)伪类选择器(:)1、:first-child2、:last-child3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)<body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li&g 查看详情

csscss样式的三种选择器:基本选择器组合选择器和属性选择器

  基本选择器基本选择器分为四种:通用选择器标签选择器类选择器ID选择器1.通用选择器通用选择器是一个星号*,功能类似于通配符,用与匹配文档中所有的元素类型,使页面中所有元素都是用该规则。<!DOCTYPEhtml>&l... 查看详情

csscss样式的三种选择器:基本选择器组合选择器和属性选择器

  基本选择器基本选择器分为四种:通用选择器标签选择器类选择器ID选择器1.通用选择器通用选择器是一个星号*,功能类似于通配符,用与匹配文档中所有的元素类型,使页面中所有元素都是用该规则。<!DOCTYPEhtml>&l... 查看详情

CSS3:空选择器和内容属性

】CSS3:空选择器和内容属性【英文标题】:CSS3:emptyselectorandcontentproperty【发布时间】:2012-12-1515:47:34【问题描述】:我想要一起使用CSS3的:emptypsedo-selector和CSS3的content属性来向空列表添加一些文本,如下面的小提琴所示:http://js... 查看详情

css3选择器——伪类选择器

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器... 查看详情

css3选择器(详细!全!)(代码片段)

文章目录一、属性选择器1、E[att^=value]属性选择器2、E[att$=value]属性选择器3、E[att*=value]属性选择器二、关系选择器1、子代选择器(>)2、兄弟选择器(+、~)临近兄弟选择器(+)普通兄弟... 查看详情

jquery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

  总的来说,选择器引擎规则就是:$(‘查询字符串‘)。  最常用最基本的就是:1、标签选择器(以文档元素作为选择符):$("div"); 2、id选择器(以ID作为选择符):$("#demo1"); 3、类选择器(以class作为选择符):$(".selected");... 查看详情

css3中伪类选择器和伪元素介绍

...,css3也是必须要掌握的,下面和大家讨论一下css3中伪类选择器和伪元素。类选择器在css中可以使用类选择器把相同的元素定义成不同的样式。比如:p.left{text-align:left}p.rigth{text-align:right}伪类选择器类选择器和伪类选择器的区别... 查看详情

css选择器——属性选择器和基于元素结构关系的选择器

在有些标记语言中,不能使用类名和id选择器,于是css2引入了属性选择器。3.属性选择器  a)根据是否存在该属性来选择    如果希望选择有某个属性的元素,例如要选择有class属性的所有h1元素,使其文本为银色,可以这... 查看详情

css3选择器——导图篇

css3选择器主要有:基本选择器,层次选择器, 伪类选择器, 伪元素选择器,属性选择器基本选择器 层次选择器 伪类选择器分为 动态伪类选择器,目标伪类选择器,语言伪类选择器,UI元素状态伪类选择器,... 查看详情

css3选择器和伪类

元素选择子:* 任何元素E 与E标签结合的任何元素EF E的所有派生标签中,有F标签的元素E>F 或者 E/F E的所有直接的拥有F标签的子类E+F 所有具有F标签的元素,紧靠的前一个元素有E标签E~F 所有具有F... 查看详情

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结<divid="parent"><p>I‘maexample</p><pid="one">I‘maexample</p><p>I‘maexample</p><p>I‘maexample</p> 查看详情

使用 jQuery 组合类选择器和属性选择器

】使用jQuery组合类选择器和属性选择器【英文标题】:CombiningaclassselectorandanattributeselectorwithjQuery【发布时间】:2011-09-0822:54:51【问题描述】:是否可以将类选择器和属性选择器与jQuery结合起来?例如,给定以下HTML:<TABLE><... 查看详情

基础css基础选择器和属性

目录选择器#idID选择器.class类选择器#id,.class群组选择器#id.class后代选择器#id>.class子选择器#id+.class毗邻选择器.class[type="text"]属性选择器新增选择器权重值a:link伪类清浮动常用给布局水平居中垂直居中文本超出隐藏盒模型标准盒模... 查看详情

jquery选择器和选取方法

 一、jQuery选择器在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。... 查看详情

jquery——表单对象属性筛选选择器和特殊选择器this

   表单对象属性筛选选择器和特殊选择器this1 表单对象属性选择器专门针对表单元素,可以附加在其他选择器的后面,对所选择的表单元素进行筛选2  表单对象属性选择器的描述$(":enabled")   选... 查看详情

jq选择器归类

1.基本选择器$("#id")//ID选择器$("div")//元素选择器$(".classname")//类选择器$(".classname,.classname1,#id1")//组合选择器2.层次选择器$("#id>.classname")//子元素选择器$("#id.classname")//后代元素选择器$("#id+.classname")//紧邻下一个元素选择器$("#id~. 查看详情

css3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:ho... 查看详情