关于HTML中常用选择器

一.五种基本选择器:

1）*：匹配HTML中所有元素，一般用于除去内边距和外边距，其性能较差，不推荐使用；

2）标签名（在JavaScript中也称节点）:标签选择器。注意在用标签修改样式时，所有具有该标签名的内容都会被修饰；

3）ID选择器：注意ID有且只有一个，在标签内#+名称；

4）类选择器：用来选择class名的选择器，可有多个；

5）派生选择器：根据上下文来确定标签，A选择器+空格+B选择器

*让多个选择器具有相同样式:A选择器+‘，’+B选择器+‘，’+C选择器

二.其它特殊选择器：

一）元素选择器：

1.空格：后代选择器（div标签中包含p标签，则div p选中的就是div下的p标签）；

2.>:只选择子元素，孙子元素不选择（div中包含p标签，而p标签又包含span标签，则div>p选中的就是div下的p标签，这时也会继承）；

3.+：兄弟选择器，一个元素紧跟下一个元素且二者有相同的父元素时可使用兄弟选择器（兄弟选择器只使后者的样式改变，真不如叫小弟选择器），有四个兄弟，老大+老二+老三+老四，这时老二和老三和老四的样式会改变，而老大不会；

注：如果是li+li+li时浏览器会寻找前两个是li的标签然后改变第三个li。

三.伪类选择器:一般作用与超链接上

1）a:active:超链接跳转时展现的样式;

2）a:visited:超链接访问过后的样式;

3）a:hover:超链接悬停时的样式;

4）a:link:超链接访问前的样式;

5）input:focus:一般用于输入框获得焦点时的样式;

6）子元素伪类选择器：：first-child(选择父元素的第一个子元素的元素)/:last-child(选择父元素的最后一个子元素的元素)/:nth-child(n)（这里的n可以是数值也可以是odd/even等特殊数）

四、属性选择器：

1.[属性名]：包含有指定属性名的元素（常用);

2.[属性名=值]：属性名的值为指定值的元素;

3.[属性名~=值]：属性名的值包含指定值的元素;

4.[属性名^=值]：属性名的值以指定值开头的元素；

5.[属性名$=值]：属性名的值以指定值的结尾的元素;

关于HTML中常用选择器相关推荐

CSS中常用选择器总结
以下为举例基本选择器: div{border: 1px solid black;}p{color: green;}p>span[class="one"]{/*对段落中文字 ...
实操代码带你理解CSS中的常用选择器（你值得掌握！）
在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步! https://blog ...
CSS中常用的几种选择器是哪几种呢？
CSS中常用的选择器: (一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器 (五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素 (一)基本选择器 ...
css中的一些常用选择器
css中的选择器 1.标签选择器,作用与当前页面所有匹配标签这里以p标签为例: p{ color: blue; } < p>-</p> 2.类选择器, ...
html 文档自动获取css,前端基础中css选择器，html文档 ,与javascrip中基本的获取
1,Vscode自动刷新插件与格式化插件应用搜索搜索liveserver,安装后.点击右下角Golive可以进入使用. 格式化插件prettier:首选项,设置,搜索format,勾选prettie ...
CSS选择器详解（一）常用选择器
目录类型选择器类选择器 ID选择器伪类伪元素类型选择器通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...
CSS中id选择器和class选择器
CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用的两种选择器为id选择器和class选择器. id选择器和class选择器介绍 id选择器:用来为标有特定id的html元素指定特 ...
jQuery常用选择器有哪些？
jQuery常用选择器有哪些? jQuery里面使用最频繁的选择器应该就是 id选择器$('#element-id') class选择器$('.class-name') 标签选择器$('element ...
jq常用过滤器_JQuery的常用选择器、过滤器、方法全面介绍
1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.check ...

关于HTML中常用选择器

关于HTML中常用选择器相关推荐

最新文章

热门文章