CSS 选择器

最新推荐文章于 2020-07-25 08:20:07 发布
最新推荐文章于 2020-07-25 08:20:07 发布
阅读量172 收藏
点赞数
分类专栏： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenwen522519753/article/details/103626850
版权

文章目录

CSS3 选择器总览
关于浏览器支持：若未特别标明则主流浏览器都支持，其中以IE作为重点关注（IE8以下不考虑）。

选择器例子例子描述版本
.class.a选择 class=“a” 的所有元素CSS1
#id#box选择 id=“box” 的元素CSS1
**选择所有元素CSS2
elementp选择所有 p 元素CSS1
elementelementdiv.a选择class="a"的divCSS2
element,elementdiv,p选择所有 div 元素和所有 p 元素CSS1
element elementdiv p选择 div 元素内部的所有 p 元素CSS1
element>elementdiv>p选择 div 元素内的子元素 pCSS1
element~elementdiv~p选择同层级中在div之后的所有 pCSS3
element+elementdiv+p选择同层级中紧接在div之后 pCSS2
[attribute][target]选择带有target属性所有元素CSS2
[attr=value][name=box]选择name="box"的所有元素CSS2
[attr~=value][title~=air]选择title属性包含单词"air"的所有元素CSS2
[attr|=value][lang|=en]选择lang属性值以"en"开头的所有元素CSS2
[attr^=value]a[src^=“ht”]选择src属性值以"ht"开头的所有 aCSS3
[attr$=value]a[src$=".f"]选择src属性以".f"结尾的所有 aCSS3
[attr*=value]a[src*=“ab”]选择src属性中包含"ab"子串的所有 aCSS3
:linka:link选择所有未被访问的链接CSS1
:visiteda:visited选择所有已被访问的链接CSS1
:hovera:hover选择鼠标指针位于其上的链接CSS1
:activea:active选择活动链接CSS1
:focusinput:focus选择获得焦点的 input 元素CSS2
:target#news:target选择当前活动的 #news 元素 CSS3
:lang(language)p:lang(it)选择带有以"it"开头的lang属性值的pCSS2
:checkedinput:checked选择每个被选中的 input 元素 CSS3
:enabledinput:enabled选择每个启用的 input 元素 CSS3
:disabledinput:disabled选择每个禁用的 input 元素 CSS3
:out-of-range:out-of-range匹配值在指定区间之外的input元素 CSS3
:in-range:in-range匹配值在指定区间之内的input元素 CSS3
:read-write:read-write选择可读及可写的元素 CSS3
:read-only:read-only选择设置 "readonly"只读属性的元素 CSS3
:optional:optional选择可选的输入元素 CSS3
:required:required选择设置了 “required” 属性的元素 CSS3
:valid:valid选择输入值为合法的元素 CSS3
:invalid:invalid选择输入值为非法的元素 CSS3
:first-childp:first-child同级别中第一个p CSS2
:first-of-typep:first-of-type同级别中同类型中第一个p CSS3
:last-childp:last-child同级别中最后一个p CSS3
:last-of-typep:last-of-tpye同级别中同类型中最后一个p CSS3
:nth-child(x)p:nth-child(3)同级别中第3个p CSS3
:nth-of-type(x)p:nth-of-type(3)同级别中同类型中第3个p CSS3
:nth-last-child(x)p:nth-last-child(3)同级别中倒数第3个p CSS3
:nth-last-of-type(x)p:nth-last-of-type(3)同级别中同类型中倒数第3个p CSS3
:only-childp:only-child同级中只有唯一元素且该元素是p CSS3
:only-of-typep:only-of-type同级中只有一个p元素 CSS3
:nth-child(even)p:nth-child(even)同级中偶数项中的p CSS3
:nth-of-type(odd)p:nth-of-type(odd)同级所有p中的奇数项中的p CSS3
:nth-child(xn+y)p:nth-child(2n+1)等同p:nth-child(odd) CSS3
:root:root选择文档的根元素 CSS3
:emptyp:empty选择没有子元素的p(包括文本节点) CSS3
:not(selector):not(div)选择非 div 元素 CSS3
::first-letterp::first-letter选择每个 p 元素的首字母CSS1
::first-linep::first-line选择每个 p 元素的首行CSS1
::beforep::before在每个 p 元素的内容之前插入内容CSS2
::afterp::after在每个 p 元素的内容之后插入内容CSS2
::selection::selection选择被用户选取的元素部分CSS3

基本选择器

选择器例子例子描述版本
.class.a选择 class=“a” 的所有元素CSS1
#id#box选择 id=“box” 的元素CSS1
**选择所有元素CSS2
elementp选择所有 p 元素CSS1
element,elementdiv,p选择所有 div 元素和所有 p 元素CSS1

