暑期实践——7.5

最新推荐文章于 2024-11-01 15:19:31 发布

YY__111

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量34

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/YY__111/article/details/131623952

版权

文章详细介绍了CSS的语法基础，包括样式规则、基本选择符如标签、类和ID选择符，复合选择符如交集、并集和后代选择符，通用选择符如通配符，以及属性选择符和特殊选择符中的伪类和伪元素。这些内容构成了CSS选择器系统的核心，用于精准地定位和应用样式。

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

继7.4

四、CSS语法基础

1、CSS样式规则

（1）样式规则：

selector{属性:属性值[[;属性：属性值]···]}

（2）选择符的类型：包括基本选择符、复合选择符、通用选择符、属性选择符和特殊选择符。

2、基本选择符

（1）标签选择符

E

{

/*CSS代码*/

}

（2）class类选择符

<style type="text/css">



</style>

（3）id类选择符

<style type="text/css">



</style>

3、复合选择符

（1）“交集”选择符

<html>
<head>
<meta charset="utf-8">
<title>“交集”选择符示例</title>
   <style type="text/css">
       p{
           font-size: 14px;
           color: #00F;
           text-decoration: underline;
       }
       .myContent{
           font-size: 20px;
           text-decoration: none;
           border: 1px solid#C00;
       }
   </style>
</head>

<body>
   <p>1.“交集”选择符示例</p>
   <p class="myContent">2.“交集”选择符示例</p>
   <p>3.“交集”选择符示例</p>
</body>
</html>

（2）“并集”选择符

<html>
<head>
<meta charset="utf-8">
<title>“并集”选择符示例</title>
   <style type="text/css">
       h1,h2,h3{
           color: purple;
       }
       h2.special,#one{
           text-decoration: underline;
       }
   </style>
</head>

<body>
   <h1>示例文字h1</h1>
   <h2 class="special">示例文字h2</h2>
   <h3>示例文字h3</h3>
   <h4 id="one">示例文字h4</h4>
</body>
</html>

（3）“后代”选择符

<html>
<head>
<meta charset="utf-8">
<title>“后代”选择符示例</title>
   <style type="text/css">
       p span{
           color: red;
       }
       span{
           color: blue;
       }
   </style>
</head>

<body>
   <p>嵌套使用<span>CSS标签</span>的方法</p>
   嵌套之外的<span>标签</span>不生效
</body>
</html>

4、通用选择符

（1）通配符选择符

*{CSS代码}

（2）通用兄弟元素选择符E~F

E~F：{att}

5、属性选择符

（1）E[att]属性名选择符

E[att]

{

/*CSS代码*/

}

（2）E[att=val]属性值选择符

E[att=val]

{

/*CSS代码*/

}

（3）E[att~=val]属性值选择符

E[att~=val]

{

/*CSS代码*/

}

（4）E[att|=val]属性值选择符

E[att|=val]

{

/*CSS代码*/

}

（5）E[att^=val]属性值选择符

E[att^=val]

{

/*CSS代码*/

}

（6）E[att$=val]属性值选择符

E[att&=val]

{

/*CSS代码*/

}

（7）E[att*=val]属性值选择符

E[att*=val]

{

/*CSS代码*/

}

6、特殊选择符

（1）伪类选择符

<html>
<head>
<meta charset="utf-8">
<title>伪类示例</title>
   <style type="text/css">
       a:hover{
           background-color: #f6c;
           border: 1px solid#f00;
           font-size: 24px
       }
   </style>
</head>

<body>
   <p>乾坤大挪移；鼠标指向<a href="#">变脸</a>看发生了什么变化</p>
</body>
</html>

（2）伪元素

选择符：伪元素{属性：属性值;}

<html>
<head>
<meta charset="utf-8">
<title>伪元素示例</title>
   <style type="text/css">
       h4:first-letter{
           color: #ff0000;
           font-size: 36px;
       }
       p:first-line{
           color: #ff0000;
       }
       h5:before{
           font-size: 20px;
           color: #ff0000;
           content: "此处使用了:before，";
       }
       h5:after{
           font-size: 20px;
           color: #ff0000;
           content: "，此处使用了:after";
       }
   </style>
</head>

<body>
   <h4>此处h4标签内的文字使用了伪元素:first-letter，将特殊的样式附加到文本的第一个字。</h4>
   <p>此p标签内的文字使用了伪元素:first-line，将特殊的样式附加到文本的首行。</p>
   <h5>此处文本前后有不同于此句的样式，它是通过伪元素实现的</h5>
</body>
</html>