三种基本选择器

2021-08-04 22:33:42 阅读：159 来源： 互联网

三种基本选择器

标签选择器
类选择器
id选择器

标签选择器：使用标签，例如<p>标签，表示选中所有的<p>标签

p{
	color:red;
}

**类选择器：**使用该标签会选中所有带有class标记的元素

.tag{
    color:red;
}

<p class="tag">
    示例1
</p>
<p class="tag">
    示例2
</p>

**id选择器：**只能有一个唯一的id，选中指定的id

#tag{
    color:red;
}

<p id="tag">
    示例1
</p>
<p class="tag">
    示例2
</p>

层次选择器

后代选择器
子代选择器
相邻兄弟选择器
通用选择器

**后代选择器：**选择后代的所有元素

body p{
    color:red;
}

<body>
    <p>
        <ul>
            <li>示例1</li>
            <li>示例2</li>
            <li>示例3</li>
    	</ul>
    </p>
    <p>
		<ul>
            <li><p>示例4</p></li>
		</ul>
    </p>
	<p>示例5</p>
</body>

示例4和示例5会变成红色，而被<p>标签包裹的无序列表不会变红色

**子代选择器：**只选择后代中的第一代

body>p{
    color:red;
}

<body>
    <p>
        <ul>
            <li>示例1</li>
            <li>示例2</li>
            <li>示例3</li>
    	</ul>
    </p>
    <p>
		<ul>
            <li><p>示例4</p></li>
		</ul>
    </p>
	<p>示例5</p>
	<p>示例6</p>
</body>

示例5和示例6都会变红色，因为他们是body的第一代

**相邻兄弟选择器：**只选择同辈相邻的一个兄弟，而且是在选择元素后面的兄弟，不会选择前面的兄弟

.tag + p{
    color: red;
}

<body>
    <p class="tag">
        <ul>
            <li>示例1</li>
            <li>示例2</li>
            <li>示例3</li>
    	</ul>
    </p>
	<p>弟弟</p>
    <p>
		<ul>
            <li><p>示例4</p></li>
		</ul>
    </p>
	<p class="tag">示例5</p>
	<p>示例6</p>
</body>

示例6会变红色，但是弟弟不会变红色，因为弟弟不在tag标记的相邻位置

**通用选择器：**选择后面所有的兄弟，但是不选择前面的兄弟

.tag ~ p{
    color: red;
}

<body>
    <p class="tag">
        <ul>
            <li>示例1</li>
            <li>示例2</li>
            <li>示例3</li>
        </ul>
    </p>
	<p>二哥</p>
    <p>弟弟</p>
    <p>
        <ul>
            <li><p>示例4</p></li>
        </ul>
    </p>
    <p>示例5</p>
    <p>示例6</p>
</body>

二哥、弟弟、示例5、示例6都变红，因为他们都是同一辈下的兄弟

结构伪类选择器

ul li:first-child{
background: red;
}

在ul的所有后代li中选择第一个孩子

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

在p的父级中，所有的后代的第一个后代是p的话被选中，但是在所有后代中，其他不是p的也会被算在其中，就是说，在后代中第一个不是p，第二个是p，就不会选中p

p:nth-of-type(1){
background: blue;
}

在p的父级中，所有的p后代中第一个后代被选中，即使后代中有不同的标签，用type就不会算其他的标签，只算p的第一个

属性选择器

标签名+[属性]{样式}

例如：a[id]{ color:red;}，在所有a标签中，带有id属性的，都会选中；

a[id=tag]{color:red;}，在所有a标签中，带有id属性且等于tag的，会被选中；tag不用加双引号。

a[class=“tag”]{color:red}，在所有a标签中，带有class属性且等于tag的，都会被选中；tag要加双引号。

进行判断时：

= 是绝对等于，必须全部都相同；

*= 是包含等于，只要有一部分相同就可以；

^= 是以这个开头的都可以；

$= 是以这个结尾的都可以；

标签：基本,示例,color,标签,tag,三种,选择器,red
来源： https://blog.csdn.net/weixin_45987924/article/details/119394691

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

三种基本选择器

三种基本选择器

层次选择器

结构伪类选择器

属性选择器