css选择器

css的样式可分为： 行内式： <div style="color: red;"> 行内样式 </div> 内部式： 在head标签里写 <style> div { color: red; } </style> 外部式： 引用外部的css <link rel="stylesheet" href="css地址"> css选择器 标签选择器： div { color: red; } 类选择器： .nav { color: red; } id选择器： #nav { color: red; } css外观属性总结 属性 表示 注意 color 颜色 通常使用十六进制如#fff line-height 行高 控制行与行之间的距离 text-align 水平对其 可以设定文字水平的对其方式 text-indent 首行缩进 首行缩进2个字符间距 text-decoration 文本修饰 添加下划线underline 复合选择器： 选择器 作用 使用情况 特征 隔开符号及用法 后代选择器 用来选择元素后代 较多 是选择所有的子孙后代 符号是空格 .nav a 子代选择器 选择最近一级元素 较少 只选择亲儿子 符号是> .nav>p 交集选择器 选择两个标签交集部分 较少 即是又是 没有符号 p.one 并集选择器 选择某些相同样式的选择器 较多 可以用于集体声明 符号是逗号 .nav,

Jquery: javaScript脚本包，它里面有一堆一堆的封装好的方法， 我们学习的就是这些方法如何使用 是JS的升级版 $是jquery特有的，取元素的时候提示一下 文件类型： 1、不带min的，是源文件，可以看得懂，但是文件较大， 加载速度慢。 2、带min的，编译后的文件，已经没法看懂了，但是文 件较小，加载速度快。 一般咱使用带min的文件就可以了，不需要看懂它的代码。 一、选择器： 1、基本选择器：跟css很像。 1)基本 id选择器：# class选择器：. 标签选择器：标签名 2)组合 并列：用,隔开 后代：用空格隔开 2、过滤选择器 1)基本过滤： 首尾：首个first，尾个last 等于：任意个 :eq（索引号）ps：$(".div").eq(1)或是$(".div:eq(1)") 不等于：大于是:gt(索引号)，小于是:lt(索引号)，排除是:not(选择器) ps:$(".div:gt(1)"),$(".div:not(#div1)") 奇偶，按索引，从0开始：奇数 :odd 是把奇数排除了,偶数 :even 是把偶数排除了 2）属性过滤： 属性名过滤： [属性名] ps:$(".div:[aaa]") 属性的明值对过滤：[属性名=值]，[属性名!=值] 3）内容过滤 文字 :contains("字符串")包含了某一段字符串 子元素 :has("选择器")