类选择器： .
设置 class="box" 元素的字体为红色。

.box{ color:red; }

id选择器： #
设置 id="box" 元素的字体为红色。

#box{ color:red; }

通配选择器： *
设置所有元素的字体为红色。

*{ color:red; }

元素选择器：
设置 <p> 元素的字体为红色。

p{ color:red; }

群组选择器： ,
设置 <p>和 <div> 元素的字体为红色。
设置 <div> 和 class="box" 的元素的字体为红色。

p,div{ color:red; }
div,.box{ color:green; }

组合：
设置 class="box" 的 <div> 元素字体为红色，设置 id="log" 的 <div> 元素字体为绿色。

div.box{ color:red; }
div#log{ color:green; }

层次选择器

选择器例子例子描述版本
element elementdiv p选择 div 元素内部的所有 p 元素CSS1
element>elementdiv>p选择 div 元素内的子元素 pCSS1
element~elementdiv~p选择同层级中在div之后的所有 pCSS3
element+elementdiv+p选择同层级中紧接在div之后 pCSS2

后代选择器：
设置 <div> 里面（后代元素）的 <p> 元素字体为红色。

div p{ color:red; }

子元素选择器： >
设置 <div> 子元素里面的 <p> 元素字体为红色。

div p{ color:red; }

通用兄弟选择器： ~
用于选择某元素后面的所有兄弟元素，它们具有相同的父元素。
例：设置 <div> 同层级后面所有的 <p> 元素字体为红色。

div~p{ color:red; }

相邻兄弟选择器： +
用于选择紧接在一个元素后的元素，它们具有一个相同的父元素。
例：设置 <div> 同层级且紧跟后面的 <p> 元素字体为红色。

div+p{ color:red; }

属性选择器

选择器例子例子描述版本
[attr][target]选择带有target属性所有元素CSS2
[attr=value][name=box]选择name="box"的所有元素CSS2
[attr~=value][title~=air]选择title属性包含单词"air"的所有元素CSS2
[attr|=value][lang|=en]选择lang属性值以"en"开头的所有元素CSS2
[attr^=value]a[src^=“ht”]选择src属性值以"ht"开头的所有 aCSS3
[attr$=value]a[src$=".f"]选择src属性以".f"结尾的所有 aCSS3
[attr*=value]a[src*=“ab”]选择src属性中包含"ab"子串的所有 aCSS3

具有某属性： [attr]， [attr=value]
具有 attr 属性的元素，具有 attr="value" 属性的元素。

[target]{ color:red; }
[target=_blank]{ color:green; }

/*属性值带引号和省略引号效果一样*/
[target="_blank"]{ color:green; }

属性值包含单词： [attr~=value]
属性值 value 是一个单词，前后存在其它字符时应该是用空格隔开的。

<style>
[class=air]{ color:red; }
</style>

<span class="air">yes字体红色</span>
<span class="airk">no</span>
<span class="kair">no</span>
<span class="k air">yes字体红色</span>
<span class="air k">yes字体红色</span>
<span class="m air k">yes字体红色</span>

属性值开头CSS2： [attr|=value]
属性值是 value 或以 "value-" 开头的元素

<style>
[class|=air]{ color:red; }
</style>

<span class="air">yes字体红色</span>
<span class="airk">no</span>
<span class="air k">no</span>
<span class="air-k">yes字体红色</span>
<span class="m air-k">no</span>

属性值开头CSS3： [attr^=value]
属性值是 value 或以 "value" 开头的元素

<style>
[class^=air]{ color:red; }
</style>

<span class="air">yes字体红色</span>
<span class="airk">yes字体红色</span>
<span class="air k">yes字体红色</span>
<span class="air-k">yes字体红色</span>
<span class="m air-k">no</span>

属性值结尾CSS3： [attr$=value]
属性值是 value 或以 "value" 结尾的元素

<style>
[class$=air]{ color:red; }
</style>

<span class="air">yes字体红色</span>
<span class="airk">no</span>
<span class="kair">yes字体红色</span>
<span class="k air">yes字体红色</span>
<span class="m air k">no</span>

属性值包含子串： [attr*=value]
属性值包含字符 value 的元素。

<style>
[class*=air]{ color:red; }
</style>

<span class="air">yes字体红色</span>
<span class="airk">yes字体红色</span>
<span class="kair">yes字体红色</span>
<span class="k air">yes字体红色</span>
<span class="m air k">yes字体红色</span>
<span class="m a k">no</span>

