CSS属性选择器、关系选择器、伪类选择器、伪元素选择器

最新推荐文章于 2022-08-19 23:29:50 发布

星河梦~

最新推荐文章于 2022-08-19 23:29:50 发布

阅读量472

点赞数 3

分类专栏： CSS学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_53186633/article/details/117932131

版权

CSS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS选择器

属性选择器
- 种类
- 用法
关系选择器
- 种类
- 用法
伪类选择器
伪元素选择器
- 种类
- 用法

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

CSS3中新增了3种属性选择器。

种类

（1）E[att^=value]

这里的^表示以某个“value”开头

（2）E[att$=value]

这里的$表示以某个“value”结尾

（3）E[att*=value]

这里的*表示包含“value”

用法

//属性选择器
 p[id^='xiao']{
       /* p标签的id属性是以xiao开头的 */
       color: pink;
   }


   p[id$='zi']{
       /* id属性是以zi结尾的 */
       color:royalblue;
   }


   p[class*='xiao']{
       /* p标签的class属性值中包含'xiao' */
       font-size: 35px;
   }

//标签
   <p id="xiaowen">我是小文</p>
   
   <p id="dawenzi">也是大文子</p>
   
   <p class="xiaoyan">又叫小严</p>
   
   <p class="xiaowenzi">也叫小文子</p>
   
   <p class="xingzi">也可以叫我星子</p>

在这里插入图片描述

关系选择器

种类

（1）子元素选择器：只能选择作为某元素的最近一级子元素。
简单理解就是选亲儿子元素。

语法：

元素1 > 元素2 { 
                 样式规则 
              }
// 表示选择元素1 里面的所有直接后代(子元素) 元素2。

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管。所以也可以叫它为亲儿子选择器

例如：

div > p {
		 	样式规则
		} /* 选择 div 里面所有最近一级 p 标签元素 */

（2）相邻兄弟选择器（+，~）

临近兄弟选择器：选择器使用加号“+”来链接前后两个选择器。

选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

普通兄弟选择器：使用 “~”来链接前后两个选择器。

选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

用法

//选择器
<div>
    .p1+#p2{               //属性为p1的标签的临近兄弟标签
	     /* 临近兄弟选择器 */
	     color: rgb(250, 100, 100);  //红色
	 }
	
	
	 .p1~#p3{                //属性为p1的标签的普通兄弟标签
	     /* 普通兄弟选择器 */
	      color: rgb(200, 200, 100);    //青色
	 }	
</div>
//标签
<p class="p1">西安</p>

<p id="p2">江苏</p>

<p id='p3'>云南</p>

在这里插入图片描述

伪类选择器

种类

下面只列举出了一些常用的伪类选择器

（1）:first-child选择器：为父元素中的第一个子元素设置样式

（2）:last-child 选择器：为父元素中的最后一个子元素

（3）:nth-child(n)选择器: 选择第几个子元素

（4）:nth-last-child(n)选择器：选择倒数第几个子元素

（5）:empty选择器：选择没有子元素或文本内容为空的所有元素。

用法

//选择器
    div p:first-child{
        /* 伪类选择器 ,选中第一个子元素*/
        color: rgb(8, 206, 196);
    }
    
    div p:nth-child(3){
        /* 选中第三个 */
        font-size: 25px;
    }
    div p:nth-last-child(2){
        /* 选中倒数第二个 */
        font-size: 45px;
    }

//标签
 <div>
     <p class="p1">巧克力</p>
     <p id="p2">棒棒糖</p>
     <p id='p3'>小熊饼干</p>
     <p id="p2">旺仔牛奶</p>
     <p id='p3'>可口可乐</p>
 </div>

在这里插入图片描述

a标签的伪类

（1）:link选择器：用户没有点击过的链接状态（特指a标签）

（2）:visited选择器：用户点击过的链接状态（特指a标签）

（3）:hover选择器：用户鼠标悬停到链接上的状态（不限于a标签，p，li也可以使用）

 a:hover{color: red}
 p:hover{font-size: 20px}

< a href=" " >超链接</ a>
<p>段落</p >

（4）:active选择器：用户鼠标点击且不松手之前的状态（不限于a标签）

注意：在css中必须按照以上固定顺序写，否则不起作用

（5）:not(s)选择器：选择不含有s选择器的元素，s一般是id或者类选择器

 p:not(.p1){color: red}
<p class="p1">段落1</p >
<p class="p1 p2">段落2</p >
<p class="p2 p3">段落3</p >
<p class="p4">段落4</p >

在这里插入图片描述

伪元素选择器

种类

（1）:before伪元素选择器：用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。

语法：

<元素>:before
{
	content:文字/url();
}

（2）:after伪元素选择器：用于在某个元素之后插入一些内容

语法：

<元素>:after
{
	content:文字/url();
}

用法

<style>
    p:before{           //在p标签的内容前面添加内容
        content:"文子";
    }
    p:after{         //在p标签的内容后面添加内容
        content:"文文";
    }
</style>

<body>
    <p>小文</p>
</body>

在这里插入图片描述

星河梦~

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS属性选择器、关系选择器、伪类选择器、伪元素选择器

CSS选择器属性选择器种类用法关系选择器种类用法伪类选择器种类用法伪元素选择器属性选择器属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了3种属性选择器。种类（1）E[att^=value]这里的^表示以某个“value”开头（2）E[att$=value]这里的$表示以某个“value”结尾（3）E[att*=value]这里的*表示包含“value”用法//属性选择器 p[id^='xiao']{ /* p标签的id属性是以xiao开头的 */
复制链接

扫一扫