由于我不是CSS或bootstrap专家，我请求帮助了解CSS'检查'用法的副作用。
我有以下简单的HTML代码：
<input type="radio" id="check1" name="mychoice" value="bechoice1">
<label for="check1" class="side-label">Mon choix 1</label>
<br/>
<input type="radio" id="check2" name="mychoice" value="bechoice2">
<label for="check2" class="side-label">Mon choix 2</label>
<br/>
<input type="radio" id="check3" name="mychoice" value="bechoice3">
<label for="check3" class="side-label">Mon choix 3</label>
<br/>
<div class="ischoiceno1" >Content n° 1</div>
<div class="ischoiceno2" >Content n° 2</div>
<div class="ischoiceno3" >Content n°3</div>
我正在使用这个CSS代码：
.ischoiceno1, .ischoiceno2, .ischoiceno3 {
display: none;
margin: 10px 0 0 35px;
border-width:1px;
border-style:dashed ;
border-color:#33ae74;
font-size: 12pt;
}
#check1:checked ~ .ischoiceno1 { display: block;}
#check2:checked ~ .ischoiceno2 { display: block;}
#check3:checked ~ .ischoiceno3 { display: block;}
此代码在旧版本的网站上运行良好。 重写整个应用程序，我现在使用bootstrap作为CSS框架。
此代码仍在运行。 但是当我在div中包含初始输入时，这是行不通的。 由于我的目标是将这些代码包含在'form-group'或'row'divs中，显然它不会运行。
我需要改变什么？我认为在CSS中我必须自定义代码。
答案 0 :(得分：0)
运算符~称为兄弟选择器。它将尝试找到兄弟姐妹并应用这些风格。
您的示例将有效，因为所有div内容都是radio按钮的兄弟。因此，当您将单选按钮移动到另一个div时，它会松开兄弟姐妹。
如果你想只使用CSS实现相同的效果，那么你必须遵循相同的结构意味着将所有代码移动到一个父代。否则，您可以使用javascript/jquery来获得所需的结果。
答案 1 :(得分：0)
您使用的~选择器称为general sibling combinator
#check1:checked ~ .ischoiceno1 { display: block;}将选择前面带有已检查.ischoiceno1元素的类#check1的每个元素。
如果将所有输入元素放在容器div中，则该逻辑不再起作用（它不适用于嵌套元素）。我无法想到纯CSS解决方案。我认为一个javascript解决方案就是这里的方式。
$(function() {
// watch for changes in the selection
$("input[name='mychoice']").change(radioSelectionChanged);
});
// function that is called when selection changes
function radioSelectionChanged(){
// hide all elements
$('.choice').hide();
// show only the selected one
$('#'+$(this).val()).show();
}.choice {
display: none;
margin: 10px 0 0 35px;
border-width:1px;
border-style:dashed ;
border-color:#33ae74;
font-size: 12pt;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radioContainer">
<input type="radio" id="check1" name="mychoice" value="bechoice1"> <label for="check1" class="side-label">Mon choix 1</label><br/>
<input type="radio" id="check2" name="mychoice" value="bechoice2"> <label
for="check2" class="side-label">Mon choix 2</label><br/>
<input type="radio" id="check3" name="mychoice" value="bechoice3"> <label for="check3" class="side-label">Mon choix 3</label><br/>
</div>
<div class="choice" id="bechoice1" >Content n° 1</div>
<div class="choice" id="bechoice2" >Content n° 2</div>
<div class="choice" id="bechoice3" >Content n°3</div>
答案 2 :(得分：0)
你在找？
Collecting Orange3-ImageAnalytics
Downloading Orange3-ImageAnalytics-0.1.13.tar.gz (2.3MB)
Requirement already satisfied: Orange3>=3.3.5 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3-ImageAnalytics)
Collecting Pillow>=4.2.1 (from Orange3-ImageAnalytics)
Downloading Pillow-5.0.0-cp36-cp36m-win_amd64.whl (1.6MB)
Collecting cachecontrol (from Orange3-ImageAnalytics)
Downloading CacheControl-0.12.3.tar.gz
Collecting hyper>=0.7.0 (from Orange3-ImageAnalytics)
Downloading hyper-0.7.0-py2.py3-none-any.whl (269kB)
Collecting lap==0.3.0 (from Orange3-ImageAnalytics)
Downloading lap-0.3.0.tar.gz (1.5MB)
Collecting lockfile (from Orange3-ImageAnalytics)
Downloading lockfile-0.12.2-py2.py3-none-any.whl
Requirement already satisfied: numpy>=1.10.0 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3-ImageAnalytics)
Requirement already satisfied: requests in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3-ImageAnalytics)
Requirement already satisfied: keyrings.alt in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: dill in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: joblib>=0.9.4 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: setuptools>=36.3 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: pip>=9.0 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: CommonMark>=0.5.5 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: bottleneck>=1.0.0 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: scipy>=0.16.1 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: serverfiles in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: pyqtgraph>=0.10.0 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: scikit-learn>=0.18.1 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: AnyQt>=0.0.8 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: xlrd>=0.9.2 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: keyring in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: docutils in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: chardet>=3.0.2 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from Orange3>=3.3.5->Orange3-ImageAnalytics)
Collecting msgpack-python (from cachecontrol->Orange3-ImageAnalytics)
Downloading msgpack-python-0.4.8.tar.gz (113kB)
Collecting h2<3.0,>=2.4 (from hyper>=0.7.0->Orange3-ImageAnalytics)
Downloading h2-2.6.2-py2.py3-none-any.whl (71kB)
Collecting hyperframe<4.0,>=3.2 (from hyper>=0.7.0->Orange3-ImageAnalytics)
Downloading hyperframe-3.2.0-py2.py3-none-any.whl
Requirement already satisfied: idna<2.7,>=2.5 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from requests->Orange3-ImageAnalytics)
Requirement already satisfied: urllib3<1.23,>=1.21.1 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from requests->Orange3-ImageAnalytics)
Requirement already satisfied: certifi>=2017.4.17 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from requests->Orange3-ImageAnalytics)
Requirement already satisfied: six in c:\users\certainty2\appdata\local\orange\lib\site-packages (from keyrings.alt->Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: pyreadline>=1.7.1 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from dill->Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: future in c:\users\certainty2\appdata\local\orange\lib\site-packages (from CommonMark>=0.5.5->Orange3>=3.3.5->Orange3-ImageAnalytics)
Requirement already satisfied: pywin32 in c:\users\certainty2\appdata\local\orange\lib\site-packages (from keyring->Orange3>=3.3.5->Orange3-ImageAnalytics)
Collecting hpack<4,>=2.2 (from h2<3.0,>=2.4->hyper>=0.7.0->Orange3-ImageAnalytics)
Downloading hpack-3.0.0-py2.py3-none-any.whl
Building wheels for collected packages: Orange3-ImageAnalytics, cachecontrol, lap, msgpack-python
Running setup.py bdist_wheel for Orange3-ImageAnalytics: started
Running setup.py bdist_wheel for Orange3-ImageAnalytics: finished with status 'done'
Running setup.py clean for Orange3-ImageAnalytics
Running setup.py bdist_wheel for cachecontrol: started
Running setup.py bdist_wheel for cachecontrol: finished with status 'done'
Stored in directory: C:\Users\Certainty2\AppData\Local\pip\Cache\wheels\2b\fd\77\677be47e3d4f83d2e8d07299f61697aa508e6f8b5d08d94050
Running setup.py bdist_wheel for lap: started
Running setup.py bdist_wheel for lap: finished with status 'error'
Complete output from command C:\Users\Certainty2\AppData\Local\Orange\python.exe -u -c "import setuptools, tokenize;__file__='C:\\Users\\CERTAI~1\\AppData\\Local\\Temp\\pip-build-n42rgcz0\\lap\\setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" bdist_wheel -d C:\Users\CERTAI~1\AppData\Local\Temp\tmpr3xg7jbjpip-wheel- --python-tag cp36:
Partial import of lap during the build process.
Generating cython files
running bdist_wheel
running build
running config_cc
unifing config_cc, config, build_clib, build_ext, build commands --compiler options
running config_fc
unifing config_fc, config, build_clib, build_ext, build commands --fcompiler options
running build_src
build_src
building extension "lap._lapjv" sources
building data_files sources
build_src: building npy-pkg config files
running build_py
creating build
creating build\lib.win-amd64-3.6
creating build\lib.win-amd64-3.6\lap
copying lap\lapmod.py -> build\lib.win-amd64-3.6\lap
copying lap\__init__.py -> build\lib.win-amd64-3.6\lap
running build_ext
No module named 'numpy.distutils._msvccompiler' in numpy.distutils; trying from distutils
customize MSVCCompiler
customize MSVCCompiler using build_ext
No module named 'numpy.distutils._msvccompiler' in numpy.distutils; trying from distutils
customize MSVCCompiler
Missing compiler_cxx fix for MSVCCompiler
customize MSVCCompiler using build_ext
building 'lap._lapjv' extension
compiling C sources
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools
----------------------------------------
Failed building wheel for lap
Running setup.py clean for lap
Running setup.py bdist_wheel for msgpack-python: started
Running setup.py bdist_wheel for msgpack-python: finished with status 'done'
Stored in directory: C:\Users\Certainty2\AppData\Local\pip\Cache\wheels\2c\e7\e7\9031652a69d594665c5ca25e41d0fb3faa024e730b590e4402
Successfully built cachecontrol msgpack-python
Failed to build Orange3-ImageAnalytics lap
Installing collected packages: Pillow, msgpack-python, cachecontrol, hyperframe, hpack, h2, hyper, lap, lockfile, Orange3-ImageAnalytics
Running setup.py install for lap: started
Running setup.py install for lap: finished with status 'error'
Complete output from command C:\Users\Certainty2\AppData\Local\Orange\python.exe -u -c "import setuptools, tokenize;__file__='C:\\Users\\CERTAI~1\\AppData\\Local\\Temp\\pip-build-n42rgcz0\\lap\\setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" install --record C:\Users\CERTAI~1\AppData\Local\Temp\pip-bn2gvmhk-record\install-record.txt --single-version-externally-managed --compile:
Partial import of lap during the build process.
Generating cython files
running install
running build
running config_cc
unifing config_cc, config, build_clib, build_ext, build commands --compiler options
running config_fc
unifing config_fc, config, build_clib, build_ext, build commands --fcompiler options
running build_src
build_src
building extension "lap._lapjv" sources
building data_files sources
build_src: building npy-pkg config files
running build_py
creating build
creating build\lib.win-amd64-3.6
creating build\lib.win-amd64-3.6\lap
copying lap\lapmod.py -> build\lib.win-amd64-3.6\lap
copying lap\__init__.py -> build\lib.win-amd64-3.6\lap
running build_ext
No module named 'numpy.distutils._msvccompiler' in numpy.distutils; trying from distutils
customize MSVCCompiler
customize MSVCCompiler using build_ext
No module named 'numpy.distutils._msvccompiler' in numpy.distutils; trying from distutils
customize MSVCCompiler
Missing compiler_cxx fix for MSVCCompiler
customize MSVCCompiler using build_ext
building 'lap._lapjv' extension
compiling C sources
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools
----------------------------------------
Command "C:\Users\Certainty2\AppData\Local\Orange\python.exe -u -c "import setuptools, tokenize;__file__='C:\\Users\\CERTAI~1\\AppData\\Local\\Temp\\pip-build-n42rgcz0\\lap\\setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" install --record C:\Users\CERTAI~1\AppData\Local\Temp\pip-bn2gvmhk-record\install-record.txt --single-version-externally-managed --compile" failed with error code 1 in C:\Users\CERTAI~1\AppData\Local\Temp\pip-build-n42rgcz0\lap\
.group {
position: relative;
}
.ischoiceno1, .ischoiceno2, .ischoiceno3 {
display: none;
margin: 10px 0 0 0;
border-width:1px;
border-style:dashed ;
border-color:#33ae74;
font-size: 12pt;
position:absolute;
bottom: -30px;
left: 35px;
right:10px;
}
#check1:checked ~ .ischoiceno1 { display: block;}
#check2:checked ~ .ischoiceno2 { display: block;}
#check3:checked ~ .ischoiceno3 { display: block;}