CSS_样式选择器

朴灿烈づ我的快乐病毒、 2023-10-06 16:48 7阅读 0赞

### 一、网页分成三个部分 ###

结构HTML  
表现css  
行为javascript

### 二、css层叠样式表 ###

内联样式表  
内部样式表  
外部样式表

<p style="color:blue;font-size:14px">hello<p>
    
    
    <style>
    	.box{
    		wigth:80px;
    		height:90px;
    	}
    <style>
    
    
    <link rel="stylesheet" href="url"/>

### 三、css基本语法 ###

css注释

/*这里是css注释的内容*/

选择器+声明块

p{
    	color:red;
    	font-size:40px
    ]

### 四、常用选择器 ###

元素选择器，p
    id选择器#byid
    class(类)选择器.byclass
    *通用选择器

### 五、复合选择器 ###

交集选择器div.red
    	-交集选择器
    		-作用:选中同时复合多个条件的元素
    		-语法:选择器1选择器2选择器3选择器n
    		-注意点:交集选择器中如果有元素选择器，必须使用元素选择器开头

### 六、选择器分组(并集选择器) ###

作用:同时选择多个选择器对应的元素
    	话法：选择器1，选择器2，选择器3，...,选择器n

h1,p{
    	color:red;
    }
    <h1>选择器分组</h1>
    <p>选择器分组</p>

### 七、子元素选择器 ###

作用:选中指定父元素的指定子元素  
语法:父元素 > 子元素

div.box > span{
    	color: orange;
    }
    
    <div class="box" >
    	我是一个div
    	<span>我是div中的子元素span</spang>
    	<p>我是div中的子元素p</p>
    </div>

### 八、后代选择器 ###

作用:选中指定元素内的指定后代元素
    语法:祖先  后代

div span{
    	color: skyblue
    } 
    <div class="box" >
    	<p>我是div中的后代元素p
    		<span>我是div中的后代元素span</span>
    	</p>
    </div>

### （附加）兄弟元素 ###

1、选择下一个兄弟  
–语法:前一个+下一个  
2、选择下边所有的兄弟  
–语法:兄~弟

p + span{
    	color:red;
    }
    p ~ span{
    	color: red ;
    }
    
    <div class="box" >
    	我是一个div
    	<span>我是div中的span元素</span>
    	<p>
    		<span>我是p元素中的span</span>
    	</p> 
    	<span>我是div中的span元素</span>
    	<span>我是div中的span元素</span> 
    	<span>我是div中的span元素</span>
    </div>

### 九、属性选择器 ###

属性名：选择含有指定属性的元素  
\[属性名|=属性值\] : 例如\[attr|=val\] 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）  
属性名=属性值：选择`含有指定属性和属性值`的元素  
属性名^=属性值：选择属性值以指定值`开头`的元素  
属性名$=属性值：选择属性值以指定值`结尾`的元素  
属性名\*=属性值：选择属性值中`含有某值`的元素

p[title]{
    	color:orange
    }
    p[title=abc]{
    	color:orange
    }
    p[title^=ab]{
    	color:orange
    }
    p[title$=c]{
    	color:orange
    }
    p[title*=abc]{
    	color:orange
    }
    <p title="abc">hello<>
    <p title="abcdef">hello<>

### 十、伪类选择器，前缀是一个冒号 `(:)` ###

ul >li:first-child		
    ul >li:last-child		
    ul >li:nth-child(数字n)	
    						
    ul >li:first-of-type		
    ul >li:last-of-type			
    ul >li:nth-of-type(数字n)	
    
    ul >li:not(:nth-child(数字n))	
    ul li:only-child 	
    
    <ul>
    	<span>span</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p>p</p>
    </ul>

### 十一、超链接选择器 ###

/* 表示没有被访问过的连接(正常的链接) */
    a:link{
    	color:blue
    }
    /* 表示被访问过的连接，visited只能修改链接的颜色 */
    a:visited{
    	color:orange
    }
    /* 表示鼠标移入的状态 */
    a:hover{
    	color:aqua
    	font-size:50px
    }
    /* 鼠标点击的状态 */
    a:active{
    	color:red
    	font-size:50px
    }

### 十二、伪元素选择器，前缀是两个冒号 `(::)` ###

/* 开头第一个字母 */
    <style>
       p::first-letter {
          
            font-size: 50px;
        }
    </style>
     <p>
        时间好比一把锋利的小刀若用得不恰当,会在美丽的面孔上刻下深深的纹 路,使旺盛的青春月复一月,年复一年地消磨掉;但是,使用恰当的话,它却能 将一块普通的石头琢刻成宏伟的雕像。
    </p>

![在这里插入图片描述][4b73ffb2512445c0b84bd180349daf49.png]

/* 第一行 */
    p::first-line{
    	background-color: #00FFFF;
    }

![在这里插入图片描述][b369394136ff43bb943357fe390fe6a0.png]

/* 选择，例如：鼠标选择复制 */
    p::selection{
    	background-color: #00FFFF;
    }

![在这里插入图片描述][fbcaca86abdb462fb5f89b8be53d784a.png]

/*元素的开始位置，必须结合content属性使用*/
    div::before{
    	content: abc;
    	color: red;
    }

![在这里插入图片描述][4addac381e3f4745b1f98eb29a02b4cc.png]

/*元素的结束位置，必须结合content属性使用*/
    div::after{
    	content: abc;
    	color: red;
    }

![在这里插入图片描述][3a2eb4b3848c4e0da975de969f2a6716.png]

### 十三、样式的继承 ###

后代元素继承祖先元素

并不是所有的样式都会继承  
比如：背景相关的，布局等相关的不会继承

### 十四、选择器的权重 ###

样式优先级  
内联样式 1,0,0,0  
id选择器 0,1,0,0  
类和伪类选择器 0,0,1,0  
元素选择器 0,0,0,1  
通配选择器 0,0,0,0  
继承的样式 没有优先级

比较优先级时，需要将所有选择器相加计算（分组选择器单独计算）  
优先级选择器相同时，使用后写的

可以在样式的后面添加!important后，优先使用该样式

p{
    	color:red !important
    }

[4b73ffb2512445c0b84bd180349daf49.png]: https://img-blog.csdnimg.cn/4b73ffb2512445c0b84bd180349daf49.png
[b369394136ff43bb943357fe390fe6a0.png]: https://img-blog.csdnimg.cn/b369394136ff43bb943357fe390fe6a0.png
[fbcaca86abdb462fb5f89b8be53d784a.png]: https://img-blog.csdnimg.cn/fbcaca86abdb462fb5f89b8be53d784a.png
[4addac381e3f4745b1f98eb29a02b4cc.png]: https://img-blog.csdnimg.cn/4addac381e3f4745b1f98eb29a02b4cc.png
[3a2eb4b3848c4e0da975de969f2a6716.png]: https://img-blog.csdnimg.cn/3a2eb4b3848c4e0da975de969f2a6716.png