css选择器 | 易学教程

前端学习笔记 CSS基础

阅读更多关于前端学习笔记 CSS基础

CSS是一种分层设计的思想，把网页的颜色、大小、字体布局什么什么的全剥离到Style标签里面，这样一来 html中就只用关心提供什么内容就行了。 1、语法第一种，通过选择标签，在style标签内设置内容： <style> p{ color:red; } </style> <p>这是一个P</p> <p>这是一个P</p> <p>这是一个P</p> <p>这是一个P</p> 第二种，直接在元素上面增加style属性： <p style="color:red">这是style为红色的</p> <p>这是一个没有style的p</p> 2、选择器选择器主要分为三种，分别是 one 元素选择器，通过标签名选择元素，直接打标签名就行。 two id选择器，通过自己设置的id选择元素，id是唯一的哒。格式为在设置的id前加上# three 类选择器，如果有多个元素需要设置同样的css的时候，就可以给他们设置相同的类名，然后一次性设置好。格式为设置的类名前加个 . 如果需要更准确的选择，可以用元素名加上类名的方式，进行精准选择。 3、注释就像c语言的块注释一样 /* */ 4、尺寸就width呗值可以是百分比也可以是具体像素。 5、背景 background-color 背景颜色示例代码 background-image:url(imagepath); 图片做背景示例代码

css基本介绍

阅读更多关于 css基本介绍

目录 CSS初识构造规则注意样式表的定义和使用行内式（内联样式）内部样式表外部样式表（外链式）选择器标签选择器（元素选择器）类选择器 id选择器通配符选择器伪类选择器链接伪类选择器结构（位置）伪类选择器目标伪类选择器复合选择器交集选择器并集选择器后代选择器子元素选择器属性选择器伪元素选择器标签选择模式块级元素(block-level) 行内元素(inline-level) 行内块元素（inline-block）标签显示模式转换 display CSS三大特性层叠性继承性优先性特殊性(Specificity) CSS初识 CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。构造规则样式表的每个规则都有两个部分，即选择器(selection)和声明(declaration)。注意选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以“键值对”的形式出现。属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文“:”连接。多个“键值对

CSS三大特性

阅读更多关于 CSS三大特性

CSS 三大特性层叠继承优先级是我们学习CSS 必须掌握的三个特性。 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠 CSS继承性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）。想要设置一个可继承的属性，只需将它应用于父元素即可。 CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之

CSS

阅读更多关于 CSS

一什么是CSS 1.1 什么是CSS 层叠样式表(Cascading Style Sheets)：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言； CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化； CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力（字体、边框、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…） 1.2 如何学习CSS CSS是什么 CSS怎么用（快速入门） CSS 选择器（重点 + 难点）美化网页（文字，阴影，超链接，列表，渐变….）盒子模型网页基础~ 浮动应用~ 定位网页动画（特效效果） 1.3 发展史 1.CSS1.0 2.CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO 3. CSS2.1 浮动，定位 4. CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ 1.4 快速入门：三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种导入方式</title>  <style> h1 { color :

css学习(1)

阅读更多关于 css学习(1)

一.标签选择器标签 {属性：值;} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*标签选择器*/ div{ font-size:50px; color: green; background-color:yellow; width:300px; height:200px; } p{ color: black; font-size: 60px; } </style> </head> <body> <div>标签选择器1</div> <div>标签选择器2</div> <p>标签选择器3</p> <p>标签选择器4</p> <div>标签选择器5</div> </body> </html> 标签选择器二.类选择器 .自定义类名{属性:值; 属性:值；} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ font-size:40px; color: #ff0000; width: 400px; height: 300px;

css选择器以及权重的优先级

阅读更多关于 css选择器以及权重的优先级

** 选择器类型 ** 1、ID　　#id 2、class　　.class 3、标签　　p 4、属性　　[type=“text”] 5、伪类　　:hover 6、伪元素　　::after 7、子代选择器、相邻(兄弟)选择器等 8、通配符　　* ** 权重计算 ** 内联样式，如: style=””，权值为1000。 ID选择器，如：#id，权值为0100。类，伪类和属性选择器，如.class，权值为0010。类型选择器和伪元素选择器，如p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+, ~权值为0000。继承的样式没有权值。. 注意使用important的样式权值最大，打破所有规则来源： CSDN 作者： ou~吼链接： https://blog.csdn.net/ttl1076005106/article/details/103994186

css基础

阅读更多关于 css基础

看看w3school css语法在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 h1 {color:red; font-size:14px;} 选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal; } 请注意标记为 <strong> 的蓝色代码的上下文关系： <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol> id 选择器以 "#" 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;} #green {color

基本属性

阅读更多关于基本属性

// 选择器（CSS） // 基本选择器：#id、.className、TagName、* // 事件的添加办法 // $(...).事件名(function() {}); // 属性与样式 // $(...).css("border", "1px solid red") // $(...).css({...}) // $(...).css("border") // $(...).attr(属性名, 值) // $(...).html() innerHTML // $(...).text() innerText // $(...).val() value // $(...).addClass() //添加类 // $(...).removeClass()//移除类 // $(...).toggleClass()//开关类来源： https://www.cnblogs.com/leehn/p/4783440.html

css基础学习01

阅读更多关于 css基础学习01

1. 什么是css 层叠样式表（cascading style sheets） css是一种用来美化网页的手段。 2. css的书写位置 1. 内嵌式：书写在html的head中 <style> 　　css代码 </style> 特点：结构和样式有一定的分离　　　可维护性较高　　　只可以影响当前页面 2.外联式：书写在.css文件中，被html调用 <link rel=”stylesheet” href=”css文件的路径” > 特点：结构和样式完全分离　　　可维护性最高　　　可以影响所有引用它的页面 3.行内式：内联式，书写在标签中 <div style="width:200px;height:200px;background-color:red;"></div> 特点：结构和样式混合在一起　　　可维护性最差　　　只能影响当前标签 3. css的语法结构选择器名称 { 　　属性名：属性值; 　　... } 4.css基础选择器 1.标签选择器语法结构：标签名 { 　　属性名：属性值; 　　.... } 选择原理：根据标签名选中并修饰对应的标签。选择范围：当前页面上所有的同名标签。 2.类选择器语法结构： .+目标标签的class值 { 属性：属性值; ... } 选择原理：根据标签的class的值找到并修饰这个标签。特点：类名可以重复

CSS选择器和jQuery选择器的区别与联系之一

阅读更多关于 CSS选择器和jQuery选择器的区别与联系之一

到底什么是选择器？通过常接触的CSS选择器和jQuery选择器理解一下，我们知道CSS是用于分离网页的结构和表现的，也就是说对于一个网页，HTML定义网页的结构，CSS描述网页的样子，一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript,这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。我们知道，jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用$("")包起来就成了一个jQuery选择器，如 CSS选择器 jQuery选择器 ID选择器 #myID $("#myID") 类选择器 .myClass $(".myClass") 标签选择器 p $("p") 层次选择器 div > strong $("div>strong") css称为伪类选择器 jQuery称之为过滤选择器 p:nth-child(3) $("p:nth-child(3)") 见下面的例子，CSS为每个段落的文字设置成14px,颜色是红色，jQuery中设置文字为16px,颜色为蓝色，因为jquery设置的是DOM加载后的行为，所有的段落表现为蓝色，16px字 <

订阅 css选择器