新手学做网站这本书,旅游网站开发网站设计报告书,竞网做的网站怎么样,建设工程质量检测管理办法选择器是指通过一定的语法规则选取到对应的HTML标记#xff0c;然后给这个对应的HTML标记设置样式 1.标签选择器
写法:标签名{属性:值;属性:值}
标签选择器影响范围大#xff0c;一般用来做一些通用设置#xff0c;或用在层级选择器中。
举例#xff1a; div{color:red}…选择器是指通过一定的语法规则选取到对应的HTML标记然后给这个对应的HTML标记设置样式 1.标签选择器
写法:标签名{属性:值;属性:值}
标签选择器影响范围大一般用来做一些通用设置或用在层级选择器中。
举例 div{color:red} ...... div这是第一个div/div !--对应以上样式 -- div这是第二个div/div !--对应以上样式 --2.类选择器
写法:类名{属性:值;属性:值}
通过类名来选择元素一个类可应用于多个元素一个元素上也可以使用多个类应用灵活可复用是css中应用最多的一种选择器。
举例: .blue{color:blue} .big{font-size:20px} .box{width:100px;height:100px;background:gold} ...... div classblue..../div h3 classblue big box..../h3 p classblue box..../p3.层级选择器(后代选择器)
写法父选择器空格子选择器{属性值}
主要应用在标签嵌套的结构中层级选择器是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用减少命名同时也可以通过层级限制样式的作用范围。
举例: .con{width:300px;height:80px;background:green} .con span{color:red} .con .pink{color:pink} .con .gold{color:gold} ...... div classcon span..../span a href#classpink..../a a href#classgold.../a /div span..../span a href# classpink..../a 选择器 书写格式 标签选择器 标签名{属性:值} P{color:red} 类选择器 .类名{属性,值} .title{color:red} 层级选择器 .类名.子类名{属性:值} .title.subtitle{属性:值} 其他选择器了解通用选择器: *{属性:值} *{ color:red; } 子选择器 EF{属性:值};子元素选择器,匹配所有属于E元素的子元素F, 1.子元素选择器: 只是子元素 /*.boxp{ color: red; }*/相邻元素选择器 EF{属性:值}; 相邻元素选择器,匹配所有紧随E元素之后的元素(下面) /*相邻元素选择器 1.相邻下面的元素,不是上面 2.中间不能隔元素设置 */ .box divp{ color: red; }属性选择器 属性选择器:标签[属性class] 针对所有是class属性的元素标签[title“123”],匹配所有title属性值是123的元素标签[title^“1”],匹配所有title属性值是以1开头元素标签[title$“1”],匹配所有title属性值是以1结尾元素标签[title*“1”],匹配所有title属性值是有1的元素 /*1.只要有class属性*/ /*div[class]{ color:red; }*/ /*2.class12*/ /*div[class12abs]{ color:red; }*/ /*3.以class^12,以12开头的值*/ /*div[class^12]{ color:red; }*/ /*4.以class$12,以12结尾的值*/ /*div[class$12]{ color:red; }*/ /*5.以class*a,凡是有a的值*/ div[class*a]{ color:red; } 其他选择器1 1、E:nth-child(n)匹配元素类型为E且是父元素的第n个子元素2、E:first-child匹配元素类型为E且是父元素的第一个子元素3、E:last-child匹配元素类型为E且是父元素的最后一个子元素 /*1.第几个子元素; 标签类型和序号必须全部一致*/ /*.box div:nth-child(1){ color:red; }*/ /*倒着数 .box div:nth-last-child(2){ color:red; }*/ /*最后一个*/ /*.box div:last-child{ color:red; }*/ /*第一个 标签类型和序号必须全部一致*/ .box div:first-child{ color:red; } 其他选择器2 1.E:nth-of-type(n) 第几个E类型元素2.E:first-of-type 第一个E:last-of-type 最后一个 /*子元素中 第一个div标签*/ .box div:nth-of-type(3){ color: gold; } .box div:first-of-type{ color: red; } .box div:last-of-type{ color: green; }
