一、CSS选择器与权重[基础选择器、结构选择器、属性选择器、伪类选择器]

最新推荐文章于 2024-07-14 16:50:03 发布

黑日里不灭的light

最新推荐文章于 2024-07-14 16:50:03 发布

阅读量223

点赞数

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_46765649/article/details/126876158

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、选择器

1.基础选择器

选择器	功能
.intro	选择 class=“intro” 的所有元素
#firstname	选择 id=“firstname” 的元素
*	选择所有元素
div	选择所有的div元素
.div,p	选择所有的div和p元素

2.结构选择器

选择器	功能
div p	div父辈下面所有子孙辈的p标签（可以子孙重孙等等）
div>p	div父辈下面子辈的p标签（只可以子辈）

3.属性选择器

选择器	功能
h1[target]	h1标签里面写着target属性的内容
a[href*=“baidu”]	a标签里面的href属性里面有“baidu”这几个词
img[src$=“.jpeg”]	img标签里面的src结尾是“.jpeg”这几个词
a[href^=“https”]	a标签里面的href属性开头是“https”这几个词

<style>
        h1[target]{
            color: red;
        }
</style>
<body>
    <h1 target>995</h1> // 红色
    <h1 target>9355</h1>// 红色
    <h1 tar>9355</h1>// 默认的黑色
</body>

<style>
        a[href*="baidu"]{
            color: pink;
        }
</style>
<body>
    <a href="https://www.baidu.com">5555555555</a>
    <a href="https://www.qq.com">5555555555555555555</a>
</body>

4.伪类选择器

选择器	功能
a:hover	鼠标移动到a标签上展示的样式
input:focus	选择获得焦点的 input 元素(应用在input元素身上)展示的样式(需要写：`outline:none;`覆盖默认样式)
span:nth-child(2)	第二个span的样式
span:nth-child(2n)	第偶数个span的样式（n从0，1，2，…）
span:nth-child(2n+1)	第奇数个span的样式（n从0，1，2，…）
span::before	在span元素前面添加内容的样式（属于单独为span前内容加样式；其属于行内元素）
span::after	在span元素后面添加内容的样式（属于单独为span后内容加样式；其属于行内元素）

<style>
        .span::before {
            content: '⇰';
            display: block;
            color: red;
            background: yellowgreen;
			width: 100px;
			height: 100px;
        }
</style>
<body>
	<span class="span">996</span>
</body>

二、权重

解释：权重顾名思义，其就是上述标签的优先执行顺序

顺序：!important>行内>id>class>标签与伪元素>*

通俗：下述从上到下优先级降低

举例代码：<span id="span" class="span">996</span>
!important：   span{color:red !important;} // 此重点在!important并不在span标签（!important让某个属性优先级最高）
行内：          <span id="id" class="span" style="color:pink;">996</span>// 此重点style="color:pink;"
id:            #sapn{color:blue;}
class:         .span{color:yellow;}
标签与伪元素：   span{color:red;}
*:            *{margin:0;padding:0;}