ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

11-1 css属性选择器

2021-04-13 15:03:42  阅读:27  来源: 互联网

标签:11 24 color 标签 css 选择器 red


一 基础选择器

标签选择器:选择的标签的‘共性’,而不是特性
div{}、ul{}、ol{}、form{}
类选择器:.box{}
id选择器:#box{} 只能选择器的特性,主要是为了js
*通配符选择器:重置样式

例子:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css学习</title> 6     <style> 7         /*#标签选择器*/ 8         p{ 9             color: red;10         }11         /*类选择器*/12         .c1{13             color:green;14         }15         /*id选择器*/16         #d2{17             color: yellow;18 19         }20     </style>21 </head>22 <body>23 <div>div标签</div>24 <div id="d2">div标签2</div>25 <p class="c1">p标签</p>26 <span class="c1">我是span标签</span>27 <span>我是span2号</span>28 29 </body>30 </html>

二 高级选择器

1 后代选择器   子带选择器(儿子选择器) 毗邻选择器  弟弟选择器  

例子:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>高级选择器</title> 6     <style> 7         /*后代选择器(儿子,孙子,子子孙孙)*/ 8         div a{ 9             color: red;10         }11         /*儿子选择器*/12         div>a{13             color:blue14         }15         /*毗邻选择器,就是a和span紧挨着*/16         a+span{17             color:yellow18         }19         /*弟弟选择器,相当于这个标签下面的所有标签都生效*/20         a~span{21             color:aqua;22         }23     </style>24 </head>25 <body>26 <div>27     <div>28         <p>29             <a>我是孙子p标签</a>30         </p>31     </div>32     <a>我是儿子p标签</a>33     <span>我是span1号</span>34     <span>我是span2号</span>35 36 </div>37 38 39 </body>40 </html>

2 交集选择器

交集选择器:第一个选择器是标签选择器,第二个选择器是类选择器

form input.active{
                width:200px;
            }

3 伪类选择器

例子:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>伪类选择器</title> 6     <style> 7         /*去除超链接的下划线*/ 8         a{ 9             text-decoration:none;10         }11         /*鼠标放到超链接上线显示的样式*/12           a:hover{13             color: red;14 15                 }16 17         /*设置第一个首字母的样式*/18         p:first-letter{19             color: red;20             font-size: 30px;21 22         }23         /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/24         p:before{25             content: 'alex';26         }27         /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/28 29         p::after{30 31             /*解决浮动带来的问题*/32             content:'.';33             display: block;34             /*width: 100px;35             height: 100px;36             background-color: red;*/37             visibility: hidden;38             height: 0;39         }40     </style>41 </head>42 <body>43 <p>我是p标签1</p>44 <a href="http://www.baidu.com">百度一下</a>45 46 </body>47 </html>

三 样式权重问题

1 行内的样式>内接样式>外接

例子:

 1 <!--外接式和导入式只能同时存在一个--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5     <meta charset="UTF-8"> 6     <title>css引入方式</title> 7     <!--文件类型内接式--> 8     <style type="text/css"> 9         p{10             color: green;11             width: 100px;12             height: 100px;13         }14     </style>15     <!--外接式,不用写style-->16     <link rel="stylesheet" href="./css/index.css">17     <!--导入式-->18     <style type="text/css" media="screen">19         @import url('./css/index.css');20 21     </style>22 </head>23 <body>24 <div style="color:red;">25     我是一个div26 </div>27 <p>段落</p>28 <a href="#">百度</a>29 30 </body>31 </html>

2 权重问题比较

100>010>001
id>类>标签

例子:

 1 <!--优先级大小--> 2 <!--id class 标签 三者依次从左到右的个数,那个左边的数字大,那个就会生效,所以pa生效--> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6     <meta charset="UTF-8"> 7     <title>选择器</title> 8     <!--下面这个是把默认的样式重置--> 9     <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">10     <style type="text/css" media="screen">11         /*1 0 0*/12         #pa{13             color: yellow;14 15         }16         /*0 1 0*/17         .app{18             color:red;19         }20         /*0 0 1*/21         p{22             color: blue;23         }24 25     </style>26 </head>27 <body>28 <div id="box">29     <div>30         <div>31             <div class="child">32                 <p id="pa" class="app">猜猜我是什么颜色</p>33 34             </div>35         </div>36     </div>37 38 </div>39 <p>段落</p>40 41 </body>42 </html>

 四 样式继承问题

继承来的属性权重为0,如果权重都为0,谁描述的近谁优先,就是写的越详细越优先

继承和权重
记住:有一些属性是可以继承下来 : color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承。

例子:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>继承</title> 6     <style> 7         *{ 8             padding: 0; 9             margin: 0;10         }11         div{12             width: 200px;13             height:100px;14             background-color: green;15             color:red;16             font-size: 20px;17             text-align:center;18             line-height: 100px;19             /*设置行高可以让文字居中显示*/20         }21     </style>22 </head>23 <body>24 <div>25     <p>德国</p>26 </div>27 28 29 </body>30 </html>

 

标签:11,24,color,标签,css,选择器,red
来源: https://blog.51cto.com/825536458/2703344

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有