CSS选择器（属性选择器、关系选择器、伪类选择器等）

最新推荐文章于 2024-07-22 20:38:06 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量715

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_46420078/article/details/120727561

版权

本文详细介绍了CSS选择器的多种类型，包括div标签的应用、属性选择器（如按属性、属性值匹配选择）、关系选择器（如父元素与子元素选择、相邻兄弟选择器）以及复合和伪类选择器。通过这些选择器，开发者能更精准地控制HTML元素的样式和布局。

摘要由CSDN通过智能技术生成

一、div标签

div标签：块级标签,是一个容器，可以嵌套其他的标签;若不与CSS结合使用，作用和<p>标签相似，通常会和CSS结合进行页面的布局

二、CSS的属性选择器

1、标签名[属性名]：选择含有给定属性的标签
/*选择带有title属性的div*/
    div[title]{
        color: red;
        font-size: 25px;}
 
2、标签名[属性名=值]：选择含有给定属性值的标签
/*选择带有title属性、并且title属性的值为hz的元素*/
    div[title='hz']{
        font-size: 35px;
        font-family: '隶书';}
3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的
/*选择title属性值以bj开头的div*/
    div[title^='bj']{
       color: blue;}
4、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的
/*选择title属性值以city结尾的div*/
    div[title$='city']{
        font-size: 55px;
        font-family: '宋体';}
5. 标签名[属性名*=值]：选择给定属性值是包含以某个字符结的
 /*选择title属性值中包含z_的div*/
    div[title*='z_']{
        font-family: '隶书';}

三、CSS的关系选择器

CSS的关系选择器：

1、父标签 > 子标签

子元素择器主要用来选择某个元素的第一级子元素。
 div>p {
        color: red;
    }

2、相邻兄弟关系选择器

(1)临近兄弟选择器：
/*选择div后的第一个p标签：临近兄弟关系*/
     div + p {
        color: blue;}
(2)普通兄弟关系：
/*选择div的所有兄弟p标签：普通兄弟关系*/
    div ~ p {
        color: blue;}

四、复合选择器

复合选择器：用逗号分隔

span,#gl,.hm{
	color: green;
	font-size: 45px;
		}

五、子元素选择器

#parent p {
    font-family: '隶书';
		}

六、伪类选择器

:hover	当鼠标悬停在目标对象上时
a:visited	超链接未被访问的样式
a:link	超链接未被访问的样式
a:active	激活超链接时
:root	匹配文档的根元素,页面的根元素是<html>，该选择器设置的样式对页面的所有元素均有效
:not(element)	匹配不是指定元素的元素
:only-child	匹配只有一个子元素的元素
:first-child	匹配父元素中的第一个子元素
:last-child	匹配父元素中的最后一个子元素
:nth-child(n)	匹配父元素中正数第n个元素
:nth-last-child(n)	匹配父元素中倒数第n个元素
:before	在匹配的元素之前添加指定的内容,要和content结合使用
:after	在匹配的元素之后添加指定的内