伪类选择器

css3中的伪类选择器可以分成6种：动态伪类选择器，目标伪类选择器，语言伪类选择器，UI状态伪类选择器，结构伪类选择器和否定伪类选择器。伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒号(:)开头。

动态伪类选择器

选择器例子例子描述版本
:linka:link选择所有未被访问的链接CSS1
:visiteda:visited选择所有已被访问的链接CSS1
:hovera:hover选择鼠标指针位于其上的链接CSS1
:activea:active选择活动(鼠标按下时)链接CSS1
:focus:focus选择获得焦点的元素CSS2

例：<a> 链接初始颜色设置为 red，鼠标悬停时 pink，鼠标按下不放时 yellow，点击跳转时 green，点击过后为 black

<style>
  a:link{ color:red; }
  a:hover{ color: pink; }
  a:active{ color:yellow; }
  a:focus{color:green;}    
  a:visited{ color:black; }
</style>

<a href="###">链接</a>

目标伪类选择器

选择器例子例子描述版本
:target#news:target选择当前活动的 #news 元素 CSS3

例：选中的锚点显示，其他的隐藏。

<style>
  .box{ display: none; }
  .box:target{ display: block; }
  .box:target span{ color: red; }
</style>

<a href="#aaa">项目1</a>
<a href="#bbb">项目2</a>

<div id="aaa" class="box">
  项目1的详细内容
</div>
<div id="bbb" class="box">
  项目2的详细内容
  <span>注意点...</span>
</div>

语言伪类选择器
语言伪类选择器是根据元素的语言编码匹配元素。

选择器例子例子描述版本
:lang(language)p:lang(it)选择 lang 属性值为 it 的pCSS2

例：设置 lang="a" 的元素字体为红色。

<style>
  div:lang(a){ color: red; }
</style>

<div lang="a">yes字体红色</div>
<div lang="ab">no</div>
<div lang="a r">no</div>
<div lang="da">no</div>

UI元素状态伪类选择器

主要用于form表单元素上，UI元素的状态一般包括：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机等。

选择器例子例子描述版本
:checkedinput:checked选择每个被选中的 input 元素 CSS3
:enabledinput:enabled选择每个启用的 input 元素 CSS3
:disabledinput:disabled选择每个禁用的 input 元素 CSS3
:out-of-range:out-of-range匹配值在指定区间之外的input元素 CSS3
:in-range:in-range匹配值在指定区间之内的input元素 CSS3
:read-write:read-write选择可读及可写的元素CSS3
:read-only:read-only选择设置 "readonly"只读属性的元素CSS3
:optional:optional选择可选的输入元素 CSS3
:required:required选择设置了 “required” 属性的元素 CSS3
:valid:valid选择输入值为合法的元素 CSS3
:invalid:invalid选择输入值为非法的元素 CSS3

例1：:checked 匹配设置了 “checked” 或 “selected” 属性的元素。

<style>
:checked{ 
  width: 40px;
  height: 40px;
  background: red;
}              
</style>

<input type="radio" checked>
<input type="checkbox" checked>
<select>
  <option>a</option>
  <option selected>b</option>
</select>

显示结果：

例2：:enabled 与 :disabled 针对于是否设置 “disabled” 属性。

<style>
:enabled{ color: green; }              
:disabled{ color: red; } 
</style>

<input type="text" value="绿色">
<input type="text" value="红色" disabled>

例3：:out-of-range 与 :in-range 针对于 “min” 和 “max” 属性值范围检测。

<style>
:in-range{ color: green; }  
:out-of-range{ color: red;  }              
</style>

<!-- 绿色字体 -->
<input type="number" max="10" min="5" value="8">

<!-- 红色字体 -->
<input type="number" max="10" min="5" value="20">

例4：:read-write 与 :read-only 针对于是否设置 “readonly” 属性。

<style>
:read-write{ color: green; }  
:read-only{ color: red;  }              
</style>

<input type="text" value="绿色">
<input type="textr" value="红色" readonly>

例5：:optional 与 :required 针对于是否设置 “required” 属性。

<style>
input:optional{ background: yellow; }   
input::required{ background: red; }       
</style>

<!-- 背景色黄色 -->
<input type="text" >
<input type="text" readonly>
<input type="text" disabled>

<!-- 背景色红色 -->
<input type="text" required>

例6：:valid 与 :invalid 表单验证是否通过检测。

<style>
input:valid{ background: green; }   
input:invalid{ background: red; }       
</style>

<!--邮箱输入框:
    valid: 当输入空值或是正确的邮箱地址时背景色时绿色
    invalid： 当输入非空结果不是邮箱格式时背景变红色 
