《精彩绝伦的CSS》——选择器（五）多种选择方式

五、多种选择方式

1、元素类型选择器

2、类选择器

3、id选择器

4、通用选择器（*）——匹配文档中所有元素

个人经常喜欢用该选择器做一下简单的兼容如：

*{

margin:0;

padding:0;

}

但建议还是用一些规范的兼容设置，如：

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: ”;

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

参照：http://meyerweb.com/eric/tools/css/reset/

5、属性选择器：匹配具有符合指定条件属性的所有元素。

以下是几种条件匹配形式：

[attr] 选择定义attr属性的元素，忽略属性值

[attr=”value”] 选择定义attr属性，且属性值为value的元素

[attr^=”value”] attr属性值以字符串value打头的元素

[attr$=”value”] attr属性值以value结尾的元素

[attr*=”value”] attr属性值包含字符串value的元素

[attr~=”value”] attr属性具有多个值，其中一个为字符串value的元素

[attr|=”value”] attr属性值为连字符（“-”）分割的多个值，其中一个为字符串value的元素

大部分都好理解，就最后一个举个例子：

<p>I like <span lang="en-gb">chunmei</span>and meimei</p>

对于上面这个<span>元素的选择就可以这样：
[lang|="en"]{
border:thin pink solid;
}

小tips：

属性选择器前可以加上其他选择器辅助选择，如：a[href=”https://www.baidu.com”]

属性选择器中的attr很灵活，可以是width，height也可以是类class等

6、并集选择器：可同时选择多个选择器

ul,li,table,img,p{

padding:0;

margin:0;

}

设置兼容时就是很常见的并集选择器

7、后代选择器：匹配某元素的所有符合条件的后代元素（不仅仅是子元素）

div ul{

list-style:none;

}

匹配div下的所有ul元素

8、子代选择器：匹配某元素的所有符合条件的子元素（仅是子元素，不包括子元素的后代）

div>ul{

list-style:none;

}

9、相邻兄弟选择器：匹配紧跟在某元素之后的对应元素

li+li{

list-style:none;

}

10、普通兄弟选择器：匹配某元素之后对应的兄弟元素但不包含直接相邻的兄弟元素。

li~h1{

font-size:250%;

}

匹配li元素后且与之共享父元素的h1元素，除第一个h1之外。

《精彩绝伦的CSS》——选择器（五）多种选择方式相关推荐

常用的css选择符,CSS选择器五大基本选择符
原标题:CSS选择器五大基本选择符 1. *(通配符) *通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.* ...
CSS布局(五) 网页布局方式
网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块. 三种关系:相邻,嵌套,重叠. 下面介绍网页布局的常用几种方式 1.一列布局: 一般都是固定的宽高,设置margin : 0 auto来水平居 ...
HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style=& ...
我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗？
本文翻译自:Can I write a CSS selector selecting elements NOT having a certain class or attribute? I would ...
Python爬虫(5)css选择器
css选择器 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 顾名思义css选择器定位和选择的是HTML抽象DOM树上的一个或一类元素. 文章目录 css选择器 ...
[css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器
一.CSS概念: 什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体.背景.颜色等二.在页面中使用css的3种常用方式 1.行内样式就是在一个 ...
CSS day1 |选择器字体文本引入方式
目录 1 css简介 1.1 html局限性 1.2 CSS-网页的美容师 1.3 css语法规范 1.4 css代码风格 2 CSS选择器 2.1 css选择器的作用 2.2 标签选择器 2.3 类 ...

《精彩绝伦的CSS》——选择器（五）多种选择方式

《精彩绝伦的CSS》——选择器（五）多种选择方式相关推荐

最新文章

热门文章