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

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

在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 样式的使用方式、选择器 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：css中的计算函数calc在网站布局中一个示例下一篇：CSS实现宽高等比自适应容器的方法

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设