CSS选择器

梁峯

已于 2022-06-04 15:08:09 修改

阅读量90

点赞数

分类专栏： css 笔记文章标签： css3

于 2022-04-27 20:57:32 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61219786/article/details/124460502

版权

笔记同时被 2 个专栏收录

18 篇文章

订阅专栏

css

9 篇文章

订阅专栏

选择器

文章目录

选择器

常用选择器

标记选择器

以HTML文档中得标记作为选择器符号，方便将相同的标记设成统一的样式。
```
p{font-size:16px;color:red;}
/*段落红色、16像素*/
```

类选择器

将HTML文档中的标记进行分类，通过设置标记的class属性来指定器样式。
.classname{样式声明}或标记.classname{样式声明}

与id不同的是可以重复使用

.blue{
    color:blue;
}
.abc{
    font-size:20px;
}
<p class="blue abc">落霞与孤鹜齐飞</p>
<p class="blue">秋水共长天一色</p>

id选择器

#idname{样式声明}
优先级大于类选择器；id在页面的标记中只能使用一次

属性的值会区分大小写

#red{
    color:red;
}


<p id="red">落霞与孤鹜齐飞</p>/*唯一*/

全局选择器

一个页面中所有HTML标记使用同一样式，可以使用全局选择器
```
*{
    color:red;
}
```

复合选择器

交集选择器

选中同时复合多个条件的元素
交集选择器中如果有元素选择器，必须使用元素选择器开头

<head>
	<style>
.red{color:red;}
div.red{font-size:20px;}/*选中div和red的交集*/
	</style>
</head>

<body>
<div class="red">div</div>
</body>

并集选择器

同时选择多个选择器对应的元素
选择器，选择器，选择器{}

div，red{font-size:20px;}/*同时选择div和red*/

关系选择器

父元素
- 直接包含子元素
子元素
- 直接被父元素包含
祖先元素
- 直接或间接包含后代的元素
- 一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含
- 子元素也是后代元素
兄弟元素
- 拥有相同的父元素

<head>
/*子元素选择器*/
div.box>span{/*所有div box类下的span*/
    color:orange;
}

/*后代选择器*/
div span{/*div内的span的后代元素*/
    color:skyblue;
}

/*兄弟选择器*/
p+span{
    /*p和span紧挨着的元素*/
}
p~span{
    /*选择下边的兄弟*/
}
</head>

<body><div class="box">
	我是一个div
<p>
	我是div中的p元素
<span>我是p中的span元素</span>
</p>
<span>我是div中的span元素</span>
</div></body>

属性选择器

<!DOCTUPE html>
<html lang="en">
    <head>
      <mate charset="UTF-8">
          <style>
          	p[title]{/*p下含有title的元素*/}
          	p[title=abc]{/*p下title属性值为abc的元素*/}
         	 p[title^=abc]{/*从p下title属性以“abc”开头*/}
              p[title$=cde]{/*p中title属性以“cde”结尾的元素*/}
               p[title*=c]{/*p中title属性中有“c”的元素*/}
          </style>
    </head>
    <body>
        <p title="abc">少小离家老大回</p>
        <p title="abcde">乡音无改鬓毛衰</p>
    </body>
</html>

伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述第一个元素的特殊状态
- 第一个子元素
- 被点击的状态
- 鼠标移入的元素
伪类一般情况下都是使用：开头
- first-child 第一个子元素
- last-child 最后一个子元素
- p::first-letter第一个字母
- p::first-child第一行
- nth-child(数字) 选中第n个子元素
  - 数字为n 全选
  - 2n或者even 偶数位元素
  - 2n+1或odd 奇数位元素
- 以上这些伪类都是根据所有子元素进行排序
- first-of-type
- last-of-type
- nth-of-type()
  - 功能和上述类似，不同点是他们实在同类型元素中排序

not()否定伪类

将复合条件的元素从选择器中去除

ul>li:not(:nth-child(3)){/*选中除了第三个的其它*/}

超链接a的伪类

:link 未访问过的
:hover 鼠标移入的状态
:active 鼠标点击的状态
:visited 访问过的
text-decoration:none去超链接下划线

<style>
    /*link是正常的链接*/
    a:link{color:red;}
    
    /*visited由于隐私的原因泄露所以只能修改颜色*/
    a:visited{color:orange；}
    
    a:hover{}
    a:active{}
</style>

伪元素

页面中一些特殊的并不真实存在的元素（特殊的位置）

使用::开头

p::slection{/*选中的内容*/}


p::before{/*元素的开始*/
content:'abc';
color:red;
}
p::after{/*元素的最后*/
content:'abc';
color:blue;
}
	/*z必须结合content属性来使用*/

选择器的权重

样式冲突
- 当我们选中不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了央视的冲突。
当样式方式冲突时，应用那个样式由选择器的权重（优先级）决定

权重

内联>id>类和伪类>元素>通配（*）>继承

!!!慎用!!!

可以在某一个样式的后边添加！important，则此时改样式后去最高的优先级。

.d{
    ……
    !important
}