11-1 css属性选择器

时间 2021-04-13

标签 css html app ide 布局学习 url spa orm htm 栏目 CSS 繁體版

原文原文链接

一基础选择器css

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

例子：app

 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>

二高级选择器ide

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 交集选择器url

交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器spa

form input.active{
                width:200px;
            }

3 伪类选择器orm

例子：htm

 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>