CSS学习笔记之选择符

20171112 发布于2019-08-28 18:02 / 1156人阅读

摘要：子选择符的子元素同胞选择符和在后面就行必须紧跟非子选择符所有是元素孙子的元素选择器属性选择器标签名属性属性值伪类选择器动态事件，状态改变被访问过的链接伪类链接伪类。换句话说，如果选择符更明确特指度更高，无论它在哪里，都会胜出。

类型，类和ID选择器

带有空格的字体名称要用""引起来

对选择器分组可使同一规则适用于多个选择器，例子如下

th,td {
    padding:0 10px 00;
}

选项的优先级

h1 {
    font-family:"Times New Roman",serif;
}
//先选用前者，没有前者，再使用后者

类型名与类名中间不应有空格 div.btn-success

通用选择器*，适用于文档所有元素

* {
    font-family:Arial;
}

后代选择器

div.planet table td {
    padding:0 10px 0 0;
}
//是类为planet的div元素的后代table的后代的td样式

万万牢记，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符，不要弄混。

子选择符>

section > p{
    font-style:Italic;
}
//section的子元素p

同胞选择符～和+

section ~ p {
    font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必须紧跟section

非子选择符

selection * a {
    ***;
}
//所有是selection元素孙子的a元素

ID选择器 #

属性选择器

标签名[属性="属性值"]

img[title="hh jj"]{...}

伪类选择器：动态事件，状态改变

a:visited {
    color:mangenta;
}
//被访问过的链接

UI伪类

链接伪类

Link。此时，链接就在那儿等着用户点击。

Visited。用户此前点击过这个链接。

Hover。鼠标指针正悬停在链接上。

Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

focus伪类——鼠标放在上面

input:focus {border:1px solid blue;}

target伪类

More Information  
//位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的：


This is the information you are looking for.


//那么，如下 CSS 规则
#more_info:target {background:#eee;}

结构化伪类

first-child 一组同胞元素的第一个

last-child

nth-child(3) 一组同胞元素的第三个

伪元素——似有实无的元素

first-letter

first-line

before 和 after

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//在类为age的p元素前面增加一段Age： 
p::first-letter {font-size:300%;}
//放大p的第一个字母

继承和层叠

浏览器默认样式表

用户样式表

作者链接样式表（按照它们链接到页面的先后顺序）

作者嵌入样式

作者行内样式

越后面优先级越高

规则一：包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。

规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。

规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。下面简单解释一下规则三。比如下面的标记

Inheritance is weak in the Cascade

和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
会导致单词“weak”变成蓝色，因为它从父元素 p 那里继承了这个颜色值。
但是，只要我们再给 em 添加一条规则
em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。

云服务器 GPU云服务器自定义选择符 css选择学习笔记 css选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110971.html

CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

newtrek 2019-08-28 18:21 评论0 收藏0
CSS学习笔记(十六) CSS最佳实践之可维护性篇

摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。前言 CSS代码难维护众所皆知。为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；作用于某个元素上的样式又可能来自单个样式规...

keke 2019-08-01 14:55 评论0 收藏0
CSS学习笔记(九) 界面组件之导航菜单

摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

pingink 2019-08-28 18:03 评论0 收藏0
CSS学习笔记(四) CSS优先级

摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...

高胜山 2019-08-28 18:01 评论0 收藏0
CSS学习笔记(三) CSS选择器

摘要：规则命名惯例规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成属性和值。用于选择作为指定祖先元素后代的标签。维基百科在其引证中大量使用了伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。 1.为文档添加样式的三种方法行内样式（写在特定 HTML 标签的 style 属性里）嵌入样式（嵌入的 CSS 样式是放在 HTML 文档的 hea...

charles_paul 2019-08-28 18:01 评论0 收藏0