CSS 样式的使用方式、选择器

网页制作 2024/11/9 佚名

3 2 1

在html中使用css的三种方式：

1、行内样式：同过元素的style属性来设置

<p style="font-size:20px; color:red">hello</p>

属性之间分号隔开。

2、内部样式：在<head>的<style>元素中定义css样式

<style>
    p{font-size: 20px;color: red}    
</style>

3、外部样式：在css文件中定义css样式，然后在html的<head>中通过<style>引入外部样式表

p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />

css文件中不加<style>标签，直接写css样式就ok。

内部|外部样式的语法：选择器 {属性名1：属性值1; 属性名2：属性值2}

三种方式，属性之间都是分号隔开。

css注释：

/* 注释 */

css选择器

1、元素选择器、类选择器、id选择器

p{color: red}  /* 元素选择器，给所有p元素设置样式*/
.red{color: red}  /* 类选择器，在元素中通过class="red"引用 */
#user{color: red}  /* id选择器，在元素中通过id="user"引用，最多只能使用1次 */

2、通用选择器、分组选择器

*{color: red}  /*通用选择器，给所有元素设置样式 */
h1,.red{color: red}  /*分组选择器，同时给多个选择器设置相同的样式 */

3、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器

div p{color: red}  /*后代选择器，选择<div>中所有的<p>元素，不管<p>是<div>的儿子、孙子、重孙......只要<p>是<div>的后代就行*/
div>p{color:red}  /*子选择器，选择的是<p>，<p>必须是<div>的儿子*/
div+p{color:red}  /*相邻兄弟选择器，选择的是<p>，<p>必须是<div>后面的第一个兄弟元素 */
div~p{color:red}  /*后续兄弟选择器，选择<div>后面所有的<p>，<p>必须是<div>的兄弟元素 */

4、属性选择器

[attr]  /*含有attr属性*/
[attr=value]  /*有attr属性，且属性值为value*/
[attr^=value]  /*有attr属性，且属性值以value开头(只要value是开头就ok*/
[attr|=value]  /*有attr属性，且属性值以value开头、value和后面部分以-连接 */
[attr$=value]  /*有attr属性，且属性值以value结尾*/
[attr*=value]  /*有attr属性，且属性值中含有value（含有就ok）*/
[attr~=value]  /*有attr属性，且属性值中含有单词value，value要是一个完整的单词（和其它单词以空格隔开）*/

属性选择器常和其它选择器一起使用，比如:

button[type="button"]  /*选择所有type="button"的<button> */

属性选择器中，attr不能加引号，value可引可不引。

5、<a>链接

a:link   /*所有未访问过的<a>*元素/
a:hover  /*鼠标移到<a>元素上*/
a:active  /*点击<a>时*/
a:visited  /*所有访问过的<a>*/

这4个设置的是<a>元素不同时期的样式。

:hover这个伪类所有元素都可以使用。

6、表单元素

:focus   /*聚焦时*/
:checked   /*选中时*/
:enabled   /*可用的*/
:disabled  /*禁用的*/
:read-only  /*只读*/

可单独使用，也可配合表单元素使用：

:focus{  }
input:focus{  }

7、空元素

:empty{  }   /*所有的空元素*/
p:empty{  }  /*所有空的<p>元素*/

空元素指的是没有任何属性、没有内容的元素，示例：<p></p>。

8、非

:not(p) /*选择不是<p>的所有元素*/

()中尽量只使用元素选择器，使用其他选择器容易出错。

9、type系列

p:first-of-type  /*同级别中的第一个<p>*/
p:nth-of-type(n)   /*同级别中的第n个<p>*/
p:nth-last-of-type(n)   /*同级别中的倒数第n个<p>*/
p:last-of-type   /*同级别中的最后一个<p>*/
p:only-of-type   /*同级别中唯一的一个<p>*/

示例：

p:first-of-type{color:red}

<body>
    <h1></h1>
    <p></p>   <!--选中-->
    <p></p>
    <div>
        <h2></h2>
        <p></p>  <!--选中-->
        <p></p>
    </div>
</body>

只要是同级别的<p>中的第一个即可。

10、child系列

p:first-child   /*匹配的是<p>，<p>要是其父元素的第一个子元素*/
p:nth-child(n)  /*匹配的是<p>，<p>要是其父元素的第n个子元素*/
p:nth-last-child(n)  /*匹配的是<p>，<p>要是其父元素的倒数第n个子元素*/
p:last-child  /*匹配的是<p>，<p>要是其父元素的最后一个子元素*/
p:only-child  /*匹配的是<p>，<p>要是其父元素的唯一一个子元素*/

示例：

p:first-child{color:red}

<body>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p>  <!--选中-->
        <p></p>
    </div>
</body>

11、首字、首行

p:first-letter /*<p>元素的第一个字符*/
p:first-line /*<p>元素的第一行*/

12、:before :after

p:before{   /*在<p>的前面添加内容*/
    content:"hello "
}
p:after{   /*在<p>的后面添加内容*/
    content:" byebye"
}

添加的内容默认是行内元素，但会和<p>在同一行显示（相当于把添加的内容放到<p>元素内的最前|后面），添加的并不是一个真正的元素，所以叫做伪元素。

可以设置为块级，添加的内容会作为块级元素显示：

p:before{   /*在<p>的前面添加内容*/
    content:"hello ";
    display: block
}
p:after{   /*在<p>的后面添加内容*/
    content:" byebye";
    display: block
}

可以给添加的元素设置样式：

p:before{   
    content:"hello ";   /* 属性之间分号分隔 */
    display: block;   /*给添加的内容设置样式*/
    font-size: 20px;
    color:red
}

添加图片：

p:before{   
    content:"";   /* content属性是必需的，不添加文本时可以设置为空串 */
    display: block;  /*必须要设置为块级，要设置宽、高，添加的背景图片才能显示出来*/
    width: 100px;
    height: 100px
    background-image: url("1.png");
}

清除浮动：

p:before{   
    content:"";   
    clear: both
}

伪元素可以使用单冒号，也可以使用双冒号。

:before   <=>   ::before
:after  <=>  ::after

带冒号的选择器中，有4个伪元素:first-letter、:first-line、:before、:after，其余都是伪类。

选择器可以搭配使用。

在同种方式中（都是内部|外部样式），优先级id选择器最高，类选择器次之，属性选择器最低。（定位越具体、详细的，优先级越高）

如果使用了相同的css属性，优先级行内最高，内部、外部优先级相同，看<head>中<link />、<style>的顺序，后面的优先级更高（后渲染的样式会覆盖之前的样式）。

总结

以上所述是小编给大家介绍的CSS 样式的使用方式、选择器 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

CSS,样式,选择器

标签：

CSS,样式,选择器

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“CSS 样式的使用方式、选择器”

CSS 样式的使用方式、选择器

暂无“CSS 样式的使用方式、选择器”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

CSS 样式的使用方式、选择器

CSS,样式,选择器

css中的计算函数calc在网站布局中一个示例

CSS实现宽高等比自适应容器的方法

评论“CSS 样式的使用方式、选择器”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

CSS 样式的使用方式、选择器

CSS,样式,选择器

css中的计算函数calc在网站布局中一个示例

CSS实现宽高等比自适应容器的方法

评论“CSS 样式的使用方式、选择器”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存