-->
<input type="email">

<!--必填输入框:
    valid: 当值不为空值时背景色时绿色
    invalid： 当值为空值时背景变红色 
-->
<input type="text" required>

结构伪类选择器

根据元素在文档树中的某些特性(如相对位置)定位到它们。

选择器例子例子描述版本
:first-childp:first-child同级别中第一个p CSS2
:first-of-typep:first-of-type同级别中同类型中第一个p CSS3
:last-childp:last-child同级别中最后一个p CSS3
:last-of-typep:last-of-tpye同级别中同类型中最后一个p CSS3
:nth-child(x)p:nth-child(3)同级别中第3个p CSS3
:nth-of-type(x)p:nth-of-type(3)同级别中同类型中第3个p CSS3
:nth-last-child(x)p:nth-last-child(3)同级别中倒数第3个p CSS3
:nth-last-of-type(x)p:nth-last-of-type(3)同级别中同类型中倒数第3个p CSS3
:only-childp:only-child同级中只有唯一元素且该元素是p CSS3
:only-of-typep:only-of-type同级中只有一个p元素 CSS3
:nth-child(even)p:nth-child(even)同级中偶数项中的p CSS3
:nth-of-type(odd)p:nth-of-type(odd)同级所有p中的奇数项中的p CSS3
:nth-child(xn+y)p:nth-child(2n+1)等同p:nth-child(odd) CSS3
:root:root选择文档的根元素 CSS3
:emptyp:empty选择没有子元素的p(包括文本节点) CSS3

结构伪类选择器中的参数 x, y 可以是整数，关键词或公式。

  • 整数：nth-child(3)，选择第3个子元素。
  • 关键词：odd代表奇数子元素，even代表偶数子元素。

例1：不区别类型

<style>
  .box :first-child{ color: red; }    
  .box :nth-child(2){ color: green; }
  .box :nth-child(odd){ background: pink; }
  .box :nth-child(even){ background: blue; }
</style>

<div class="box">
  <div>字体red，背景pink </div>   <!-- 1 -->
  <p>字体green，背景blue </p>     <!-- 2 -->
  <div>背景pink </div>           <!-- 3 -->
  <div>背景blue </div>           <!-- 4 --> 
</div>

例2：区别类型

<style>
  .box :first-of-type{ color: red; }    
  .box :nth-of-type(2){ color: green; }
  .box :nth-of-type(odd){ background: pink; }
  .box :nth-of-type(even){ background: blue; }
</style>

<div class="box">
  <div>字体red，背景pink </div>     <!-- div(1) -->
  <p>字体red，背景pink </p>         <!-- p(1) -->
  <div>字体green, 背景blue</div>    <!-- div(2) -->
  <div>背景pink </div>              <!-- div(3) -->
</div>

例3：表达公式，n 的值默值为0，然后自增。
p:nth-child(2n+0){...} 选中偶数项p
p:nth-child(2n+1){...} 选中奇数项p
p:nth-child(2n+2){...} 选中偶数项p
p:nth-child(2n+3){...} 选中从第三项开始的奇数项
p:nth-child(2n+4){...} 选择从第四项开始的偶数项
p:nth-child(3n+0){...} 选择3的倍数项(3,6,9…)
p:nth-child(3n+1){...} 选中3的倍数+1项(4,7,10…)
......

例4：包含关系

<style>
  div:empty{ background: pink; }
  span:only-child{ color: red; }
  p:only-of-type{ color: green; }
</style>

<!-- 下面 div 中的 p 元素满足 p:only-of-type -->
<div>
  <p>11</p>      
  <span>22</span>  
</div>

<!-- 下面 div 中的 span 元素满足 span:only-child -->
<div>
  <span>33</span>  
</div>

<!-- 下面 div 元素不含任何节点,满足 div:empty -->
<div></div>       

<!-- 下面 div 元素含有文本节点: 空格 --> 
<div> </div>

例5：根元素 :root，在网页中就是 <html> 元素。

  :root{ background: pink; }
  /*等同*/
  html{  background: pink;  }

否定伪类选择器

选择器例子例子描述版本
:not(selector):not(div)选择非 div 元素 CSS3

例：设置 div 后代元素中非 p 的元素字体为红色。

<style>
  div :not(p){ color: red; }
</style>

<div>
  <p>no</p>      
  <span>yes红色</span> 
  <div>yes红色</div> 
</div>

伪元素选择器

伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪元素早在css中就存在了，:first-letter，:first-line，:before，:after。在css3中对伪元素进行了一定的调整，在以前的基础上增加了一个冒号，相应的变成了::first-letter，::first-line，::before，::after，还增加了一个::selection。

