首页 > 其他分享 >CSS 选择器参考手册

CSS 选择器参考手册

时间:2023-06-26 20:01:00浏览次数:35  
标签:参考手册 每个 元素 选择 nth last 选择器 CSS first


在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)

 

选择器

例子

例子描述

CSS

.class

.intro

选择 class="intro" 的所有元素。

1

#id

#firstname

选择 id="firstname" 的所有元素。

1

*

*

选择所有元素。

2

element

p

选择所有 <p> 元素。

1

element,element

div,p

选择所有 <div> 元素和所有 <p> 元素。

1

element element

div p

选择 <div> 元素内部的所有 <p> 元素。

1

element>element

div>p

选择父元素为 <div> 元素的所有 <p> 元素。

2

element+element

div+p

选择紧接在 <div> 元素之后的所有 <p> 元素。

2

[attribute]

[target]

选择带有 target 属性所有元素。

2

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

2

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

2

:link

a:link

选择所有未被访问的链接。

1

:visited

a:visited

选择所有已被访问的链接。

1

:active

a:active

选择活动链接。

1

:hover

a:hover

选择鼠标指针位于其上的链接。

1

:focus

input:focus

选择获得焦点的 input 元素。

2

:first-letter

p:first-letter

选择每个 <p> 元素的首字母。

1

:first-line

p:first-line

选择每个 <p> 元素的首行。

1

:first-child

p:first-child

选择属于父元素的第一个子元素的每个 <p> 元素。

2

:before

p:before

在每个 <p> 元素的内容之前插入内容。

2

:after

p:after

在每个 <p> 元素的内容之后插入内容。

2

:lang(language)

p:lang(it)

选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。

2

element1~element2

p~ul

选择前面有 <p> 元素的每个 <ul> 元素。

3

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 <a> 元素。

3

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。

3

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

3

:first-of-type

p:first-of-type

选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

3

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个 <p> 元素。

3

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 <p> 元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上,从最后一个子元素开始计数。

3

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上,但是从最后一个子元素开始计数。

3

:last-child

p:last-child

选择属于其父元素最后一个子元素每个 <p> 元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个 <p> 元素(包括文本节点)。

3

:target

#news:target

选择当前活动的 #news 元素。

3

:enabled

input:enabled

选择每个启用的 <input> 元素。

3

:disabled

input:disabled

选择每个禁用的 <input> 元素

3

:checked

input:checked

选择每个被选中的 <input> 元素。

3

:not(selector)

:not(p)

选择非 <p> 元素的每个元素。

3

::selection

::selection

选择被用户选取的元素部分。

3

 



 



 

标签:参考手册,每个,元素,选择,nth,last,选择器,CSS,first
From: https://blog.51cto.com/u_16171388/6557293

相关文章

  • JQ 可见性过滤选择器
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><!--引入jQuery--><scriptsrc="js/jquery-1.10.1.min.js"type="text/javascript&q......
  • css属性中的 filter 和 backdrop-filter 使用
    filterCSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter/*URLtoSVGfilter*/filter:url("filters.svg#filter-id");/*<filter-function>values......
  • CSS样式(内联、内部、外部)
    https://blog.csdn.net/xiji333/article/details/111283931文章目录1.内联样式2.内部样式3.外部样式1.内联样式  内联样式,又称行内样式。在标签内部通过stylestylestyle属性来设置元素的样式。<!DOCTYPEhtml><html><head><metacharset="utf-8"><ti......
  • 爬虫如何通过HTML和CSS采集数据的 ?
    爬虫可以应用于各种应用场景,包括数据分析、市场研究、舆情监测、竞争报、价格比较、内容聚合等。对于需要大量数据的业务和研究领域,爬虫能够提供宝贵的支持。爬虫可以按照设定的规则从多个网进行批量数据抓取,比人工手动方式更高效。量数据,并支持后续的数据分析和决策。爬虫可以通......
  • 爬虫如何通过HTML和CSS采集数据的 ?
    爬虫可以应用于各种应用场景,包括数据分析、市场研究、舆情监测、竞争报、价格比较、内容聚合等。对于需要大量数据的业务和研究领域,爬虫能够提供宝贵的支持。爬虫可以按照设定的规则从多个网进行批量数据抓取,比人工手动方式更高效。量数据,并支持后续的数据分析和决策。爬虫可以......
  • css之selection---让“选择”更色彩
    一直以来很少人关注也门文字的选中文字的控制,但是不乏在一些细心的网站会加一些这样的设置。 CSS3新增的伪::selection,可以帮助我们来改变选择文本的颜色和背景。  ::selection{color:#333;background-color:#cca2da;}::-moz-selection{color:#333;background-color:#cca2da;}......
  • 关于reset.css的一些思考与探究
    项目多了,大家多会有自己积累的一些reset.css的经历或者自己改进的代码,其实初衷还是很简单的,达到复用,重置浏览器的一些默认样式,实现跨浏览器兼容。 1、最早关注的还是YUI的ResetCSS,  在线的压缩版本地址:http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css 直接上......
  • SASS(scss)
    Scss1.认识ScssSass支持两种不同的语法,每个都可以加载另一个。scss其实是Sass的一种语法。SCSS语法使用.scss文件扩展名。除了一些小的例外,它是CSS的超集,这意味着基本上所有有效的CSS也是有效的SCSS。scss示例:$view-width:500px;$base-color:#c6538c;$border-dark:......
  • CSS实现图片自适应布局,且不拉伸变型
    1.通过背景图的方式处理图片( 通过background-size作用在容器上).img_background{width:300px;height:300px;background-image:url('image.jpg');background-repeat:no-repeat;//是否平铺background-position:centercenter;//设置背景图像的起......
  • Python全栈工程师(31:css)
    css属性设置方法:方式1:在标签上设置style属性;<divstyle="height:10px;width:10px"></div>方式2:放在head里添加css模式;<head><style>#i1,#i2{height:10px;width:10px;}/*id选择器*/.c1{height:10px;width:10px;}/*class选择器*/div{height:10px......