CSS基础二（选择器的使用）
一 选择器
1 标签选择器 权重为1
p{color:red;}2 id选择器 权重为100
给标签添加id的属性，值为id名
<div id="box">Lorem ipsum dolo</div>id名 选择元素
#box {background-color: pink;}id名不能重复
id只能有一个
3 class(类)选择器 权重为10
.class名选择元素
.box {color: red;} .box1 {background-color: royalblue;}class名可以重复
一个标签可以有多个class名,多个之间用空格隔开
给标签添加class的属性，值为class名
<div class="box box1">Lorem ipsum </div>
4通用选择器
*{margin:0; 外边距padding:0; 内填充}5伪类选择器(状态) 权重为10
- 超链接:link{} 链接未点击之前
- 超链接:visited{} 链接访问之后
- 任何元素:hover{} 鼠标划过该元素
- 超链接:active{} 鼠标按下的状态
6后代选择器 继承权重为0
选择器 选择器{} （空格隔开）
可以是多个选择器 选择器之间可以跨级，但是必须存在后代关系
7群组选择器（并集选择器）
选择器,选择器{} （逗号隔开）
8交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
交集选择器 是 并且的意思。 即...又...的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
9子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
10 !important 权重无穷大
div{/*权重:0001*/color: hotpink!important;/*无穷大*/}二 CSS新增选择器
1 结构(位置)伪类选择器（CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */color: pink; } li:last-child { /* 最后一个孩子 */color: purple;} li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */ color: skyblue;}2 目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {color: red;font-size: 30px; }3 属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */color: pink;} div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */color: skyblue;} div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */color: green;}<div class="font12">属性选择器</div><div class="font12">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="24font">属性选择器123</div><div class="sub-footer">属性选择器footer</div><div class="jd-footer">属性选择器footer</div><div class="news-tao-nav">属性选择器</div><div class="news-tao-header">属性选择器</div><div class="tao-header">属性选择器</div>4 伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式
- E::before和E::after
p::first-letter {font-size: 20px;color: hotpink;
}/* 首行特殊样式 */
p::first-line {color: skyblue;
}p::selection {/* font-size: 50px; */color: orange;
}E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {content:"开始";
}
div::after {content:"结束";
}E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
三 选择器的权重
内联样式 1000
id选择器 100
class选择器/伪类选择器 10
标签选择器 1
继承样式 0
选择器权重特点
权重值越高，优先显示该样式
后代选择器的权重由每个选择器的权重值相加
群组选择器的权重值为选择器本身的权重值
权重值相同的，就近原则
继承样式的权重值是最低的
命名
英文单词并且语义化 <div class="nav"></div>
驼峰命名 <div class="bigBox"></div>
短线连接 <div class="big-box"></div>
下划线连接 <div class="big_box"></div>
CSS基础二（选择器的使用）相关推荐
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- html选择文件框选择wood文件,CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 2.内部样式 div { color:red; } 3.外部样式 4.导入样式 /*在css导入样式*/ @im ...
- HTML超链以及CSS基础、选择器
一.超链接a的相关属性 1.href="书写路径"有5种写法:外部路径以及绝对路径.相对路径.空(刷新页面).#(取消链接功能) 2.title="鼠标悬停上去之后的提示 ...
- CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器 根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...
- 【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录 一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别 二.基础选择器 1.标签选择器 2.类选择器 3. ...
- CSS基础(二)--盒模型与浮动
盒模型 认识width和height 一个盒子中主要的属性有5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中wid ...
- HTML与CSS基础之选择器优先级(十)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>选择器 ...
- 常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一 常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
- css基础 层叠样式表 选择器
CSS css: 层叠样式表 语法: 选择器{属性:属性值:属性:属性值:} css的三种引入方式 a. 行内样式:<p style="color:red">描述内容& ...
最新文章
- 解决centos ping不通外网
- 开发时间及内容（二）
- Lua语法入门HelloWorld
- hadoop2.6.0+eclipse配置
- android intent 跳转activity,Activity 跳转 都知道用startActivity(Intent)
- 曾经我对python shutil很迷茫，直到我看完这篇实操目录……
- matlab中构建Cuk变换器,CUK变换器的SIMULINK仿真与应用.pdf
- 免费下载加速软件IDM，让你的下载不限速，高达10M每秒
- 计算机科学导论第12版答案,计算机科学导论第12章参考答案.pdf
- 计算机网络拓扑结构特点详解
- 扩展jQuery读书笔记:第一章，jQuery扩展
- 浅析嵌入式开发中的RAM和ROM
- Primitive Function 归一化方向角
- centos7.X版本如何下载网络流量实时监控工具iftop
- python 打印自己代码_用python打印网页源代码
- MySql将两个字段查询值合并拼接
- Golang seelog 使用入门简介
- 基于Node.js + jade + Mongoose 模仿gokk.tv
- 按洲分组国家地区标准代码
- 启动SOLIDWORKS2020显示无法获得下列许可SOLIDWORKS Standard 无法连接到服务器（-15，10，10061）的解决办法