网页三剑客-css选择器

最新推荐文章于 2024-08-10 16:57:53 发布

AdaTina

最新推荐文章于 2024-08-10 16:57:53 发布

阅读量280

点赞数

分类专栏： html 文章标签： css3

本文链接：https://blog.csdn.net/tainqiuer123/article/details/123598862

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的引入方式，包括行内样式、链接式和嵌入式。接着，阐述了基本选择器、后代及子代选择器、与或选择器、兄弟选择器和属性选择器的使用。此外，还讲解了伪类选择器和元素样式继承的概念。最后，讨论了选择器优先级的规则。文章通过实例展示了各种选择器的效果，有助于理解CSS在网页样式控制中的应用。

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

1、CSS的引入

①行内样式

<p style="color:red;">设置字体颜色为红色</p>

②引入样式文件，链接式

③嵌入式

<style>

p{

color:blue;

}

</style>

2、CSS的基本选择器

/*标签选择器*/
标签名{属性名:属性值;属性名2:属性值2;}
/*类选择器*/
.类名{属性名:属性值;属性名2:属性值2;}
/*id选择器*/
#id名{属性名:属性值;属性名2:属性值2;}
/*通配选择器*/
*{属性名:属性值;属性名2:属性值2;}

3、CSS后代子代选择器

.C1 C2 C3{
#C3是c1的后代选择器
#c2是c1的子代选择器
}

4、CSS与或选择器

/*与选择器*/
p#id{
color:red;
}
/*或选择器*/
p.c1,#i1{
color:lightpink;
}

5、CSS兄弟选择器


        /*毗邻选择器即紧挨着*/
       #i1 + div.c1{
           color: red;
       }

   

        /*兄弟选择器*/
        #i1 ~ div.c2{
           color: red;
        }
        #i1 ~ div{
           color: red;
        }

    
<p id="i1">item0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>


</body>
</html>

6、CSS属性选择器

E[attr]#存在该属性的E元素
E[attr=value]#存在attr属性值为value的E元素
E[attr~=value]#attr属性值用空格隔开的存在value值的E元素
E[attr^=value]#attr属性值以value开头的E元素
E[attr$=value]#attr属性值以value结尾的E元素
E[attr*=value]#attr属性值包含value的E元素

 /*属性选择器*/
        [type="text"]{
            border: 1px solid red;
        }

7、伪类选择器

/*未选择过的a链接*/
a:link{
          color: red;
       }
/*点击过的a链接*/
a:visited{
          color: coral;
        }
/*鼠标悬浮时的a链接*/
a:hover{
          color: blue;
       }
/*活动链接*/
a:active{
          color: rebeccapurple;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*父元素第一个子元素的每个元素*/
        .c1 p:first-child{
            color: red;
        }

        .c1 div:last-child{
            color: red;
        }
       /*在每个内容之后插入内容，一般起修饰效果*/
        p#i1:after{
            content:"hello";
            color:red;
            display: block;
        }

    </style>


</head>
<body>

<div class="c1">
    <p>item1</p>
    <p>item1</p>
    <div>item1</div>
    <p>item1</p>
</div>

<p id="i1">p标签</p>

</body>
</html>

8、元素样式继承

子元素继承父元素层级继承。

以下是可继承的样式：

文本相关属性
font-family	font-size	letter-spacing	line-height
font-style	font-variant	text-align	text-indent
font-weight	font	text-transform	word-spacing
color	direction
列表相关属性
list-style-image	list-style-position	list-style-type	list-style
表格和其他相关属性
border-collapse	border-spacing	caption-side	empty-cells
cursor

9、选择器优先级

!important>行内样式>id>class>元素

同优先级按从上到下的顺序执行覆盖

AdaTina

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页三剑客-css选择器

1、CSS的引入①行内样式<p style="color:red;">设置字体颜色为红色</p>②引入样式文件，链接式<link rel="stylesheet" herf="ccc.css">③嵌入式<style>p{color:blue;}</style>2、CSS的基本选择器/*标签选择器*/标签名{属性名:属性值;属性名2:属性值2;}/*类选择器*/.类名{属性名:属性值;属性名2
复制链接

扫一扫

专栏目录