三种基本选择器

本文主要是介绍三种基本选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

三种基本选择器

标签选择器
类选择器
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要加双引号。

进行判断时：

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

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

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

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

这篇关于三种基本选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程