HTML选择器

本篇文章同时收录在我的 github【前端知识点】中，链接直达

HTML选择器

目录

• HTML选择器
  • ①标签选择器
  • ②ID选择器
  • ③类选择器
  • ④后代选择器
  • ⑤子元素选择器
  • ⑥交集选择器
  • ⑦并集选择器
  • ⑧兄弟选择器
    • 1、相邻兄弟选择器
    • 2、通用兄弟选择器
  • ⑨序选择器
    • 1、同级别序选择器
    • 2、同类型序选择器
  • ⑩属性选择器
  • ⑪通配符选择器

①标签选择器

	格式：标签名称{
          属性：值；
	}

    <title>标签选择器</title>
    <style>
        p{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                        <p>我是段落</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<h1>我是标题</h1>

②ID选择器

格式：#标签名称{
		属性：值；
	}

    <title>id选择器</title>
    <style>
        #identity1{
            color: red;
        }
    </style>
<p id="identity1">我是段落</p>

③类选择器

格式：.标签名称{
		属性：值；
	}

    <title>类选择器</title>
    <style>
        .ppp{
            color: red;
        }
            </style>
    <p class="ppp">我是段落</p>

④后代选择器

格式：标签名称1 标签名称2{
		属性：值；
	}
注意点：两个标签名称中间有一个空格；标签的范围是选中标签的所有子元素标签

<title>12-后代选择器</title>
    <style>
        /*
        div p{
            color: red;
        }
        */
        /*
        #identity p{
            color: red;
        }
        */
        /*
        .para p{
            color: blue;
        }
        */
        /*
        #identity #iii{
            color: skyblue;
        }
        */
        /*
        #identity .ccc{
            color: purple;
        }
        */
        div ul li p{
            color: red;
        }
    </style>
    <p>我是段落</p>
<div id="identity" class="para">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <!--<p id="iii" class="ccc">我是段落</p>-->
            <p>我是段落</p>
        </li>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>

⑤子元素选择器

格式：标签名称1>标签名称2{
		属性：值；
	}
注意点：只找儿子不找孙子；子元素选择器可以一直延续下去

    <title>子元素选择器</title>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: blue;
        }
        */
        div>ul>li>p{
            color: purple;
        }
    </style>
    <p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>
<p>我是段落</p>

⑥交集选择器

格式：标签名称1标签名称2{
		属性：值；
	}

    <title>交集选择器</title>
    <style>
        /*
        p.para1{
            color: red;
        }
        */
        .para1#identity{
            color: blue;
        }
    </style>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>

⑦并集选择器

格式：标签名称1，标签名称2{
		属性：值；
	}

    <title>16-并集选择器</title>
    <style>
        /*
        .ht{
            color: red;
        }
        .para{
            color: red;
        }
        */
        .ht,.para{
            color: red;
        }
    </style>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>

⑧兄弟选择器

1、相邻兄弟选择器

	格式：标签名称1+标签名称2{
			属性：值；
		}
	注意点：只给指定标签紧跟他的相邻的标签添加语义

2、通用兄弟选择器

	格式：标签名称1~标签名称2{
			属性：值；
		}
	注意点：给指定标签后的所有标签添加语义

⑨序选择器

1、同级别序选择器

	p:First-child同级别第一个标签
	p:nth-child(n)同级别第n个
	p:nth-child(odd)同级别奇数个
	p:nth-child(even)同级别偶数个
	p:only-child选中父元素中有一个级别标签的标签
	p:nth-child(xn+y)x和y用户自定义，N为计数器从0开始递增
	p:nth-last-child(n)同级别中倒数第n个标签

2、同类型序选择器

	p:first-of-type同类型第一个标签
	p:nth-of-type(n)同类型第n个
	p:nth-of-type(odd)同类型奇数个
	p:nth-of-type(even)同类型偶数个
	p:only-of-type选中父元素中有唯一类型标签的标签
	p:nth-last-of-child(n)同类型中倒数第N个标签

⑩属性选择器

[attribute] eg:p[id]找到标签中含有id的标签
[attribute=value] eg:p[class=aa]找到class值为aa的标签
[attribute^=value]找到以value值开头的标签 CSS3
[attribute|=value]同上 CSS2
[attribute$=value]找到以value值结尾的标签 CSS3
[attribute~=value]找到包含value值的 
[attribute*=value]同上  CSS3

⑪通配符选择器

格式*{
	属性：值；
}