选择器例子例子描述版本
::first-letterp::first-letter选择每个 p 元素的首字母CSS1
::first-linep::first-line选择每个 p 元素的首行内容CSS1
::beforep::before在每个 p 元素的内容之前插入内容CSS2
::afterp::after在每个 p 元素的内容之后插入内容CSS2
::selection::selection选择被用户选取的元素部分CSS3

示例1：

<style>
.box::first-letter{
  color: red;
  background: pink;
}
.box::first-line{
  background: #ccc;
}
</style>

<div class="box">

  <span>Abcd</span>
  仍是第一行内容
  <span>仍是第一行内容</span>
  <p>第二行内容</p>
</div>

显示结果：

示例2：

<style>
.box::before{
  content: "LEE";
  display: inline-block;
  border:1px solid red;
  background: green;
}
.box::after{
  content: 'class="'attr(class)'"';
  color: red;
}
::selection{
  color: blue;
  background: red;
}
</style>

<div class="box">好好学习, 天天向上, 奋发图强.</div>

显示结果（选中"天天向上"）：

shenwen5225
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
JSoup CSS选择器用法大全
08-15
备查，搞爬虫开发者必备
css选择器
smilesgp的博客
05-03 576
css
zepto选择器
ElegantHedgehog的博客
07-25 630
跟jQuery非常类似，非常适合移动端 先去官网下载zepto.min.jshttps://www.bootcdn.cn/zepto/ https://www.bootcdn.cn/zepto/ 在网页中引入 <script src="js/zepto.min.js"></script> 编写第一个zepto小程序 <!DOCTYPE html> <html lang="en"> <head> <...
zepto和jquery的区别，zepto的不同使用8条小结
热门推荐
kongjiea笔记
01-08 9万+
1. Zepto 对象 不能自定义事件   例如执行： $({}).bind('cust', function(){});  结果：  TypeError: Object has no method 'addEventListener'   解决办法是创建一个脱离文档流的节点作为事件对象：   例如： $('').bind('cust', function(){}); 2. Ze
Zepto自定义选择器与Jq存在差异
heiliuer的博客
11-13 821
jq //可以这么写 $.expr[':']["voice-playing"] = function(el) {     var $sel = $(el);     var player = $(el).data("wxy.player");     return player && player.isPlaying && player.isPlaying(); }
zepto.js选择器
zjsfdx的博客
10-29 2168
1.$是一个函数构造器
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
CSS 选择器支持列表
09-25
evotech网站整理的CSS选择器支持列表.
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
jquery日历插件daterangepicker全面详解汇总
shenwen5225的博客
06-02 6271
引入插件库 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterange
@namespace 规则(命名空间)
shenwen5225的博客
01-09 3639
@namespace 是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个namespaces的文档时才有用，比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。 例如，html 中的超链接标签是 a, SVG中的超链接标签也是 a。当通过标签获取 a 元素或者通...
https证书失效时图片加载问题
shenwen5225的博客
01-14 1945
如果 <img> 标签载入一个 地址协议是以 https 开头的网络图片时，可能会报错证书失效网络不安全二导致图片加载不出来，这时可以添加一个 <mete> 标签如下： <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 可以理解为向服务器端发送信...
H5开发中需要掌握的基础知识总结
shenwen5225的博客
02-18 1819
什么是H5开发？ 有人说H5就是html5，H5开发就是HTML5开发。我以前也是这么认为，后来在一个直播课中听了老师对H5的讲解，感觉比较客观全面。大意义是，H5开发不仅仅是使用 html 和 html5 的技术写一个简单的网页那么简单。而是指前端技术不断发展，到HTML5这个节点的时候，各方面技术已经成熟。所以，就以此节点命名，代表所有的前端技术栈，统称"H5开发"。 H5开发涉及多端领域，...
CSS 背景
shenwen5225的博客
12-24 1640
文章目录background-colorbackground 属性 描述 版本 background-color 背景颜色。 CSS1 background-image 背景图像。 CSS1 background-position 背景图像位置。 CSS1 background-size 背景图像的尺寸大小。 CSS3 background-repeat 背景图像如...
CSS 分页(print)属性
shenwen5225的博客
01-02 1417
文章目录
web css选择器
最新发布
03-09
以下是一些常见的CSS选择器： 1. 元素选择器：通过元素的标签名选择元素。例如，`p`选择所有的`<p>`元素。 2. 类选择器：通过元素的类名选择元素。类名以`.`开头。例如，`.container`选择所有具有`container`类的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值