【css】引入方式、选择器、权重

引入方式

内部样式

<style>/*css样式*/</style>

行内样式

<div style="css样式"></div>

外部引用

<link rel="stylesheet" href="样式文件路径">

选择器

基本选择器

元素选择器

<span>内容</span>
<style>span {color: red}</style

id选择器

id名是唯一的，不可重复

<span id="s1">内容</span>
<style>#s1 {color: red}</style>

类选择器

name名可以重复

<span class="s1">内容</span>
<style>.s1 {color: red}</style>

组合选择器

多选

<style>span,p{color: red}</style>
<span>内容1</span>
<p>内容2</p>

后代选择器

<span><p>内容</p></span>
<style>span p {color: red}</style>

直接子元素选择器

<span><p>内容</p></span>
<style>span>p {color: red}</style>

相邻兄弟元素选择器

<span><p>内容</p></span>
<style>span+p {color: red}</style>

后兄弟元素选择器

<span><p>内容</p></span>
<style>span~p {color: red}</style>

属性选择器

<span title="sp">内容</span>
<style>
    [title] {color: red}
    [title="sp"] {color: #fb6400}
    span[title] {color: blue}
    span[title="sp"] {color: blueviolet}
</style>

伪类选择器

<style>
	a:link{color: green} /*未点击时*/
	a:active{color: yellow} /*点击时样式*/
	a:visited{color: black} /*访问后样式*/
	a:hover{color: red} /*悬浮样式*/
    div:hover{background-color: red} /*div悬浮样式*/
    input:focus{background-color: red} /*获取焦点时样式*/
</style>
<a id="s1" href="https://www.baidu.com">链接</a>
<div class="c1"></div>
<input type="text">

伪元素选择器

first-letter

向文本的首行设置特殊样式。

<style>div:first-letter{color: red;}</style>
<div>内容</div>

before

在元素的内容前面插入新内容。

<style>div:before{content: "加入";color: red;}</style>
<div>内容</div>

after

伪元素可以在元素的内容之后插入新内容。

<style>div:after{content: "加入";color: red;}</style>
<div>内容</div>

权重

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

<style type="text/css">
    #content div.main_content h2{
        color:red;   
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->