你所不了解的css选择器

我们目前接触到的选择器:.class   #id  div  ......

不了解的选择器:a>b   a+b [a~=b] [a|=b]......   一下说举5 6 7 8为css3中的定义

1.a>b

div>p  选择父元素为 <div> 元素的所有 <p> 元素。

2.a+b

div+p  选择紧接在 <div> 元素之后的所有 <p> 元素。

3.[a~=b]

[title~=flower]  选择 title 属性包含单词 "flower" 的所有元素。

4.[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

5.[a^=b]

a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素

6.[a$=b]

a[src$=".jpg"]  选择其 src 属性以 ".jpg" 结尾的所有 <a> 元素。

7.[a*=b]

a[src*="abc"]  选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

8.a~b

p~ul  选择前面有 <p> 元素的每个 <ul> 元素。

时间: 2024-10-12 12:45:18

你所不了解的css选择器的相关文章

CSS选择器

CSS选择器有:id选择器.派生选择器 1.id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. #red {color:red;} #green {color:green;} <p id="red">这个段落是红色.</p> <p id="green">这个段落是绿色.</p> 2.派生选择器 在现代布局中,id 选择器常常用于建立派生

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的.但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢.举个例子吧!先上一串代码和效果,就知道我想表达什么了! 上面一个五列的li,代码如下 <style> *{margin:0;padding: 0;list-style: none} ul{display: flex} li{flex: 1;text-align: center;border-left: 1px solid red} li:n

Day48:HTML(form标签)、CSS选择器

一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldset和 label标签. 表单属性 action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web method: 表单的提交方式 post/get默认取值就是ge

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

【CSS】使用CSS选择器

CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic selector).开发人员可使用这类选择器在文档中进行比较宽泛的选择,也可以将其看作结合多种选择器进行特殊选择的基础. 1.1 选择所有元素 通用选择器匹配文档中的所有元素.它是最基本的选择器,不过使用很少,因为匹配过于广泛. 下面代码是一个使用通用选择器的样式示例: <!DOCTYPE html>

CSS选择器优先级比较

CSS选择器的优先级,一般根据就近原则,更准确一点,根据选择器的权值大小比较,权值越高,则优先级越高.如果加上!important则优先级最高. 权值大小: !important 1000 id 100 class 10 属性 10 伪类 10 伪元素 10 标签 1 通配符* 0

CSS选择器总结

最近在www.w3school.com.cn学习了CSS选择器,下面做一个知识汇总.部分源码来自www.w3school.com.cn! 插入样式表的方法有三种: 第一种:外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 第二种:内部样式表 <head> <style type=&

第 13 章 CSS 选择器[上]

学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的版本已经升级至第三代,即 CSS3 选择器.CSS3 选择器提供了更多.更丰富的选择器方式,主要分为三大类. 一.选择器总汇 本节课主要涉及到三种选择器:基本选择器.复合选择器和伪元素选择器,具体如下: 选择器 名称 说明 CSS 版本 * 通用选择器 选择所有元素 2 <type> 元素选择器