先来说说我为啥会注意到这个，最近跟着B站的blue老师敲JS，写到一个小东西时，我发现我逻辑上跟老师的代码几乎一样，怎么我的.active一直只能加载font-size，其他属性一概忽略呢？整了好久，拿着老师的代码换，发现就能全部加载，我简直怀疑人生，后来百度了一下，一句“可能被全局属性覆盖了”，我才想起好像是有优先级这么回事，赶紧改了改，发现好了T_T，就这么点破事折腾我半天时间，怪我自己太菜了！ 废话不多说，我先贴代码为敬！做的是一个类似于广告图片轮询的效果，最近学JS总跟CSS杠上，才知道CSS也要好好学扎实，用起来才顺手。 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style > * { margin : 0 ; padding : 0 ; } li { list - style : none ; } img { border : none ; } body { background : #ecfaff ; } #div1 { position : relative ; width : 470 px ; height : 150 px ; border : 1 px solid #cccccc ;

一 注意： 1.DOM对象：通过原生js获取的DOm对象（DOm树上的节点就是，比如<li></li>） 2.jQuery对象：通过jQuery 选择器获取的 jQuery对象智能用jQuery中封装的方法，不能使用DOm对象的方法 同理 DOm也是一样 二 选择器相互更换： 1.DOM转换成JQ对象 $(“DOM对象”) 2.JQ对象转换成DOM对象 $("div")[index] 或者 $("div").get(index) 三 基本选择器 1. #id > $("#id名"), 2. .class > $(".class名") 3. element标签 > $("div") 4.群组选择器 > $("div,p") 5.* > $("*") 四 后代选择器 子元素选择器 紧邻的同辈选择器 1.$("#id li"), 这个是所有的后代 2. $("#id > li"), 这个是只查到儿子为止 3. $("#id + p ") 紧挨着#id 后面的p元素 4. $("#id ~ p ") 在#id 后面的同辈兄弟p元素 五.表单元素选择器 <form> <input type="text" /> <input type="checkbox"checked /> 复选框 <input type="radio" /> 单选框 <input type="image" />

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ​ JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ​ 链式编程:可以.的形式实现多个功能 ​ 隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用 ​ 更好的兼容性:JQuery自动做了浏览器的兼容问题 ​ JQuery的引入: ​ 压缩(XXX.min.js)与未压缩 // 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高 // 2. 未压缩的文件占据空间,不利于网络传输,可读性高 引入 :导入文件一定要在自定义script标签之上 <!-- 导入文件一定要在自定义script标签之上 --> <!-- 引入Jq文件 --> <script src="jquery3.4.1.min.js"></script> <script> // 自定义JQ/js代码 </script> //在控制台输入jQuery //结果如下,则表示引入JQ成功 ƒ (e,t){return

一 jQuery是什么？ ［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 ［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 ［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 ［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 二 什么是 jQuery 对象？ jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是是jQuery独有.如果一个对象是jQuery对象,那么它就可以用jQuery里的方法: $("#test").html(); $("test").html() 意思是指:获取ID为 test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById("test").innerHTML;

这里说一下常用的CSS扩展选择器。 选择所有元素 * 选择器选择所有元素。 * 选择器也可以选择另一个元素内的所有元素。 使用格式： * 选择器名称 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例： 选择所有元素，并设置其背景色。 Google浏览器中打开，查看效果： 并集选择器 element,element 几个元素具有相同的样式，用逗号分隔每个元素的名称。 使用格式： element1,element2 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例： 选择所有<p>元素和l<h1>元素。 Google浏览器中打开，查看效果： 子选择器 element element选择器用于选择元素内部的元素。 使用格式： element1 element2 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例： 选择<div>元素内的所有<p>元素。 Google浏览器中打开，查看效果： 父选择器 element>element 选择器用于选择特定父元素。 注意: 元素没有被选中是不能直接指定父级的子元素。 使用格式： element1>element2 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例： 选择所有父级是 <div> 元素的 <p> 元素。 Google浏览器中打开，查看效果： 属性选择器 [

基础选择器的分类 id选择器：选择具体的id属性值的元素 元素选择器：选择具有相同标签名称的元素 类选择器：选择具有相同的class属性值的元素。 id选择器 id选择器，是根据标签的id属性值选择对应的标签的。 格式： #id值 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例：定义两个p标签，且标签的id属性值不同，然后用CSS定义p标签的内容如何显示。 Google浏览器中打开，查看效果： 元素选择器 元素选择器是根据标签的名称来选择对应的标签的。 格式： 标签的名称{ 属性名1:属性值1; 属性名2:属性值2; ... } 举例：定义两个div标签，通过元素选择器定义p标签的内容如何显示。 Google 浏览器中打开，查看效果： 注意：id选择器优先级高于元素选择器 类选择器 类选择器，是根据标签的class属性值选择对应的标签的。 格式： .class值 { 属性名1:属性值1; 属性名2:属性值2; ... } 举例：定义两个p标签，且标签的class属性值不同，然后用CSS定义p标签的内容如何显示。 Google 浏览器中打开，查看效果： 注意：类选择器选择器优先级高于元素选择器 来源： https://www.cnblogs.com/liyihua/p/12364940.html

css 介绍 CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML 元素,从而实现美化HTML网页。 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞 生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容, 表现形式完全交给CSS,html文档变得更加简洁。 基本语法 格式: 选择器{属性:值;属性:值;属性:值;....} css页面引入方法一 内联式:通过标签的style属性,在标签上直接写样式。 css页面引入方法二 嵌入式:通过style标签,在网页上创建嵌入的样式表。 外联式:通过link标签,链接到外部样式表到页面中。 css简单案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- css样式声明：写在head标签里面 1.div 是最简单的标签选择器 ---> <style type='text/css'> div{ border: 1px solid red; width: 700px; height: 500px; } </style> </head> <body> <div> <ul> <li>1</li> <li>2<

CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。 选择器 示例 示例说明 CSS . class .intro 选择所有class="intro"的元素 1 # id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<div>元素和<p>元素 1 element element div p 选择<div>元素内的所有<p>元素 1 element > element div>p 选择所有<p>元素的父级<div>元素 2 element + element div+p 选择所有紧接着<div>元素之后的<p>元素 2 [ attribute ] [target] 选择所有带有target属性元素 2 [ attribute = value ] [target=-blank] 选择所有使用target="-blank"的元素 2 [ attribute ~= value ] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2 [ attribute |= language ] [lang|=en] 选择一个lang属性的起始值="EN