【css选择器】教程文章相关的互联网学习教程文章

css中选择器的使用

css是英文Cascading Style Sheets的缩写。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。我们再将html比喻为树干的时候,css比喻为叶子,花。那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。  css的选择器可分为:1、id选择器;2、class类别选择...

一张图一个表——CSS选择器总结【图】

CSS选择器总结:(这些表是一张图片^_^) 看底部完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820(我不想选择要积分币下载的,但那里最低必须选择1个积分……) 参考文献: https://baike.baidu.com/item/css%E9%80%89%E6%8B%A9%E5%99%A8/2819686 http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/来源:http://www.cnblogs.com/dennyLee2025...

CSS基本选择器

基本选择器 a) 标签名选择器 格式: 标签名{xxxx} 标签名选择器是通过标签的名字来选中指定的名字的标签 b) 类选择器 通过标签上通用的属性class, 可以通过class属性为当前标签指定所属的类, class属性值相同的标签则为一类标签, 可以为这一类的标签统一来设置样式. 格式: .类名{xxxxx} class属性值可以是多个, 多个值之间用空格隔开, 表明这个标签同时属于多个类, 多个类的样式会同时作用在这个标签上, 后设置的...

CSS的选择器【代码】【图】

css的选择器:  1,基本选择器。  2,高级选择器。基本选择器包含:  1,标签选择器    标签选择器可以选中所有的标签元素,比如div,ul,li,p等等,不管标签藏得多深,都能选中,选中的是所有的,而不是某一个,所以说"共性",而不是:“特性”。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{color: gray;font-size: 12px;}p{color: red;font-size: 20px;}span{co...

css选择器【代码】【图】

1aaaaaaaaaaaaaaaa 2 aaaaaaaaaaa 1h4 { 2 color:red; 3 font-size:14px; 4 }View Codeh4~p h4后面的p标签 h4+p h4相邻的p标签p[id] 包含id属性的p标签p[class~="b"] class类名为b且b前面有空格的p标签p[class|="b"] class类名为b且b后面有横杠的p标签a[href^="http"] a标签下的href以http开头a[href$="rar"] a标签下的href以rar结尾a[href*="o"] a标签下的href有op::first-line 选择p标签下第一行a:before(a::befor...

css基础:选择器、尺寸、背景

CSS(层叠样式表)定义如何显示HTML元素1、CSS的三中引入方式:行内样式(内联),内部样式表,外部样式表。2、语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。3、选择器3.1 元素选择器 div{}3.3 类选择器 .cl{}3.4 ID选择器 #id{}3.5 属性选择器 [type=‘text’]{}优先级问题:内联》 ID选择器 》类选择器 》元素选择器4、尺寸(行内元素的宽和高不生效)width: max-width...

CSS3属性选择器

<div id="section1"> 示例文本1</div><div id="subsection1-1">示例文本1-1</div><div id="subsection1-2">示例文本1-2</div><div id="section2">示例文本2</div><div id="subsection2-1">示例文本2-1</div><div id="subsection2-2">示例文本2-2</div>CSS2中使用属性选择器来设置<style type=text/css>[id = section1]{ background:yellow;}</style>CSS3中的属性选择器1.[att*=val]属性值包含用val指定的字符[id*=section]{ ...

css3选择器补充【代码】【图】

一、关系选择器1、E+F (E元素下一个满足条件的兄弟元素节点) 1 <style>2 div + p{3 background-color:red;// 第一个p元素变色 4 }5 </style>6 <body>7 <div>div</div>8 <p>1</p>9 <p>2</p> 10 <p>3</p> 11 </body> 1 <style>2 div + .demo{3 background-color:red;// 第一个p元素变色 4 }5 </style>6 <body>7 <div>div</div>8 <p class="demo">1</p>9 <p>2</...

CSS之选择器【代码】

CSS定义CSS 指层叠样式表 (Cascading Style Sheets)CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。CSS就是控制页面布局和样式CSS语法语法结构选择器{属性:值;属性:值;...

css知多少(5)——选择器【图】

1. 引言  从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。  CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图。  至于css能把页面渲染成什么样子,这是本系列的第三部分。  第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景、...

css笔记04:属性选择器【代码】【图】

1.属性选择器:带有 title 属性的所有元素设置样式: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html>3<head>4<style type="text/css">5[title]6 {7color:red;8 }9</style> 10</head> 1112<body> 13<h1>可以应用样式:</h1> 14<h2 title="Hello">Hello world</h2> 15<a title="School" href="http://w3school.com.cn">W3School</a> 1617<hr ...

CSS3属性选择器与(:not)选择器【代码】

一:css3属性选择器:img[alt]{border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{border:2px dashed #000; } css3的子字符串匹配属性选择器(1)‘匹配开头’的属性选择器依法如下:Element[attribute^="value"],实例代码如下:img[alt^="filem"]{border:2px dashed #000; } (2)‘匹配包含内容‘的属性选择器El...

Css中的属性选择器【代码】

0.属性选择器属性选择器可以根据元素的属性及属性值来选择元素示例:// 包含属性title所有标签 [title] {color:red;}// 包含属性title的 a标签 a[href] {color:red;}// 同时包含属性href和title的 a标签 a[href][title] {color:red;}// href属性值为http://www.w3school.com.cn/且title为W3School的 a标签 a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}// class属性为important的 p标签 . // 严格匹配,时...

简述历代CSS选择器及其优先级

CSS 中最重要的两部分,一部分是 CSS 选择器,另一部分是 CSS 属性,本文将重点描述 CSS 选择器。CSS 的工作流程本质上就是利用选择器选择到 HTML 中的元素,然后赋予他们样式规则,让每一个元素都变成我们想要的样子,都出现在我们想让它去的位置。  CSS到目前位置已经扩充到第三版了,每扩充一版,它的选择器和属性都会有很多的扩展,这里,我将把三个版本的选择器一一进行诠释。CSS1选择器选择器类型说明tagname标签选择器选择...

css选择器

基本选择器通配选择器选择器:*类型:通配选择器含义:选择文档中所有的HTML元素元素选择器选择器:E类型:元素选择器含义:选择指定类型的HTML元素ID选择器选择器:#ID类型:ID选择器含义:选择指定ID属性值为“ID”的HTML元素类选择器选择器:.class类型:类选择器含义:选择指定class属性值为“class”的HTML元素群组选择器选择器:.selctor1,selector2,...selectorN类型:群组选择器含义:将每一个选择器匹配的元素合并到一起层...