CSS3 —— 选择器(带你深入了解 CSS3 选择器)[亲测有效]

CSS3 —— 选择器(带你深入了解 CSS3 选择器)[亲测有效]css3选择器。慢慢练习,慢慢理解~

大家好,欢迎来到IT知识分享网。

一、常用选择器

  1. 通用兄弟元素选择器( E~F ):E 和 F 属于同一父元素之内,并且 F 在 E 之后,通用兄弟选择器会选择符合这样排列的所有的 F 元素。
    .test ~ p{ 
   
      background-color: red;
    }

	<div>
	    <p>1</p>
	    <p class="test">2</p>
	    <p>3</p>
	    <p>4</p>
	    <p>5</p>
  	</div>
  	<p>6 已脱离 div</p>

在这里插入图片描述

二、属性选择器

  1. E[attr^="value"]:该选择器选择属性名为 attr ,属性值以 value 开头的元素。
	a[title^='test']{ 
   
        background: skyblue;
    }

    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

在这里插入图片描述

  1. E[attr$="value"]:该选择器选择属性名为 attr,属性值以 value 结尾的元素。
	a[title^='test']{ 
   
        background: skyblue;
    }

    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

在这里插入图片描述

  1. E[attr*="value"]:该选择器选择属性名为 attr,属性值包含 value 的元素。
	a[title*='test']{ 
   
        background: skyblue;
    }

    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

在这里插入图片描述

三、伪类选择器

  1. E:root:该选择器选择文档的根节点,效果和设置 html 相同。
	:root { 
   
        background-color: skyblue;
    }
    // 等同于
    html{ 
   
        background: lightgreen;
    }
  1. E:nth-child(n):该选择器选择 E 元素父元素的第 n 个子元素。

n 取值为整数:子元素不一定是同种类型,只能取正整数

	p:nth-child(3){ 
   
        background-color: red;
    }

	<p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>

在这里插入图片描述

n取值为表达式:取值为表达式时,选择器选择多个值,[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时,不选取元素。

	p:nth-child(2n + 1){ 
   
        background-color: red;
    }

	<p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

在这里插入图片描述

	p:nth-child(even){ 
   
        background-color: red;
    }

	<p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

在这里插入图片描述

  1. odd 相当于 2n+1。
  2. even 相当于 2n。
  1. E:nth-last-child(n):从最后一个往前计数。
	p:nth-last-child(2n+1){ 
   
        background-color: red;
    }

	<p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>

在这里插入图片描述

  1. E:nth-of-type():该元素选择的是与 E 相同类型的兄弟元素。
	p:nth-of-type(2n+1){ 
   
        background-color: red;
    }

    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>

.在这里插入图片描述
5. E:last-child:该选择器选择 E 元素的父元素的最后一个子元素。

	p:last-child{ 
   
        color: red;
    }

    <p>第一个</p>
    <p>第二个</p>
    <p>第三个(最后一个)</p>

在这里插入图片描述
注意:该选择器需要满足父元素的最后一个元素和 E 匹配才会选取,否则不会选取。

	p:last-child{ 
   
        color: red;
    }

    <p>第一个</p>
    <p>第二个</p>
    <p>第三个(最后一个)</p>
    <strong>真的最后一个</strong>

在这里插入图片描述

  1. E:first-of-type:该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。
	p:first-of-type{ 
   
        color: red;
    }

    <h3>好好学习(h3)</h3>
    <p>第一个(p)</p>
    <p>第二个(p)</p>

在这里插入图片描述

  1. E:last-of-type:该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。
	p:last-of-type{ 
   
        color: red;
    }

    <h3>好好学习(h3)</h3>
    <p>第一个(p)</p>
    <p>第二个(p)</p>

在这里插入图片描述

  1. E:only-child:该元素选择的是 E 是其父元素唯一的子元素。
	.div1{ 
   
		width:100px;
        border: 2px solid;
    }
    .div2{ 
   
  		width:100px;
        margin-top: 10px;
        border: 2px solid;
    }
    p:only-child{ 
   
        background: red;
    }

	<div class="div1">
        <p>好好学习</p>
    </div>
    <div class="div2">
        <p>好好学习</p>
        <p>天天向上</p>
    </div>

在这里插入图片描述

  1. E:only-of-type:该选择器选择的是 E 是其父元素唯一的子元素类型。
	.div1{ 
   
        width:100px;
        border: 2px solid;
    }
    .div2{ 
   
        width:100px;
        margin-top: 10px;
        border: 2px solid;
    }
    p:only-of-type{ 
   
        background: red;
    }

	<div class="div1">
        <p>好好学习</p>
    </div>
    <div class="div2">
        <p>好好学习</p>
    	<span>天天向上</span>
    </div>

在这里插入图片描述

  1. E:empty:该选择器选择的是空元素。
	p:empty{ 
   
        width:200px;
        height:20px;
        background-color: red;
    }

	<p>好好学习</p>
    <p></p>
    <p>天天向上</p>

在这里插入图片描述

  1. E:target:该选择器选择的是一个 id 与 当前 url 匹配的元素。
	:target { 
   
        border: 2px solid;
        background: lightgreen;
    }

	<a href="#p1">jump to p1</a><br />
    <a href="#p2">jump to p2</a>
    <p id="p1">p1</p>
    <p id="p2">p2</p>

在这里插入图片描述

  1. E:not(s):该选择器匹配不符合参数选择器 s 描述的元素。
	.demo{ 
   
        color: lightblue;
    }
    p:not(.demo){ 
   
        color:lightcoral;
    }
    :not(.demo){ 
   
        color:lightgreen;
    }
    
	<p class="demo">hello world</p>
    <p>好好学习</p>
    <span>天天向上</span>

在这里插入图片描述

第一个否定伪类选择器选择了 class 不为 demo 的 <p> 元素,样式为红色;第二个否定伪类选择器选择了 class 不为 demo 的 <span> 元素,样式为绿色。

13.E:enabled & E:disabled:该选择器匹配的是元素的可用和禁用状态。

	input:enabled{ 
   
        background: pink;
    }
    input:disabled{ 
   
        background: lightgreen;
    }

	<input type="text" name="test1" placeholder="disabled(不可选中)" disabled="true">
    <br>
    <input type="text" name="test2" placeholder="enabled(可选中)">

在这里插入图片描述
14. E:checked:该选择器一般用于 radio-button 或 checkbox,选择它们的 checked 状态。

	input[type='checkbox']:checked{ 
   
        margin: 100px;
    }

	<input type="checkbox" name="checkbox">

在这里插入图片描述
在这里插入图片描述
不积跬步无以至千里 不积小流无以成江海

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/26184.html

(0)
上一篇 2023-04-13 17:00
下一篇 2023-04-23 10:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信