简单的CSS选择器-层级选择器 * css层级选择器有4个 * 1.后代选择器: $(div p),在祖先元素的所有后代(子孙)中,查询指定元素 * 2.子元素选择器: $(div > p),在父元素的所有子元素中进行查找 * 3.相邻选择器: $(.top + li),选择当前元素的直接同级相邻元素 * 4.兄弟选择器: $(.top ~ li),选择当前元素后面所有同级兄弟元素<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1简单的CSS选择器-层级选择器</title> </head> ...
家族: 祖宗,父辈,兄弟同辈关系 1.祖先元素: 包括多级后代的元素; 2.父级元素: 仅包括一级子元素的元素; 3.相邻元素: 拥有同一个父级的元素;1.后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素 语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔 格式: 祖先 目标 {声明}2.子选择器:先找到父级元素,再选择他下面所有直接后代元素 语法: 父级 > 目标元素 {样式声明}3.相邻选择器: 先确定同胞元素的起始点,选择...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1.基本选择器</title> <style type="text/css"> /*元素选择器*/ ul { padding: 0; margin: 0; width: 450px; border: 1px dashed #666; padding: 10px 5px; } ul:after { /*子块撑开父块*/ content:; /*在子元素尾部添加空内容元素*/ display: block; /*并设置为块级显示*/ clear:both; /*清除二边的浮动*/ } li { list-style: none; /*去掉默认列表项样式*...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2.属性选择器</title> <style type="text/css">/*元素选择器*/ul { padding: 0; margin: 0; width: 450px; border: 1px dashed #666; padding: 10px 5px; } ul:after { /*子块撑开父块*/ content:; /*在子元素尾部添加空内容元素*/ display: block; /*并设置为块级显示*/ clear:both; /*清除二边的浮动*/ } li { list-style: none; /*去掉默认列表项样式*/ ...
css伪类选择器/*元素选择器*/ul { padding: 0;margin: 0;width: 450px;border: 1px dashed #666;padding: 10px 5px;}ul:after { /*子块撑开父块*/content:; /*在子元素尾部添加空内容元素*/display: block; /*并设置为块级显示*/clear:both; /*清除二边的浮动*//*visibility: none; !*hidden也行*!*//*height: 0;*//*_height: 1%; !*针对IE*!*/}li { list-style: none; /*去掉默认列表项样式*/float: left; /*左浮动*/wi...
常用的有标签选择器、类选择器、ID选择器等等，其实还有很多，在接下来的文章中为大家详细介绍下这些选择器的种类及其使用首先说主要都有哪些先择器 1.标签选择器（如：body,p,p,ul,li） 2.类选择器（如：class="head",class="head_logo"） 3.ID选择器（如：id="name",id="name_txt"） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开） 6.继承选择器（如：p p,注意两选择器用空格键分开） ...
下面为大家带来一篇全面了解css 属性选择器。内容挺不错的，现在就分享给大家，也给大家做个参考。1.[class~="flower"]：选中有flower的class class="flower ss"class="ss flower"2.[class|=top]：选择以top为top开头的class需要有—相连 或者单独的top class="top-ss"class="top"class="top-ss"//选不中3.[class^="top"]: 选中以top为开头的不管有没有特殊符号相连，单独的top也可以class="top-ss"class="topss"4.[class$="top"...
这篇文章主要介绍了关于CSS3中not()选择器实现最后一行li去除某种css样式的代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在日常开发中经常会遇到在循环中的最后一个li不同于其他的li，要去除某种css样式，本文介绍的是利用CSS3新增的:not()伪类选择符，实现起来非常的方便，感兴趣的朋友们下面来一起看看吧。本文中用到的是CSS3新增的:not()伪类选择符，可以匹配不含有选择符的元素。假定有个列表，每个列表...
这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介，感兴趣的朋友跟随脚本之家小编一起看看吧一、CSS3 :default伪类选择器简介CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处于 selected 状态，此时这个 <option> 可以看成是处于默认状态的表单元素...
这篇文章主要介绍了关于CSS的选择器问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#footerid选择器，匹配所有id属性等于footer的元素实例：* { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#...
因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$(#3.22)打印只能获取到document.解决方案var array = id.split(.); var id = ; for(var i=0;i<array.length;i++){if(i == array.length-1){id += array[i];}else{id += array[i]+\\.;} }就是将.用\转义输出了。下面再用$(#id)就可以获取到标签了。相关推荐：Javascrip...
这次给大家带来选择器nth-child和:nth-of-type的使用详解，使用选择器nth-child和:nth-of-type的注意事项有哪些，下面就是实战案例，一起来看一下。先看一个简单的实例，首先是HTML部分：<section><p>我是第1个p标签</p><p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现的效果是一...
这次给大家带来hover选择器如何使用，hover选择器使用的注意事项有哪些，下面就是实战案例，一起来看一下。有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解:之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使...
今天本文主要和大家谈谈CSS中的几种选择器 ,需要的朋友可以参考下，希望能帮助到大家。1、通配符选择器通配符选择器用“*"号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素/*设置当前页面中所有标签的颜色为红色*/* {color: red; } 2、标签选择器标签选择器就是选择当前页面中相同名字的标签/*设置所有p标签的文字颜色为红色*/p {color: red; } 3、ID选择器id选择器使用"#"进行标识，后面紧跟id名{:; }这是标题 注意...