精华内容
下载资源
问答
  • CSS选择器详解

    万次阅读 2020-08-29 19:06:55
    CSS所有选择器列表 CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器 选择器 示例 示例说明 css版本 .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id=...

    CSS所有选择器列表

    CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器

    选择器示例示例说明css版本
    .class.intro选择所有class="intro"的元素1
    #id#firstname选择所有id="firstname"的元素1
    **选择所有元素2
    elementp选择所有< p >元素1
    element,elementdiv,p选择所有< div >元素和< p >元素1
    element elementdiv p选择< div >元素内的所有< p >元素1
    element>elementdiv>p选择所有父级是 < div > 元素的 < p > 元素2
    element+elementdiv+p选择所有紧接着< div >元素之后的< p >元素2
    [attribute][target]选择所有带有target属性元素2
    [attribute=value][target=-blank]选择所有使用target="-blank"的元素2
    [attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
    [attribute丨=language][lang丨=en]选择 lang 属性以 en 为开头的所有元素2
    :linka:link选择所有未访问链接1
    :visiteda:visited选择所有访问过的链接1
    :activea:active选择活动链接1
    :hovera:hover选择鼠标在链接上面时1
    :focusinput:focus选择具有焦点的输入元素2
    :first-letterp:first-letter选择每一个< p >元素的第一个字母1
    :first-linep:first-line选择每一个< p >元素的第一行1
    :first-childp:first-child指定只有当< p >元素是其父级的第一个子级的样式。2
    :beforep:before在每个< p >元素之前插入内容2
    :afterp:after在每个< p >元素之后插入内容2
    :lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有< p >元素2
    element1~element2p~ul选择p元素之后的每一个ul元素3
    [attribute^ = value]a[src^=“https”]选择每一个src属性的值以"https"开头的元素3
    [attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
    [attribute*=value]a[src*=“runoob”]选择每一个src属性的值包含子字符串"runoob"的元素3
    :first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
    :last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
    :only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
    :only-childp:only-child选择每个p元素是其父级的唯一子元素3
    :nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
    :nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
    :nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
    :nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
    :last-childp:last-child选择每个p元素是其父级的最后一个子级。3
    :root:root选择文档的根元素3
    :emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
    :target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
    :enabledinput:enabled选择每一个已启用的输入元素3
    :disabledinput:disabled选择每一个禁用的输入元素3
    :checkedinput:checked选择每个选中的输入元素3
    :not(selector):not§选择每个并非p元素的元素3
    ::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
    :out-of-range:out-of-range匹配值在指定区间之外的input元素3
    :in-range:in-range匹配值在指定区间之内的input元素3
    :read-write:read-write用于匹配可读及可写的元素3
    :read-only:read-only用于匹配设置 “readonly”(只读) 属性的元素3
    :optional:optional用于匹配可选的输入元素3
    :required:required用于匹配设置了 “required” 属性的元素3
    :valid:valid用于匹配输入值为合法的元素3
    :invalid:invalid用于匹配输入值为非法的元素3

    咱们一个一个来

    .class 选择器

    示例代码 选择类为mystyle的元素将color设置为red。font设置为800

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	.mystyle{
    		color:red;
    		font:800;
    	}
        </style>
      </head>
      <body>
        <span class="mystyle">无所不能的林大王asp</span>
      </body>
    </html>
    

    效果实现

    在这里插入图片描述

    #id 选择器

    示例代码:
    选择 id为myID 的元素将color设置为coral font设置为800

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	#myID{
    		color:coral;
    		font:800;
    	}
        
        </style>
      </head>
      <body>
        <span id="myID">无所不能的林大王asp</span>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    * 选择器

    示例
    *选择所有元素背景颜色设置为aqua

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	*{
    		background-color: aqua;
    	}
        
        </style>
      </head>
      <body>
        <span>无所不能的林大王asp</span>
      </body>
    </html>
    

    效果示例
    在这里插入图片描述

    element 选择器

    示例 选择所有的span元素,将background-color设置为red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	span{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
        <span>无所不能的林大王asp</span>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    element,element 选择器

    示例,选择所有的span元素和p元素,将background-color设置为 red;
    (可以选择无限制的元素,用逗号分隔)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	span , p{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
        <span>无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    element element 选择器

    示例
    选择body元素下的所有p元素,将background-color设置为 red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	body  p{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
        <span>无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>
    
    

    效果
    在这里插入图片描述

    element>element 选择器

    示例:
    选择所有父级是 < div > 元素的 < p > 元素 将background-color设置为 red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	div> p{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	  <div><p>我的父级是div</p></div>
        <span>无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    element+element

    示例
    选择所有紧接着< div >元素之后的< p >元素 将background-color设置为 red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	div+ p{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	  <div><p>我的父级是div</p></div>
    	  <p>我跟在div后面</p>
        <span>无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>
    
    

    效果
    在这里插入图片描述

    [attribute]选择器

    示例
    选择所有带有align属性元素并将background-color:设置为red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	[align]{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	  <div align="left"><p>我的父级是div</p></div>
    	  <p>我跟在div后面</p>
        <span >无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    [attribute=value]选择器

    示例
    选择所有使用align="left"的元素

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	[align=left]{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	  <div align="left"><p>我的父级是div</p></div>
    	  <p>我跟在div后面</p>
        <span >无所不能的林大王asp</span>
    	  <p>afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>
    

    效果
    在这里插入图片描述

    [attribute~=value] 选择器

    示例
    选择标题属性包含单词"flower"的所有元素并将background-color设置为 red;
    注意是包含单词flower 而不是字段所以flowers是不行的

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	[title~=flower]{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	  <div title="flower"><p>我的父级是div</p></div>
    	  <p title="flowers index">我跟在div后面</p>
        <span title="flower indexs main">无所不能的林大王asp</span>
    	  <p title="main flower">afhjalskfddksaldf</p>
    	  <p>fafhaskldfs</p>
      </body>
    </html>	
    
    

    在这里插入图片描述

    [attribute|=language] 选择器

    选择 lang 属性以 en 为开头的所有元素并将background-color设置为 red;
    示例

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	[lang|=en]{
    		background-color: red;
    	}
        
        </style>
      </head>
      <body>
    	<p lang="en">Hello!</p>
    	<p lang="en-us">Hi!</p>
    	<p lang="en-gb">无所不能的林大王!</p>
    	<p lang="us">Hi!</p>
    	<p lang="no">Hei!</p>
    </body>
    </html>	
    

    效果
    在这里插入图片描述

    :link , :visited , :active 选择器

    :link 选择所有未访问链接并将background-color设置为 red;
    :visited 选择所有访问过的链接 并将background-color设置为 green;
    :active 选择活动链接 并将background-color设置为 yellow;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	a:link{
    		background-color: red;
    	}
    	a:visited{
    		background-color: green;
    	}
    	a:active{
    		background-color: yellow;
    	}
    	
        </style>
      </head>
      <body>
    	<a href="https://www.baidu.com/">百度</a>
    	<a href="https://www.huawei.com/">华为</a>
    	<a href="https://www.sougo.com/">搜狗</a>
    </body>
    </html>	
    

    效果
    华为已经访问过了
    在这里插入图片描述

    : hover 伪类

    示例
    选择鼠标在选中元素上面时将background-color设置为 coral;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	#bd:hover{
    		background-color: coral;
    	}
        </style>
      </head>
      <body>
    	<a href="https://www.baidu.com/" id="bd">百度</a>
    	<a href="https://www.huawei.com/">华为</a>
    	<a href="https://www.sougo.com/">搜狗</a>
    </body>
    </html>	
    
    

    效果
    当我将鼠标移动到百度上面时,百度背景色变为品红
    在这里插入图片描述

    :focus

    选择具有焦点的输入元素并将其height设置为100px width设置为300px

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	input:focus{
    		
    		height: 100px;
    		width: 300px;
    	};
        </style>
      </head>
      <body>
    	<input type="text">
    	  <input type="text">
    </body>
    </html>	
    

    效果
    在这里插入图片描述

    :first-letter

    选择每一个

    元素的第一个字母,并将其 font-size:设置为100px; color:设置为red;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:first-letter{
    		font-size: 100px;
    		color: red;
    	}
        </style>
      </head>
      <body>
    	<p>sdakfjasldkf</p>
    	<p>ergtraesrf</p>
    	<p>afafasdf</p>
    </body>
    </html>	
    

    效果
    在这里插入图片描述

    :first-line

    示例
    选择每一个p元素的第一行并将其color设置为red

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:first-line{
    		color: red;
    	}
        </style>
      </head>
      <body>
    	  <div style="height: 100px ;width:  400px">
    	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p>
    	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p>
    	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p></div>
    </body>
    </html>	
    

    效果

    在这里插入图片描述

    :first-child

    示例
    指定只有当< p >元素是其父级的第一个子级的样式。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:first-child{
    		color: red;
    	}
        </style>
      </head>
      <body>
    	  
    	  <p>这个p元素是它父级的第一个子集</p>
    
    <h1>Welcome to Beijing </h1>
    <p>这个p元素是它父级的第三个子集</p>
    
    <div>
    <p>这个p元素是它父级的第一个子集</p>
    <p>这个p元素是它父级的第二个子集</p>
    </div>
    </body>
    </html>	
    

    :before 选择器向选定的元素前插入内容

    示例;
    在每个< p >元素之前插入内容并设置样式

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:before
    { 
    	content:"我是before插入的文字-";
    	background-color:yellow;
    	color:red;
    	font-weight:bold;
    }
        </style>
      </head>
      <body>
    	  
    
    <p>德玛西亚</p>
    <p>艾欧尼亚</p>
    </body>	
    </html>	
    

    效果图
    在这里插入图片描述

    :after 选择器向选定的元素之后插入内容

    示例
    在每个 < p >之后插入的内容和样式:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:after
    { 
    	content:"我是after插入的文字-";
    	background-color:yellow;
    	color:red;
    	font-weight:bold;
    }
        </style>
      </head>
      <body>
    	  
    
    <p>德玛西亚</p>
    <p>艾欧尼亚</p>
    </body>	
    </html>	
    
    

    在这里插入图片描述

    :lang 向带有指定 lang 属性开始的元素添加样式

    示例
    每个< p >元素lang属性值等于"it(Italian)" 的选择的样式:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:lang(it)
    { 
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <p>德玛西亚</p>
    <p lang="it">艾欧尼亚</p>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    element1~element2 选择器匹配出现在 element1 后面的 element2

    示例
    设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p~ul
    { 
    	content:"我是after插入的文字-";
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li>德玛</li>
      <li>卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p>诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li>伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2>暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素

    示例
    设置class属性值以"all"单词开头的所有元素的背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	[class^="all"]
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="all">德玛</li>
      <li>卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p>诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    [attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素

    示例
    设置class属性值以"test"结尾的所有div元素的背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	[class$="all"]
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      <li>卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p>诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    [attribute*=value] 选择器匹配元素属性值包含指定值的元素

    示例
    匹配class属性里包含字符a的所有元素

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	[class*="a"]
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      <li class="fdeasf">卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p class="fadsf">诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素

    示例
    选择的 li元素是其父元素的第一个 元素:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	li:first-of-type
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      <li class="fdeasf">卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p class="fadsf">诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    在这里插入图片描述

    :last-of-type选择器匹配元素其父级是特定类型的最后一个子元素

    示例
    选择的 li元素是其父元素的最后一个元素:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	li:last-of-type
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      <li class="fdeasf">卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    
    <p class="fadsf">诺克萨斯</p>
    <ul>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果

    在这里插入图片描述

    :only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素

    示例
    指定属于父元素的特定类型的唯一子元素的每个 span 元素::给它们添加样式

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	span:only-of-type
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      
      <li class="fdeasf">卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    <span>唯一的span元素</span>	
    <p class="fadsf">诺克萨斯</p>
    <ul>
    <span>ul下的唯一的span</span>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>卡瑟琳</li>
      <li>楚雨荨</li>
      <li>菲奥娜</li>
    </ul>
    </body>	
    </html>	
    
    

    效果

    在这里插入图片描述

    :only-child 选择器匹配属于父元素中唯一子元素的元素

    示例
    匹配属于父元素中唯一子元素的 li元素:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	li:only-child
    { 
    	
    	background-color:yellow;
    	color:red;
    	
    }
        </style>
      </head>
      <body>
    	  
    
    <div>艾欧尼亚</div>
    <ul>
      <li class="safaall">德玛</li>
      
      <li class="fdeasf">卢卡斯</li>
      <li>不知好歹</li>
    </ul>
    <span>唯一的span元素</span>	
    <p class="fadsf">诺克萨斯</p>
    <ul>
    <span>ul下的唯一的span</span>
      <li>小学生之手</li>
      <li class="all">伊芙琳</li>
      <li>托儿所</li>
    </ul>
    
    <h2 class="sfa all">暗影岛</h2>
    <ul>
      <li>ul下的唯一子元素</li>
      
    </ul>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制

    n 可以是一个数字,一个关键字,或者一个公式。

    1. 示例
      奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。 在这里,我们为奇数和偶数p元素指定两个不同的背景颜色:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-child(odd)
    {
    	background:#ff0000;
    }
    p:nth-child(even)
    {
    	background:#0000ff;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述
    2. 示例
    使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。 在这里,我们对所有索引是3的倍数的p元素指定了背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-child(3n+0)
    {
    	background:#ff0000;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数

    n可以是一个数字,一个关键字,或者一个公式。

    1. 示例
      奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数。

    在这里,我们为奇数和偶数的倒数p元素指定两个不同的背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-last-child(odd)
    {
    	background:#ff0000;
    }
    p:nth-last-child(even)
    {
    	background:#0000ff;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    效果

    在这里插入图片描述

    1. 示例
      使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。

    在这里,我们对所有索引是3的倍数的倒数顺序的p元素指定了背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-last-child(3n+0)
    {
    	background:#ff0000;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    在这里插入图片描述

    :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素

    n可以是一个数字,一个关键字,或者一个公式。

    1. 示例
      奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。

    在这里,我们为奇数和偶数p元素指定两个不同的背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-of-type(odd)
    {
    	background:#ff0000;
    }
    p:nth-of-type(even)
    {
    	background:#0000ff;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述
    2. 示例
    使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。

    在这里,我们对所有索引是3的倍数的p元素指定了背景颜色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:nth-of-type(3n+0)
    {
    	background:#ff0000;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    效果
    在这里插入图片描述

    :nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素

    nth-last-of-type(n)使用方法同上,不过这是从最后一个元素开始计数

    :last-child选择器用来匹配父元素中最后一个子元素

    示例
    指定父元素中最后一个p元素的背景色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	
    	p:last-child
    {
    	background:yellow;
    }
        </style>
      </head>
      <body>
    	  <h1>1.艾欧尼亚</h1>
    <p>2.诺克萨斯</p>
    <p>3.恕瑞玛,尼玛的黄鸡回来了</p>
    <p>4.哈撒给</p>
    <p>5.哈撒</p>
    <p>哦里呀嘎痛</p>
    <p>死亡如风,常伴吾身</p>
    <p>如果你想要杀我,希望你把你们的朋友也叫上</p>
    <p>一点寒芒先到,而后枪出如龙</p>
    <p>破碎的剑刃,破碎的意志</p>
    </body>	
    </html>	
    
    

    效果

    在这里插入图片描述

    :root选择器用匹配文档的根元素

    示例
    设置HTML文档的背景色

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style> 
    :root
    {
    	background:#ff0000;
    }
    </style>
    </head>
    <body>
    <div>
    <h1>无所不能的林大王</h1>
    	</div>
    </body>
    </html>
    

    效果

    在这里插入图片描述

    :empty选择器选择每个没有任何子级的元素(包括文本节点)

    示例
    指定空的p元素的背景色:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    p:empty
    {
    	width:100px;
    	height:20px;
    	background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <p></p>
    <p>德玛西亚</p>
    <p>诺克萨斯</p>
    
    </body>	
    </html>	
    
    
    

    效果图
    在这里插入图片描述

    :target选择器可用于当前活动的target元素的样式

    # 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素

    示例

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    :target
    {
    	border: 2px solid #D4D4D4;
    	background-color: #e5eecc;
    }
    </style>
    </head>
    <body>
    
    <h1>This is a heading</h1>
    
    <p><a href="#news1">hello world</a></p>
    <p><a href="#news2">No</a></p>
    
    <p>点击a标签他会改变下面的样式</p>
    
    <p id="news1"><b>是的,</b></p>
    <p id="news2"><b>哈哈哈</b></p>
    
    </body>	
    </html>	
    
    
    

    效果
    在这里插入图片描述

    :enabled 选择器匹配每个启用的的元素

    主要用于表单元素
    示例
    设置所有type="text"的启用的输入元素的背景颜色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style> 
    input[type="text"]:enabled
    {
    	background:#ffff00;
    }
    input[type="text"]:disabled
    {
    	background:#dddddd;
    }
    </style>
    </head>
    <body>
    
    <form action="">
    艾欧尼亚: <input type="text" value="盖伦" /><br>
    诺克萨斯: <input type="text" value="诺手" /><br>
    暗影岛: <input type="text" disabled="disabled" value="被禁了" /><br>
    </form>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :disabled 选择器匹配每个禁用的的元素

    主要用于表单元素
    示例
    设置所有type="text"的禁用的输入元素的背景颜色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style> 
    input[type="text"]:enabled
    {
    	background:#ffff00;
    }
    input[type="text"]:disabled
    {
    	background:#dddddd;
    }
    	
    </style>
    </head>
    <body>
    
    <form action="">
    艾欧尼亚: <input type="text" value="盖伦" /><br>
    诺克萨斯: <input type="text" value="诺手" /><br>
    暗影岛: <input type="text" disabled="disabled" value="被禁了" /><br>
    </form>
    
    </body>
    </html>
    

    效果

    在这里插入图片描述

    :checked 选择器匹配每个选中的输入元素

    仅适用于单选按钮或复选框
    示例
    为所有选中的输入元素设置背景颜色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style> 
    input:checked {
        height: 50px;
        width: 50px;
    }
    </style>
    </head>
    <body>
    
    <form action="">
    <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
    <input type="radio" value="female" name="gender" /> Female<br>
    <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
    <input type="checkbox" value="Car" /> I have a car 
    </form>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :not(selector) 选择器匹配每个元素是不是指定的元素/选择器

    示例
    为每个并非

    元素的元素设置背景颜色:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>无标题文档</title>
    <style>
    p {
        color: #000000;
    }
    
    :not(p) {
        color: #ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>这是一个标题</h1>
    
    <p>这是一个段落.</p>
    <p>这是另一个段落.</p>
    
    <div>这是div元素的一些文本。</div>
    
    
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    ::selection选择器匹配元素中被用户选中或处于高亮状态的部分

    ::selection只可以应用于少数的CSS属性:color, background, cursor,和outline
    示例
    将选定的文本添加红色:

    
    <html>
    <head>
    <style type="text/css">
    ::selection
    {
    color:#ff0000;
    }
    ::-moz-selection
    {
    color:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>尝试选择本页的一些文本</h1>
    
    <p>这是一些文本.</p>
    
    <div>这是div元素中的一些文本.</div>
    
    <a href="//www.baidu.cc/" target="_blank">链接百度!</a>
    
    </body>
    </html>
    
    

    效果
    在这里插入图片描述

    :out-of-range 选择器用于标签的值在指定区间之外时显示的样式

    out-of-range 选择器只作用于能指定区间之外值的元素,例如 input 元素中的 min 和 max 属性

    示例
    输入的值在指定区间外时,设置指定样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:out-of-range
    {
    	border:2px solid red;
    }
    </style>
    </head>
    <body>
    
    <h3> :out-of-range 选择器实例演示。</h3>
    
    <input type="number" min="5" max="10" value="17" />
    
    <p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :in-range 选择器用于标签的值在指定区间值时显示的样式

    == :in-range 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性==
    示例
    输入的值在指定区间内时,设置指定样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:in-range
    {
    	border:2px solid yellow;
    }
    </style>
    </head>
    <body>
    
    <h3>:in-range 选择器实例演示。</h3>
    
    <input type="number" min="5" max="10" value="7" />
    
    <p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :read-write 选择器用于匹配可读及可写的元素

    目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素
    示例
    如果 input 元素不是只读,即没有 “readonly” 属性,设置输入框样式为黄色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:read-write
    {
    	background-color: yellow;
    	color:red;
    }
    </style>
    </head>
    <body>
    
    <h3> :read-write 选择器实例演示。</h3>
    
    <p>普通的input元素:<br><input value="hello"></p>
    
    <p>只读的input元素:<br><input readonly value="hello"></p>
    
    <p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :read-only 选择器用于选取设置了 “readonly” 属性的元素

    表单元素可以设置 “readonly” 属性来定义元素只读
    如果 input 元素设置了 “readonly” 属性,设置输入框样式为黄色:
    示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:read-only
    {
    	background-color: yellow;
    }
    </style>
    </head>
    <body>
    
    <h3> :read-only 选择器实例演示。</h3>
    
    
    <p>普通的input元素:<br><input value="hello"></p>
    
    <p>只读的input元素:<br><input readonly value="hello"></p>
    
    <p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>
    <p> :readonly 择器选取设置 "readonly" 属性的元素。</p>
    
    </body>
    </html>
    

    效果

    在这里插入图片描述

    :optional 选择器在表单元素是可选项时设置指定样式。

    表单元素中如果没有特别设置 required 属性即为 optional 属性

    == :optional 选择器只适用于表单元素: input, select 和 textarea==

    示例
    如果 input 元素没有设置 “required” 属性,设置其为黄色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:optional
    {
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    
    <h3>:optional 选择器演示实例。</h3>
    
    <p>可选的 input 元素:<br><input></p>
    
    <p>必填的 input 元素:<br><input required></p>
    
    <p> :optional 选择器用于表单中未设置"required" 属性的元素。</p>
    
    </body>
    </html>
    

    效果

    在这里插入图片描述

    :required 选择器在表单元素是必填项时设置指定样式。

    表单元素可以使用 required 属性来设置必填项

    示例
    如果 input 元素设置了 “required” 属性,设置其为黄色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:required
    {
    	background-color: yellow;
    }
    </style>
    </head>
    <body>
    
    <h3>信息</h3>
    
    <p>姓名<br><input></p>
    
    <p>住址<br><input required></p>
    
    <p> :required选择器选择表单元素有“需要”属性.</p>
    
    </body>
    </html>
    

    效果

    在这里插入图片描述

    :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

    :valid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。

    示例

    如果 input 元素中输入的值为合法的,设置其为黄色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:valid
    {
    	background-color: yellow;
    }
    </style>
    </head>
    <body>
    
    <h3> :valid 选择器实例演示。</h3>
    
    <input type="email" value="jiumeilove@dingtalk.com" />
    
    <p>请输入非法 e-mail 地址,查看样式变化。</p>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述

    :invalid 选择器用于在表单元素中的值是非法时设置指定样式。

    == :invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等==

    示例
    如果 input 元素中的值是非法的,设置样式为红色:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>无标题文档</title> 
    <style>
    input:invalid
    {
    	border:2px solid red;
    }
    </style>
    </head>
    <body>
    
    <h3> :invalid 选择器实例演示。</h3>
    
    <input type="email" value="supportEmail" />
    
    <p>请输入合法 e-mail 地址,查看样式变化。</p>
    
    </body>
    </html>
    

    效果
    在这里插入图片描述
    以上就是css所有的选择器了,如果以后w3c增加了,我再改

    展开全文
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...

    CSS常用选择器

    CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧!

    一、通配符选择器

    通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。

    基本语法格式:*{ 属性1:属性值1;属性2:属性值2;}

    例子
    使用该选择器定义样式,清除所有HTML标记的默认边距。

    *{
    margin:0;       /*定义外边距*/
    padding:0;     /*定义内边距*/
    }
    

    但实际开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,反而降低了代码的执行速度。

    二、标签选择器

    标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。

    基本语法格式:标签名{ 属性1:属性值1;属性2:属性值2;}

    所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

    例子
    使用p选择器定义HTML页面中所有段落的样式。

    p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
    

    标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。

    三、类选择器

    类选择器使用**‘.’**(英文点号)进行标识,后面紧跟类名。

    基本语法格式:.类名{ 属性1:属性值1;属性2:属性值2;}

    该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。

    例子

    1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4 <meta charset="UTF-8">
    5 <title>类选择器</title>
    6 <style type="text/css">
    7  .red{color: red;}
    8  .green{color:green;}
    9  .font22{font-size:22px;}
    10 p{ text-decoration:underline; font- family:"微软雅黑"; }
    11 </style>
    12 </head>
    13 <body>
    14 <h2 class="red">二级标题文本</h2>
    15 <p class-"green font22">段落文本内容</p>
    16 <p class="red font22">段落二文本内容</p>
    17 <p>段落三文本内容</p>
    18 </body>
    19 </html>
    

    类选择器最大的优点是可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,可以实现为不同类型的标记指定相同的样式。同时,一个HTML元素也可以应用多个class类,设置多个样式,此时多个类名之间需要用空格隔开,如上述代码中的前两个<p>标记。

    注意:类名的第一个字符不能使用数字,并且严格区分大小写。一般采用小写的英文字符。

    四、id选择器

    id选择器使用**‘#’**进行标识,后面紧跟id名。

    基本语法格式:#id名{ 属性1:属性值1;属性2:属性值2;}

    该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

    例子

    1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4 <meta charset="UTF-8">
    5 <title>id选择器</title>
    6 <style type="text/css">
    7 #bold{font -weight:bold; }
    8 #font24 {font-size:24px; }
    9 </style>
    10 </head>
    11 <body>
    12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
    13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
    14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
    15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
    16 </body>
    17 </html>
    

    注意:同一个id不允许应用于多个标记,虽然很多浏览器并不会报错,但JavaScript等脚本语言调用id时会出错。另外,id选择器不支持像类选择器那样定义多个值。

    五、属性选择器

    属性选择器可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    语法格式:[标签名称] { 属性1:属性值1;属性2:属性值2;}

    注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

    CSS 选择器参考手册:

    选择器描述
    [attribute]用于选取带有指定属性的元素
    [attribute=value]用于选取带有指定属性和值的元素
    [attribute~=value]用于选取属性值中包含指定词汇的元素
    [attributeI=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词
    [attribute^=value]匹配属性值以指定值开头的每个元素
    [attribute$=value]匹配属性值以指定值结尾的每个元素
    [attribute*=value]匹配属性值中包含指定值的每个元素

    例子

    1、为带有 title 属性的所有元素设置样式:

    [title]
    {
    color:red;
    }
    

    2、为 title=“W3School” 的所有元素设置样式:

    [title=W3School]
    {
    border:5px solid blue;
    }
    

    3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

    [title~=hello] { color:red; }
    

    4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

    [lang|=en] { color:red; }
    

    5、设置表单的样式
    属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:

    input[type="text"]
    {
      width:150px;
      display:block;
      margin-bottom:10px;
      background-color:yellow;
      font-family: Verdana, Arial;
    }
    
    input[type="button"]
    {
      width:120px;
      margin-left:35px;
      display:block;
      font-family: Verdana, Arial;
    }
    

    使用属性选择器,可以只指定元素的某个属性,还可以同时指定元素的某个属性和其对应的属性值。

    六、并集选择器

    并集选择器是同时匹配多个选择器,取多个选择器的并集,选择器之间用逗号隔开,如em,strong{ }。

    语法格式:
    标签名称1,标签名称2 { 属性1:属性值1;属性2:属性值2;}

    例子

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
        <title></title>
        <style type="text/css">
        span,div, .content {
                color:darkorange;
            }
    
        </style>
    </head>
    <body>
        <span>博客园</span>
        <div>给最苦</div>
        <p class="content">网页设计</p>
    </body>
    </html>
    

    并集选择器的优点是将多个标签的相同样式 提取出来,集体声明,优化代码,方便阅读。

    七、后代选择器

    后代选择器也称包含选择器,用来选择特定元素的后代。如.asideNav li{ },表示先匹配第二个选择器的元素,并属于第一个选择器内。

    语法格式:
    标签名称1 标签名称2{ 属性1:属性值1;属性2:属性值2;}

    在CSS中,后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时,内层的元素就成为外层元素的后代。如元素B嵌在元素A内部,B就是A的后代。而且,B的后代也是A的后代,就像家族关系。

    定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。如:

    div p { color: red; }
    

    上述选择器中,div 为祖先元素,p 为后代元素,其作用就是选择 div 元素的所有后代 p元素,不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论 p 是 div 的多少辈的后代,p 元素中的文本都会变成红色。

    例子

    后代选择器中的空格,是用来表示后代层级的,当然就不限于二级的。根据需要,从任一个祖先元素开始,直到想应用样式的那个元素,都可以被放到后代选择器链中。如:

    <ul>
    <li><a href="/home/">首页</a></li>
    <li><a href="/new/">新房</a></li>
    <li><a href="/esf/">二手房</a></li>
    <ul>
    <li><a href="/sale/">出售房源</a></li>
    <li><a href="/buy/">求购房源</a></li>
    </ul>
    <li><a href="/rent/">租房</a></li>
    </ul>
    

    上述导航菜单中,假如希望所有锚文本的字体大小是16px,就可以通过后代选择器ul a来选择 ul 元素的所有后代,因为后代选择器会影响到它的各级后代。如:

    ul a {
       font-size: 16px;
    }
    

    假如又希望第二级列表项的锚文本的字体大小是12px,就可以通过ul.nav ul a的这种多层后代关系的后代选择器,它只选择第二级列表项的锚文本。

    ul li a {
    font-size: 12px;
    }
    

    当然,这个后代选择器也可以写成ul、li、ul、li、a,以实现更精准的控制。

    注意:
    1、后代包括儿子,孙子,只要是放在指定标签的后代都是。
    2、也可以不用标签名称1、2,也可以用id和class名,分别用id和class来选择。
    3、后代选择器可以无限衍生。

    八、子代选择器

    子代选择器使用**‘>’**表示,如ul>li{ },表示匹配第二个选择器,且为第一个选择器的元素的后代。

    语法格式:
    标签名称1>标签名称2{ 属性1:属性值1;属性2:属性值2;}

    例子

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实例</title>
        <style>
            #box>p{
                color: darkorange;  /*设置颜色为 深橙色*/
                font-size: 80px;
        }
        </style>
    </head>
    <body>
        <div id="box">
            <div>
                <div>
                    <div>
                        <p>
                            狸花猫
                        </p>
                    </div>
                </div>
            </div>
            <p>
                大橘猫
            </p>
        </div>
    </body>
    </body>
    </html>
    

    注意:
    1、只会查找儿子,不会查找其他被嵌套的标签。
    2、子元素选择器也可以用其他的id和class选择器来进行查找。 3、子元素选择器也可以通过>符号一直延续下去。

    九、兄弟选择器(+和~)

    相邻兄弟选择器使用+号表示,如p+a{ },表示匹配紧跟第一个选择器并匹配第二个选择器的元素,如紧跟p元素后的a的元素。
    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

    语法格式:标签名称1+标签名称2 { 属性1:属性值1;属性2:属性值2;}

    例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style  type="text/css">
             h1 + p {
            margin-top:50px;
            color:red;
        }
    </style>
    </head>
    <body>
    <p>This is paragraph.</p>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    </body>
    </html>
    

    兄弟只会影响下面的p标签的样式,不影响上面兄弟的样式。
    注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
    当两个兄弟元素相同时,会实现一次循环查找:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style type="text/css">
        li + li {
            color:red;
        }
    </style>
    </head>
    <body>
    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    </body>
    </html>
    

    而~ 选择器 :作用是查找某一个指定元素的后面的所有兄弟结点。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style type="text/css">
        h1 ~ p{
            color:red;
        }
    </style>
    </head>
    <body>
        <p>1</p>
        <h1>2</h1>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </body>
    </html>
    

    十、伪选择器
    伪选择器是一种特殊的选择器,它分为伪类选择器和伪对象选择器2种。

    1.伪类选择器:
    CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。

    伪类选择器作用应用对象
    :hover定义标记在鼠标悬停(划过)时的样式所有显示标记
    :link定义标记在超链接状态下的样式a标签
    :focus定义标记在获取焦点时的样式a标签(IE浏览器不支持)
    :visited定义标记被访问过后的样式a标签
    :active定义标记在选定时刻下的样式a标签

    例子

    以下是5个a标签

        <a href="#" id="a1">链接1</a>
     	<a href="#" id="a2">链接2</a>
     	<a href="#" id="a3">链接3</a>
     	<a href="#" id="a4">链接4</a>
     	<a href="#" id="a5">链接5</a> 
    

    加点CSS样式:

     a{
    		padding: 10px;
    		color:black; /*初始颜色全为黑色*/
    		font-weight: bold;
    	}
    	#a1:hover{
    		color:red; /*当鼠标悬停时链接1变成红色*/
    	}
    	#a2:link{
    		background-color: blue; /*给链接2添加蓝色的背景色*/
    	}
    	#a3:focus{
    		color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
    	}
    	#a4:visited{
    		color:green; /*被访问过后的链接4变为绿色*/
    	}
    	#a5:active{
    		background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
    	}
    

    除了以上五种基本伪类选择器之外,CSS还支持诸如:”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。

    2.伪对象选择器
    伪对象选择器根据对象内部的局部元素定义其样式。

    伪对象选择器作用
    :first-letter定义文本的第一个字符样式
    :first-line定义文本的首行样式
    :before定义对象之前内容的样式
    :after定义对象之后内容的样式

    例子

    <p>我是文本我是文本我是文本我是文本</p>
    

    使用:before和:after样式后:

     p:before{
    		content:'我说:“';/*在文本前面追加内容*/
    		color:red;
    	}
    	p:after{
    		content:'。”我说完了!';/*在文本结尾追加内容*/
    		color:red;
    	}
    

    以上就是CSS常见的选择器啦,你记住了吗?^_^

    展开全文
  • 通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS...

    到底什么是选择器?通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript,这个植物人就可以对外界刺激做出反应,可以思考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。

    我们知道,jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器,如:

    CSS选择器jQuery选择器
    ID选择器#myID$("#myID")
    类选择器.myClass$(".myClass")
    标签选择器p$(“p”)
    层次选择器div > strong$(“div>strong”)
    css称为伪类选择器 jQuery称之为过滤选择器p:nth-child(3)$(“p:nth-child(3)”)

    见下面的例子,CSS为每个段落的文字设置成14px,颜色是红色,jQuery中设置文字为16px,颜色为蓝色,因为jquery设置的是DOM加载后的行为,所有的段落表现为蓝色,16px字

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
    p { font-size: 14px; color:#F00 }
    p:nth-child(3){color:#690}
    </style>
    <script src="jquery/jquery-1.11.3.js"></script>
    <script>
    $(document).ready(function() {
      $("p").css({"color":"#00f","font-size":"16px"});
      $("p:nth-child(3)").css({"font-size":"24px"});
    
    });
    </script>
    </head>
    <body>
      <p>第一段</p>
      <p>第二段</p>
      <p>第三段</p>
      <p>第四段</p>
    </body>
    </html>
    

    那么两者的区别在哪里呢?

    1、但两者的作用不同,CSS选择器找到元素后为设置该元素的样式,jQuery选择器找到元素后添加行为。

    2、jQuery选择器拥有更好的跨浏览器的兼容性。

    3、选择器的效率。

    CSS选择器的效率

    id选择器(#myid)
    类选择器(.myclassname)
    标签选择器(div,h1,p)
    相邻选择器(h1+p)
    子选择器(ul > li)
    后代选择器(li a)
    通配符选择器(*)
    属性选择器(a[rel=“external”])
    伪类选择器(a:hover,li:nth-child)
    上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors。

    jQuery选择器的效率

    id选择器KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id')和元素标签选择器(‘form’)
    类选择器 ( ′ . c l a s s N a m e ′ ) 属 性 选 择 器 (&#x27;.className&#x27;) 属性选择器 (.className)(’[attribute=value]’)和伪类选择器$(’:hidden’)

    展开全文
  • CSS3新增选择器示例-伪类选择器

    千次阅读 2017-07-10 09:59:24
    一. 伪类选择器介绍1.1 首先了解下什么是类选择器选择器语法:.类名也就是标签的class属性值 示例代码<!DOCTYPE html> <title>css3中选择器示例 ; charset=utf-8" /> <style>

    一. 伪类选择器介绍

    1.1 首先了解下什么是类选择器

    类选择器语法:.类名
    
    也就是标签的class属性值
    

    示例代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>css3中选择器示例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*通过标签选择器给div设置宽、高,文字对其方式*/
            div {
                width: 300px;
                height:200px;
                text-align: center;
                color: white;
                line-height: 200px;
                margin-top: 10px;
            }
    
            /*② 通过类选择器给两个div设置样式*/
            .div1 {
                background-color: black;
            }
    
            .div2 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!--① 首先,定义两个div标签,并设置class属性,值分别是div1和div2-->
        <div class="div1">我是div1标签</div>
        <div class="div2">我是div2标签</div>
    </body>
    </html>

    运行结果
    这里写图片描述

    1.2 伪类选择器

    ① 上面简单的介绍了类选择器,那么伪类选择器与类选择器之间,有什么关系呢?
    
      答:没什么关系。
    
    ② 为什么说没关系呢?
    
      首先,类选择器的语法是.类名, 类名是用户自定义的,类选择器定义的样式,
    
      我们在标签的class属性中可以直接通过定义的类名直接使用。
    
      伪类选择器的语法是固定的,例如:E:hover (E代表选择器,可以是类选择器,标签选择器)
    

    二. CSS3中新增的伪类选择器示例介绍

    1. E:first-child

    获取某元素(E)的父元素的第一个子元素

    例1:

    <!DOCTYPE html>
    <html>
    <head>
        <title>示例代码1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*② 通过li标签获取该元素的父元素下的第一个子元素,将该元素的内容的文字颜色,设置为红色*/
            li:first-child {
                color: red;
            }
        </style>
    </head>
    <body>
        <!--① 定义一个无序列表-->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
    </html>

    运行结果
    这里写图片描述

    例2:

    <!DOCTYPE html>
    <html>
    <head>
        <title>示例代码2- 通过类选择器获取</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*② 通过类名选择器找到指定元素,获取该指定元素的父元素下的第一个子元素,将该元素的内容的文字颜色,设置为红色*/
            .li1:first-child {
                color: red;
            }
        </style>
    </head>
    <body>
        <!--① 定义一个无序列表-->
        <ul>
            <li>1</li>
            <li class="li1">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
    </html>

    运行结果
    这里写图片描述

    示例代码2失败原因

    要设置的第一个子元素,没有没有设置class=’li1’

    如果是指定标签选择器,那么指定的标签也应该是与标签选择器的标签名相同

    这里写图片描述

    例3

    <!DOCTYPE html>
    <html>
    <head>
        <title>示例代码3- 通过类选择器获取</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*找到h2标签的父标签div下的第一个元素*/
            h2:first-child {
                color: red;
            }
        </style>
    </head>
    <body>
    
        <div>
            <p>第一段文字</p>
            <p>第二段文字</p>
            <p>第三段文字</p>
            <p>第四段文字</p>
            <h2>第五段文字</h2>
        </div>
    </body>
    </html>
    

    运行结果
    这里写图片描述

    失败原因

    例3中,我们是通过h2标签找到的父标签下的第一个元素。
    ① 如果是通过标签选择器查找,那么指定的标签要与查找的标签,标签名要相同
    ② 如果是类选择器,那么指定的要与查找的要有相同的类名

    改正后运行结果
    这里写图片描述


    2. E:last-child

    获取最后一个子元素,与E:first-child用法相同。


    3. E:nth-child(n) 用法

    获取第 n 个子元素

    例1

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*找到ul标签下的li标签的父元素下的第七个子元素(有点绕口)*/
            ul>li:nth-child(4) {
                color: red;
            }
        </style>
    </head>
    <body>
    
    <ul>
        <li>第一个子元素</li>
        <li>第二个子元素</li>
        <li>第三个子元素</li>
        <li>第四个子元素</li>
        <li>第五个子元素</li>
        <li>第六个子元素</li>
        <li>第七个子元素</li>
        <li>第八个子元素</li>
    </ul>
    
    </body>
    </html>
    

    这里写图片描述

    例2:

    如果是n 值为 小于 1 或 超出指定元素的兄弟元素个数,会出现什么状况?

    这里写图片描述

    这里写图片描述

    例3:

    这里写图片描述

    总结:

    从上面三个例子可以看出

    ① n 是从 1 开始计算的,小于 1 或 大于兄弟元素个数,都不会生效

    ② E 与 选中的第 n 个元素,如果 E 是 标签,那么 n 所指向的元素要与 E 是相同的标签


    4. E:nth-child(an + b) 用法

    nth-child(2n - 1) 与 nth-child(n) 中 n 所表示的意义不同

    nth-child(n) 中的 n 表示的是 第几个元素,值从 1 开始

    nth-child(an + b) 中的 n 代表 从 0 开始,依次递增的自然数
    0, 1, 2, 3, 4….

    通过下面的例子来具体说明

    例1

    给无序列表下的奇数个子元素的字体颜色设置为红色

    示例代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>将无序列表的所有偶数为子元素字体颜色设置为红色</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            li:nth-child(2n - 1) {
                color: red;
            }
        </style>
    </head>
    <body>
    
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <li>第六个元素</li>
        <li>第七个元素</li>
        <li>第八个元素</li>
    </ul>
    
    </body>
    </html>
    

    运行结果

    这里写图片描述

    总结:

    上例的nth-child(2n -1)
    可以理解成一个for循环
    for(var n = 0; ; n++) {
        var w = 2n - 1;
        if(w > 8) { // 8 就是li的个数
        break;
        }else {
        nth-child(w);
        }
    }
    
    注意: 当a的值为正整数是,2n - 1 的最大值不能超过li的个数也就是 8
    
    第一次: n = 0  2n-1=-1 小于8成立 执行nth-child(-1) -1 < 1 运行无效果
    第二次: n = 1  2n-1= 1 小于8成立 执行nth-child(1) 将第一个元素文字颜色设置为红色
    ....
    第六次: n = 5  2n-1= 9 大于8 停止循环
    
    此时,页面上颜色改变的就只有第1,3,5,7个元素

    例2

    给无序列表前五个元素的文本颜色设置为红色

    示例代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>给无序列表的前五个元素文本颜色设置为红色</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*
                a = -2 为负数,取开最小值, an + b 的最小值不能小于 1
                第一次: n = 0  -1*0 + 5 = 5  5 > 1 执行nth-child(5)
                第二次:  n = 1  -1*1 + 5 = 4  4 > 1 执行nth-child(4)
                第三次: n = 2  -1*2 + 5 = 3  3 > 1 执行nth-child(3)
                第四次: n = 3  -1*3 + 5 = 2  2 > 1 执行nth-child(2)
                第四次: n = 4  -1*4 + 5 = 1  1 = 1 执行nth-child(1)
                第四次: n = 5  -1*4 + 5 = 0  0 < 1 结束,停止执行
            */
            li:nth-child(-1n + 5) {
                color: red;
            }
        </style>
    </head>
    <body>
    
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <li>第六个元素</li>
        <li>第七个元素</li>
        <li>第八个元素</li>
    </ul>
    
    </body>
    </html>

    运行结果

    这里写图片描述

    注意:nth-child(an + b) 的写法是固定的,顺序不能颠倒,如写成如下情况

    这里写图片描述

    以上三例总结

    ① nth-child(an + b) 的写法是固定的,不能颠倒,写成nth-child(b + an)无效

    ② 当a 为正数时,an + b 的最大值为所有子元素的个数,超过该值n 就停止递增

    ③ 当a 为负数时, an + b 的最大值,不能小于 1, 小于1 ,n 停止递增


    5. E:nth-child(even)

    选中所有的偶数元素
    这里写图片描述


    6.nth-child(odd)

    选中所有的奇数元素
    这里写图片描述

    展开全文
  • web前端@css选择器

    千次阅读 2019-09-03 14:13:52
    web前端@css选择器超级详细 文章很长 需耐心阅读 内容总览 内容总览 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练...
  • 前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>...
  • 循环样式: 目标样式: 代码如下: <view class="grids"> <view class="grid" wx:for="{{icons}}" wx:for-item="icon" wx:key="icon.itemTypeId" data-item-type-id="{{icon.itemTypeId}}" data-...
  • CSS选择器的优先级

    千次阅读 2019-03-06 13:42:19
    本篇博文由于夹杂了本人的理解以及方便初学者浏览的推导过程和基本概念补充,故篇幅较长。...既然我们要搞懂的是CSS选择器的优先级,那我们首先肯定要知道CSS有哪些选择器: 类型选择器/元素选择器(如:p,div,ul,li...
  • css3选择器&文字与字体相关样式

    千次阅读 2017-12-27 21:00:05
    三、css3部分新增选择器的语法及应用场景 四、css3层级选择器的语法及应用场景 五、css3新增关于文本属性的语法及应用场景一、css3的概念、优势及应用1.1 css3的概念 css3即层叠样式表(cascading stylesheet) ...
  • CSS3选择器 | 每个前端开发者必须要掌握的技术

    千次阅读 多人点赞 2020-05-06 19:20:29
    如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。 E[att] {} : 选择具有att属性的E元素 E[att="val"]{}: 选择具有att属性且属性值等于val的E元素 E[att~=...
  • 通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS...
  • css选择器之多项选择子元素 //选择循环的第10-18项加下划线 li:nth-child(n+10):nth-child(-n+18){ border-bottom: 1px solid #DDDDDD; }
  • 编程实现一个css选择器总结

    千次阅读 2018-03-22 19:27:13
    题目:实现一个getCssSelector方法,可以根据给定的元素生成一个css选择器,通过这个选择器可以快速定位到这个元素(document.querySelector(A))。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...
  • jquery 选择器循环

    2019-09-23 22:25:36
    基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background",...
  • 使用原生JS实现jQuery的css选择器,考虑以下几个问题: 1.jQuery用$符号传参的形式获取节点的对象:1)传参有可能是字符串;2)有可能是一个节点对象;3)有可能直接是一个函数,就是$(function(){}),这个形式。所以...
  • 各位朋友大家好,今天笔者...(http://blog.csdn.net/liwei3gjob/article/details/8865874),CSS选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度
  • CSS3中新增的选择器

    2017-07-29 17:31:12
    CSS3中新增的选择器
  • 级联样式单与CSS选择器

    千次阅读 2020-01-15 09:13:26
    CSS 概述 级联样式单是一系列格式规则,这些规则用于控制网页内容的外观,可以将数据逻辑和显示逻辑分离,从而提高文件的可读性。 CSS 样式单的基本使用 链接外部样式文件:这种方式可以将央视文件彻底与HTML文档...
  • 标签选择器 示例代码如下: html = """ <html><head><title>The Dormouse's story</title></head> <p class="title" name="dromouse"><b>The Dormouse's story</b></p> <p class="story">Once upon a time there ...
  • 1.交集选择器格式: 选择器1选择器2{ } 效果:2.并集选择器 . . . . . . . . . .<———————————-华丽的分割线——————————-> 今天是17年08月05日,因为之前的学习不是和扎实,导致现在...
  • 我这里select class规则是正确的,按理说我这个循环应该一直执行下去,可是为什么只有第一次能成功截取信息,之后都失败了? 希望知道的朋友能解答一下,谢谢 ![图片说明]...
  • CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E【foo】属性选择器 ·并集选择...
  • 在日常开发中经常会遇到在循环中的最后一个li不同于其他的li,要去除某种css样式,本文介绍的是利用CSS3新增的:not()伪类选择符,实现起来非常的方便,感兴趣的朋友们下面来一起看看吧。
  • CSS中伪元素、伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用。 CSS提供的伪元素选择器有如下几个: first-letter:对指定对象的第一个字符起作用。 first-line:对指定对象的第一行...
  • 替代Unity的GameObject.Find的功能,该功能支持类似CSS选择器和非活动的GameObjects。 SuperFind允许您查找不活动的GameObject,使用功能强大的选择器使查找GameObject更加简单且易于维护,并为您提供FindAll方法...
  • HTML5中的querySelector()方法和...在这里复习一下,querySelector()方法是返回与传递的CSS选择符相匹配的第一个元素;querySelectorAll()方法是返回与传递的CSS选择符相匹配的所有元素,是一个NodeList对象。
  • 很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢! 我们写的html代码 实例如下: class="list">  "#">1·...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,804
精华内容 23,121
关键字:

css循环选择器