Java前端：CSS——选择器

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

1. 标签选择器
2. 类选择器
3. id选择器

标签选择器

作用：会选择到页面上所有的这个标签的元素
语法：

h1{
	color: #a13d30;
	background:#3cbda5;
}

类选择器

.a{
	color: #311111;
}

<h1 class="a">xxx</h1>
<p class="a">sss</p>

注意：类选择器可以复用

id选择器

例如：

/**用法
	#id名称{}
*/
#a{
	color: #ff008a;
}

<h1 id="a">标题</h1>

注意：id必须保证全局唯一，不能出现第二个地方使用同一个id

优先级

id选择器>类选择器>标签选择器
注意：不遵循就近原则，与CSS导入方式不同。

高级选择器

层次选择器

后代选择器

应用于在某个元素的后面的所有
例如：

body p{
	background: red;
}

子选择器

应用于某个元素后面，只有一代

body>p{
	background: red;
}

相邻兄弟选择器

应用于同辈，只有下一个生效

.active + p{
	background: red;
}
/*
以下这种写法好像没有效果
body + p{
	background: red;
}
*/

<p class="active">p1</p>
<p>p2</p>

结果：p2所在一行呈现红色，p1不变色。

通用选择器

应用于当前元素向下（不包括自身）所有相同元素

.active ~ p{
	background: red;
}

结构伪类选择器

举例：

/*ul的第一个li*/
ul li:first-child{
    background: green;
}

/*ul的最后一个li*/
ul li:last-child{
    background: red;
}

/*定位到父元素下第一个元素，
且是p的子元素才有效，其余类似*/
p:nth-child(1){
    background: red;

}

/*选中父元素下的第二个p元素*/
p:nth-of-type(2){
    background: red;
}

/*鼠标移上去就会有颜色覆盖*/
p:hover{
    background: mediumvioletred;
}

属性选择器（常用）

使用方法（以标签a举例）：

1. a中包含某属性的所有

a[属性名]{}

2. a中包含某属性为某属性值的所有（属性值可以使用正则表达式）

/*a中某属性值与所需绝对相等*/
a[属性名 = 属性值]{}

/*
a中某属性的属性值包含所需属性值的所有
这里属性名和*=之间可以不加空格，所以属性名不能有"*"
*/
a[属性名 *= 属性值]{}

其他正则表达式：

• ^= 以这个开头
• $= 以这个结尾

举例：

/*a中有id的所有*/
a[id]{
    background: blue;
}

/*a中存在属性id="first"的所有元素*/
a[id=first]{
    background: red;
}
/*
这里id=first和id="first"经测试后结果相同，
应该都可以用
*/