正文
css筛选样式,css包含选择器样式写法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS问题，#one{}是用ID进行筛选
/* id 为 parameter 的元素下面的 id 为 author 的子元素的样式，前面加 div 意思是且该元素是 div 元素时*/
#parameter div#author
{
text-align:center;
margin-top:5px;
}
/* id 为 parameter 的元素(且为 div 时)下面的 class 为 mypic 的子元素(且为 p 时)的样式*/
div#author p.mypic
{
border:none;
padding:15px 0px 0px 0px;
margin:0px 0px 8px 0px;
}
前面加html元素名就是指某作用于某ID或Class，且该ID或Class为XX元素时的样式：
避免 ID 前面加 某某html元素标签 这种写法：div#someid /*这是一个不好的例子*/
这样写是多此一举，ID是唯一的(理论上)，CSS解析时匹配元素是从右边往左边的，所以你这个代码实际解析时是下面这种情况：
你的代码：
------------------------------
#parameter div#author
------------------------------
解析css时匹配查找元素
------------------------------
(从右往左找)
查找-- #author 再找-- div 再再找-- #parameter
(子) (父1) (父 x 2)
找到：#author(找到这步就行了，不必往后找了)
再去找他爹：div
再去找他爷：#parameter
------------------------------
id 既然是唯一的，管它是 div 也好、 p 也好、a 也好，找到这个唯一 id #author 就 ok了，这样写让浏览器傻傻的找到了这个唯一的 id #author 以后还去继续找它爹和爷，看起来既复杂不便于阅读，同时多去找两个不必要的元素也会消耗多的解析时间
(部分浏览器的内核版本可能会一直按你写元素顺序去一直找到底，版本新点的或聪明点的浏览器内核找到第1步后会智能的忽略后面2、3两步)
所以这里：
#parameter div#author {css code} 直接写成 #author {css code} 就行了。
div#author p.mypic {css code} 直接写成 #author p.mypic {css code} 就行了。
至于 class 由于不是唯一的，就可以在前面加 div、p 之类的标签名来限制 class 的作用范围，例如：
.my1 {color:red;} /*class为my1的元素文字为红色*/
div.my1 {color:yellow;} /*class为my1的div元素文字为黄色*/
p.my1 {color:blue;} /*class为my1的p元素文字为蓝色*/
h1 class="my1"我是红色/h1
div class="my1"我是黄色/div
p class="my1"我是蓝色/h1
相关问答
Q1: css选择器，这个表示什么？
问题1：
这个是两个类的组合，class="类1
类2
类3
类4..."
使用多个类的组合，如果多个类定义了不同的同一个属性样式，那么取决于css定义的位置
后定义的会覆盖前面定义的(和
浏览器
hack
一个道理)
问题2
按你的理解
这只是一个细选：
如:
.c1
.c2{border:1px
solid
#000;}//意思是符合
c1
类
下的所有
c2
类
有如下HTML代码:
----这里有一个
c2类
但是不符合css筛选
所以不应用上面定义的
border样式---
----这里也有一个
c2类
但是符合css筛选
所以应用上面定义的
border样式---
----这也是符合的---
Q2: 有没有一款能够对比HTM和CSS样式 然后对多余冗杂的CSS进行筛选的软件？？
可以安装一个火狐的插件，叫dust-me-selectors，支持多个页面同时监控，检测出重复和无用的CSS最后手动删除。
安装方法：
1、
该工具是Firefox浏览器的一个附加插件。在FF浏览器地址栏中输入以上网址，点击安装此工具。
安装完成后，在火狐的右下角会出现一个扫帚的图标。
2、单击右键选择spider sitemap。
3、在输入框中输入网站地图的URL就可以进行全站CSS的检查。数分钟之后就可以出结果了。结果图如下
优点：
支持本地和远程样式文件，包括使用link标签、?xml-stylesheet?处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的style块和内联样式)
支持IE条件注释中引入的样式文件；
可以检查一个页面，也可以检查整个网站；
支持CSS1选择器、大部分CSS2和CSS3选择器；
理解通用的CSS hack，比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”；
支持Firefox 3.5和Firefox 3.0，事实上得益于FF 3.5的js引擎的改进，FF 3.5中的性能比FF 3.0要高50%。
Q3: 谁有一个火狐里面的插件，可以筛选出多余的css样式。
您好！很高兴为您答疑。
据您所述，您需要的是扩展CSS Usage，该扩展可以帮助您快速检索页面上哪些css规则被使用。
如果对我们的回答存在任何疑问，欢迎继续问询。
Q4: css样式选取框
用了JQ库，样式在style里，不过要配合js用
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
script src="jquery-3.3.1.min.js"/script
/head
style
.div1{
text-align: center;
background: beige;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span1{
/* margin-top: 7px; */ /* div的时候打开注释 */
background: #CCCCCC;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.div2{
text-align: center;
background: lawngreen;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span2{
background: white;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.hid1{
display: none;
}
.hid2{
}
/style
body
!-- button的 --
button class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/button
hr
hr
!-- div的 --
!-- div class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/div --
/body
script
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2");
$(".div1").toggleClass("div2");
$(".hid1").toggle();
$(".hid2").toggle();
})
})
/script
/html
